![]() This approach is pretty reliable compare to LiveReload. ![]() From there on, any change you’ve made in the sublime text, the browser will auto refresh upon file saving. Press Ctrl Shift R again, you will see the “Start debugging” option. This will launch a chrome, and you will have the ability to select which tab you’d like to hook the remote debugger on. ![]() Press enter when you see “Start Google Chrome with remote debug port 9222” Press Ctrl Shift R to launch remote debugging command. Update chrome’s target flag to add - remote– debugging-port=9222 at the end of the target line. "windows" : "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", "osx": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome", Update the windows’s chrome path like below. Once you have the package installed, go to Preferences > Package Settings > Web Inspector > Settings – Default. In our case, we have already installed, so the package will not show in the list. Depends on which version of Sublime Text you are using select the one accordingly. You will see top two results are Web Inspector and Web Inspector 3. If you can see the package control listed below, then you are good to go.Īfter entering “Package Install” press enter, then type “Web Inspector”. Just press Ctrl Shift P and type package control. Here is the setup in order to make it work.įirst you need to install package control into Sublime Text, if you haven’t done so you can easily find out if the following command shows you the screenshot below. Hence, if you are using Sublime Text as your text editor, and chrome as your browser, then there is no need for you to use any additional tools to help you reload the browser. One of the packages that enables this feature also comes with a handy feature that is the ability to auto reload upon changes. In this case, we are going to use Sublime Text 2 / 3 to remote debug in chrome. Remote debugging, allows you to debug an app remotely. If your main development browser is Chrome, you can configure auto reload without additional third party toolsĪ while ago, chrome introduced a new way to debug your web app. Often times, you will find it crashes far more than you actually need it to reload the browser manually. LiveReload, costs $9.99 for Mac, is free on Windows. Now we have live reload functionality with Sublime Text 2 and it only took us about 45 seconds to set up.LiveReload is one of the most popular development tools out there that helps you, as a web developer, to auto refresh or reload the browser when file changes are made in a directory you specified. And we'll set the body background to red, color to green and now we have a beautiful website that I hope you never share with anybody. file in order to see the results, LiveReload may be the perfect package for you. I will open up main.css, let's remove everything, Save. I met him at a conference recently and saw his talk on Sublime Text. I will scroll down, and let's remove this second sentence right here, and if I click Save, you'll see that it instantly updates. You'll know it's on because you'll see this little compass in the middle. And now I'm going to turn on Live Reload. I will move this to the side, and my code editor to the right. Now I will switch to index.html and let's open this in the browser. To pull in the latest version of Boilerplate. Here, I don't have anything to work with, so let's use the Fetch plugin, which we covered already. And now we can see LiveReload version two has been added, and I'm also going to make sure that I enable Allow access to file URLs. I'll move this to the side and now I'm going to manually drag the extension in like so. Now, we can access all of our extensions by going to Window Extensions. ![]() But you can see here also in Chrome version 21 or higher, and I happen to have version 21, we need to manually drag in the extension. As I'm using Chrome, I wanna download this, but one quick note. In this case, I'm using Google Chrome, so I will click right here. If we come back to the live reload repo on GitHub, we can see links to the necessary extensions. We need to install the necessary browser extension. Great, now that's installed, but for this particular plugin, we need one more thing. As always, the first thing that we need to do is install the plugin. In this video, I'll show you how to work with the LiveReload plugin for Sublime Text 2. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |