LiveReload webpages during editing in Sublime Text 3

Every front end developer must have encountered the problem that every time the web code is updated in the editor they have to refresh the browser each and every time. It becomes a hectic when the code is updated very often and the result is observed in parallel.
So, here's the solution for this problem. This tutorial is for Sublime Text 3 Editor. The solution is to install the LiveReload plugin in Sublime Text 3 and its extension in the browser.

Follow these steps to load the LiveReload package in ST3:

Step 1 :
Go to Sublime Text 3
Preferences >> Package Control >> Install Package >> LiveReload


*Wait for a while to load the below search box and type for LiveReload when the library loads : 









Step 2 :
Restart the Sublime Text 3.


Step 3 :
Go to chrome and navigate to extension store in chrome to install the LiveReload extension for Chrome.













Step 4 :
Now in chrome go to More tools >> Extension >> Check Allow access to file URL and Restart the browser.

 

Step 5 : 
Now enable the live Reload in chrome as show in image above right side.

Note: By default the LiveReload is enabled in Sublime Text 3, but in case if it not enabled then enable it as follows: Preferences >> LiveReload >> Plugins >> Enable/Disable
The status will be then shown for a while that LiveReload is Enabled.

 
I am an under graduate final year student pursuing B.Tech in Electrical and Electronics Engineering. I am interested and working in the field of Automation and Robotics. Being an Electrical and Electronics Engg. I have knowledge about Electrical as well as Electronics, but I have not restricted myself to these domains only, I have gained knowledge about Computer Science domain also. I am continuously learning and making vast my knowledge and skill set. I have learned MATLAB, EagleCAD, AutoCad Electrical, PLC, Arduino, Programming (C, C++, Python), Markup languages i.e, Front End Web Designing ( HTML, CSS, JavaScript ), Back-end( SQL, PHP ).

Comments

  1. softeirFebruary 2, 2022 at 11:12 PM

    It's a beautiful thing to be appreciated... Keep it up, thanks for sharing.
    After looking through a few blog articles on your website,
    we sincerely appreciate the way you blogged.
    Text Sublime

    ReplyDelete

Post a Comment

Popular posts from this blog

How to disable VLC Media Player Flashing Pop-Up track notification on Taskbar

Image
Sometimes it becomes hectic when the next video in a playlist is playing in the backgroung and VLC media player is flashing pop up track notification on the Taskar. This can be disabled as follows: Go to  Tools -> Preferences   (set Show Settings to All at bootom left corner) The similar dialog box will appear. Now go to Main interfaces -> Qt Choose "Never" in the drop down menu named Show notification popup on track change. Press Save to save VLC settings and restart VLC after that to make sure changes are enabled.
Read more

Color Picker in Sublime Text 3

Image
While developing the web page, everyone must have faced the problem in finding the color code during testing that which color is suitable. It is hard to change and guess the color code value. To solve this problem there is a plugin named Color Picker in Sublime Text 3 which makes possible to chose color based on hex value, RGB value, HSL value or directly using the color picker. Follow these to install color picker : Sublime Text 3 >> Preferences >> Package Control >> Install Package >> ColorPicker Now search for ColorPicker and click on it to install. Once the Color Picker has been installed then it can be launched using the shortcut command Ctrl+Shift+C . If not launching then try to restart the Sublime Text 3. ( Color Picker Interface )
Read more

Emmet in Sublime Text 3

Image
Emmet is a very useful plugin to boost the productivity and save time. It helps in development of product with more efficiency. In Sublime Text 3 Emmet auto completes the syntax for web design languages like HTML and CSS. To install Emmet follow this :   Sublime Text 3 >> Preferences >> Package Control >> Install Package >> Emmet. Syntax for Emmet : Child: > nav>ul>li <nav> <ul> <li></li> </ul> </nav> Sibling: + div+p+bq <div></div> <p></p> <blockquote></blockquote> Climb-up: ^ div+div>p>span+em^bq <div></div> <div> <p><span></span><em></em></p> <blo
Read more