Sublime Forum

How to use LiveReload in Sublime Text 3

#1

Hi.
I was wondering if there is any problem using the pluggin LiveReload in ST3. I knew it yesterday and i think it has to be very helpful.
The thing is that i cannot installed it i dont know where is the problem. the browser or in ST3. Can you help me with this? are you using it?

Thanks
MGM

0 Likes
#2

Post the contents of the entire ST console after you performed the desired steps and describe those as good as possible.

0 Likes
#3

Hi FichteFoll

Basically what i am trying to do is to follow the step of the next link, feedback number 4.

http://stackoverflow.com/questions/25886011/how-do-i-install-livereload-sublime-text-3

i installed in ST3 the plugin and as well in the browser (firefox). version 2.1.1

in the console cant see any error related

are you using it in ST3 with firefox?
any advice?
this plugin can be amazing.

0 Likes
#4

I cannot tell what “feedback number 4” is. Please name the feedback’s author.

post it anyway

0 Likes
#5

Author = Mr. Roshan

This is what i have in console:

DPI scale: 1
startup, version: 3083 linux x64 channel: stable
executable: /opt/sublime_text/sublime_text
working dir: /
packages path: /home/asus/.config/sublime-text-3/Packages
state path: /home/asus/.config/sublime-text-3/Local
zip path: /opt/sublime_text/Packages
zip path: /home/asus/.config/sublime-text-3/Installed Packages
ignored_packages: [“Vintage”]
pre session restore time: 0.109376
warning: mnemonic t not found in menu caption Tools
startup time: 0.248621
first paint time: 0.265775
reloading plugin Default.block
reloading plugin Default.comment
reloading plugin Default.copy_path
reloading plugin Default.delete_word
reloading plugin Default.detect_indentation
reloading plugin Default.duplicate_line
reloading plugin Default.echo
reloading plugin Default.exec
reloading plugin Default.fold
reloading plugin Default.font
reloading plugin Default.goto_line
reloading plugin Default.history_list
reloading plugin Default.indentation
reloading plugin Default.kill_ring
reloading plugin Default.mark
reloading plugin Default.new_templates
reloading plugin Default.open_context_url
reloading plugin Default.open_file_settings
reloading plugin Default.open_in_browser
reloading plugin Default.pane
reloading plugin Default.paragraph
reloading plugin Default.paste_from_history
reloading plugin Default.quick_panel
reloading plugin Default.save_on_focus_lost
reloading plugin Default.scroll
reloading plugin Default.set_unsaved_view_name
reloading plugin Default.side_bar
reloading plugin Default.sort
reloading plugin Default.swap_line
reloading plugin Default.switch_file
reloading plugin Default.symbol
reloading plugin Default.transform
reloading plugin Default.transpose
reloading plugin Default.trim_trailing_white_space
reloading plugin CSS.css_completions
reloading plugin Diff.diff
reloading plugin HTML.encode_html_entities
reloading plugin HTML.html_completions
reloading plugin 0_package_control_loader.00-package_control
reloading plugin 0_package_control_loader.01-ssl-linux
Package Control: Linux SSL: successfully loaded _ssl module for libssl.so.1.0.0
reloading plugin 0_package_control_loader.02-bz2
reloading plugin 0_package_control_loader.50-backrefs
reloading plugin AutoFileName.autofilename
reloading plugin AutoFileName.getimageinfo
reloading plugin BracketHighlighter.bh_core
reloading plugin BracketHighlighter.bh_logging
reloading plugin BracketHighlighter.bh_plugin
reloading plugin BracketHighlighter.bh_regions
reloading plugin BracketHighlighter.bh_remove
reloading plugin BracketHighlighter.bh_rules
reloading plugin BracketHighlighter.bh_search
reloading plugin BracketHighlighter.bh_swapping
reloading plugin BracketHighlighter.bh_wrapping
reloading plugin Browser Integration.browser
reloading plugin Browser Integration.browser_integration
Browser Integration :: Intializing Browser instance.
reloading plugin Browser Integration.browser_integration_autoreload
reloading plugin Browser Integration.browser_integration_class
reloading plugin Browser Integration.browser_integration_click
reloading plugin Browser Integration.browser_integration_execute
reloading plugin Browser Integration.browser_integration_inject
reloading plugin Browser Integration.browser_integration_install
Found chromedriver executable
in ‘/home/asus/.config/sublime-text-3/Installed Packages/chromedriver’
reloading plugin Browser Integration.browser_integration_launch
reloading plugin Browser Integration.browser_integration_live_localstorage
reloading plugin Browser Integration.browser_integration_livecss
reloading plugin Browser Integration.browser_integration_localstorage
reloading plugin Browser Integration.browser_integration_main_menu
reloading plugin Browser Integration.browser_integration_navigate
reloading plugin Browser Integration.browser_integration_play
reloading plugin Browser Integration.browser_integration_quit
reloading plugin Browser Integration.browser_integration_record
reloading plugin Browser Integration.browser_integration_reload
reloading plugin Browser Integration.browser_integration_select
reloading plugin Browser Integration.browser_integration_selectint
reloading plugin Browser Integration.browser_integration_source
reloading plugin Browser Integration.browser_integration_stop
reloading plugin Browser Integration.browser_integration_stylesheets
reloading plugin Browser Integration.browser_integration_type
reloading plugin Browser Refresh.BrowserRefresh
reloading plugin Color Highlighter.ColorHighlighter
reloading plugin Color Highlighter.colors
reloading plugin Emmet.emmet-plugin
reloading plugin HTMLBeautify.HTMLBeautify
reloading plugin Javascript Beautify.jsbeautify
reloading plugin LiveReload.livereload_st2
Traceback (most recent call last):
File “/opt/sublime_text/sublime_plugin.py”, line 74, in reload_plugin
m = importlib.import_module(modulename)
File “./importlib/init.py”, line 90, in import_module
File “”, line 1584, in _gcd_import
File “”, line 1565, in _find_and_load
File “”, line 1532, in _find_and_load_unlocked
File “/opt/sublime_text/sublime_plugin.py”, line 678, in load_module
exec(compile(source, source_path, ‘exec’), mod.dict)
File “livereload_st2 in /home/asus/.config/sublime-text-3/Installed Packages/LiveReload.sublime-package”, line 21
except Exception, u:
^
SyntaxError: invalid syntax
reloading plugin LiveReloadMake.LiveReloadMake
Traceback (most recent call last):
File “/opt/sublime_text/sublime_plugin.py”, line 74, in reload_plugin
m = importlib.import_module(modulename)
File “./importlib/init.py”, line 90, in import_module
File “”, line 1584, in _gcd_import
File “”, line 1565, in _find_and_load
File “”, line 1532, in _find_and_load_unlocked
File “/opt/sublime_text/sublime_plugin.py”, line 678, in load_module
exec(compile(source, source_path, ‘exec’), mod.dict)
File “LiveReloadMake in /home/asus/.config/sublime-text-3/Installed Packages/LiveReloadMake.sublime-package”, line 42, in
AttributeError: type object ‘LiveReload’ has no attribute ‘Plugin’
reloading plugin Nettuts+ Fetch.Fetch
reloading plugin Nodejs.Nodejs
reloading plugin Nodejs.init
reloading plugin Package Control.1_reloader
reloading plugin Package Control.2_bootstrap
reloading plugin Package Control.Package Control
reloading plugin SideBarEnhancements.SideBar
reloading plugin SideBarEnhancements.SideBarAPI
reloading plugin SideBarEnhancements.SideBarDefaultDisable
reloading plugin ColorPicker.sublimecp
reloading plugin JSHint Gutter.JSHint
reloading plugin LiveReload.CoffeescriptPlugin
reloading plugin LiveReload.CommandAPI
reloading plugin LiveReload.CompassPlugin
reloading plugin LiveReload.LESSPlugin
reloading plugin LiveReload.LiveReload
reloading plugin LiveReload.SimpleReloadCallback
reloading plugin LiveReload.SimpleReloadPlugin
reloading plugin LiveReload.SimpleReloadPluginDelay
reloading plugin LiveReload.SimpleWSCallback
reloading plugin LiveReload.init
reloading plugin SFTP.SFTP
reloading plugin User.open_browser
plugins loaded
LiveReload: added file /livereload.js with content-type: text/javascript
INFO:WebSocketClient:Starting server
Emmet: No need to update PyV8
reloading Packages/User/Fetch.sublime-settings
warning: mnemonic t not found in menu caption Tools
Package Control: Installing 1 upgrades
ignored packages updated to: [“JSHint Gutter”, “Vintage”]
unloading plugin JSHint Gutter.JSHint
warning: mnemonic t not found in menu caption Tools
reloading Packages/User/Package Control.sublime-settings
warning: mnemonic t not found in menu caption Tools
warning: mnemonic t not found in menu caption Tools
reloading Packages/User/Preferences.sublime-settings
warning: mnemonic t not found in menu caption Tools
Package Control: Upgraded JSHint Gutter to 2016.01.18.17.17.20
ignored packages updated to: [“Vintage”]
reloading plugin JSHint Gutter.JSHint
warning: mnemonic t not found in menu caption Tools
warning: mnemonic t not found in menu caption Tools
reloading Packages/User/Package Control.sublime-settings
reloading Packages/User/Preferences.sublime-settings
warning: mnemonic t not found in menu caption Tools
reloading Packages/User/Preferences.sublime-settings
warning: mnemonic t not found in menu caption Tools
reloading Packages/User/Fetch.sublime-settings
warning: mnemonic t not found in menu caption Tools

Thanks for your time

0 Likes
#6

That’s our culprit. The problem is: I do not know where you got this livereload_st2 from. It doesn’t appear in any credible and updated sources. So we are going to revert this.

  1. Run Package Control: Remove Package in the command palette and select “LiveReload”
  2. Run Package Control: Remove Repository in the command paltte and select https://raw.github.com/Grafikart/ST3-LiveReload/master/package.json. If there is anything else listed, repeat this step and remove that as well.
  3. Restart. Shouldn’t be necessary, but better be safe.
  4. Run Package Control: Install Package in the command palette and select “LiveReload”
  5. Re-do the recommended settings changes from the SO solution. I can not evaluate whether you actually need them.
  6. Hope everything works.
  7. Run Package Control: List Packages in the command palette, move to “Package Control” and report the version it shows.
0 Likes
#7

I followed all the steps given.

Number 5 i dont understand very well. my SO is ubuntu. Should i do anything else?

The version install throw the package control of LiveReload is v.0.1.1

st3.png1262×183 26.6 KB

0 Likes
#8

As well in firefox i have this

livereload2.png1458×495 49.4 KB

i have not the button shown in the picture for firefox to active the plugin so i guess it is working.

Any idea? do you need furthermore information?

Thanks

0 Likes
#9

I wanted to know the version of Package Control.

You didn’t describe the “new” problem. Pasting console is always a good idea.

0 Likes
#10

Ah. ok
The version of the Package Control is

Here is what the console show

DPI scale: 1
startup, version: 3083 linux x64 channel: stable
executable: /opt/sublime_text/sublime_text
working dir: /
packages path: /home/asus/.config/sublime-text-3/Packages
state path: /home/asus/.config/sublime-text-3/Local
zip path: /opt/sublime_text/Packages
zip path: /home/asus/.config/sublime-text-3/Installed Packages
ignored_packages: [“Vintage”]
pre session restore time: 0.115878
warning: mnemonic t not found in menu caption Tools
startup time: 0.24442
first paint time: 0.264236
reloading plugin Default.block
reloading plugin Default.comment
reloading plugin Default.copy_path
reloading plugin Default.delete_word
reloading plugin Default.detect_indentation
reloading plugin Default.duplicate_line
reloading plugin Default.echo
reloading plugin Default.exec
reloading plugin Default.fold
reloading plugin Default.fontLet me add that i
reloading plugin Default.goto_line
reloading plugin Default.history_list
reloading plugin Default.indentation
reloading plugin Default.kill_ring
reloading plugin Default.mark
reloading plugin Default.new_templates
reloading plugin Default.open_context_url
reloading plugin Default.open_file_settings
reloading plugin Default.open_in_browser
reloading plugin Default.pane
reloading plugin Default.paragraph
reloading plugin Default.paste_from_history
reloading plugin Default.quick_panel
reloading plugin Default.save_on_focus_lost
reloading plugin Default.scroll
reloading plugin Default.set_unsaved_view_name
reloading plugin Default.side_bar
reloading plugin Default.sort
reloading plugin Default.swap_line
reloading plugin Default.switch_file
reloading plugin Default.symbol
reloading plugin Default.transform
reloading plugin Default.transpose
reloading plugin Default.trim_trailing_white_space
reloading plugin CSS.css_completions
reloading plugin Diff.diff
reloading plugin HTML.encode_html_entities
reloading plugin HTML.html_completions
reloading plugin 0_package_control_loader.00-package_control
reloading plugin 0_package_control_loader.01-ssl-linux
Package Control: Linux SSL: successfully loaded _ssl module for libssl.so.1.0.0
reloading plugin 0_package_control_loader.02-bz2
reloading plugin 0_package_control_loader.50-backrefs
reloading plugin AutoFileName.autofilename
reloading plugin AutoFileName.getimageinfo
reloading plugin BracketHighlighter.bh_core
reloading plugin BracketHighlighter.bh_logging
reloading plugin BracketHighlighter.bh_plugin
reloading plugin BracketHighlighter.bh_regions
reloading plugin BracketHighlighter.bh_remove
reloading plugin BracketHighlighter.bh_rules
reloading plugin BracketHighlighter.bh_search
reloading plugin BracketHighlighter.bh_swapping
reloading plugin BracketHighlighter.bh_wrapping
reloading plugin Browser Integration.browser
reloading plugin Browser Integration.browser_integration
Browser Integration :: Intializing Browser instance.
reloading plugin Browser Integration.browser_integration_autoreload
reloading plugin Browser Integration.browser_integration_class
reloading plugin Browser Integration.browser_integration_click
reloading plugin Browser Integration.browser_integration_execute
reloading plugin Browser Integration.browser_integration_inject
reloading plugin Browser Integration.browser_integration_install
reloading plugin Browser Integration.browser_integration_launch
reloading plugin Browser Integration.browser_integration_live_localstorage
reloading pluginFound chromedriver executable Browser Integration.browser_integration_livecss

reloading plugin Browser Integration.browser_integration_localstorage
in '/home/asus/.config/sublime-text-3/Installed Packages/chromedriver’reloading plugin Browser Integration.browser_integration_main_menu
reloading plugin
Browser Integration.browser_integration_navigate
reloading plugin Browser Integration.browser_integration_play
reloading plugin Browser Integration.browser_integration_quit
reloading plugin Browser Integration.browser_integration_record
reloading plugin Browser Integration.browser_integration_reload
reloading plugin Browser Integration.browser_integration_select
reloading plugin Browser Integration.browser_integration_selectint
reloading plugin Browser Integration.browser_integration_source
reloading plugin Browser Integration.browser_integration_stop
reloading plugin Browser Integration.browser_integration_stylesheets
reloading plugin Browser Integration.browser_integration_type
reloading plugin Browser Refresh.BrowserRefresh
reloading plugin Color Highlighter.ColorHighlighter
reloading plugin Color Highlighter.colors
reloading plugin Emmet.emmet-plugin
reloading plugin HTMLBeautify.HTMLBeautify
reloading plugin Javascript Beautify.jsbeautify
reloading plugin Nettuts+ Fetch.Fetch
reloading plugin Nodejs.Nodejs
reloading plugin Nodejs.init
reloading plugin Package Control.1_reloader
reloading plugin Package Control.2_bootstrap
reloading plugin Package Control.Package Control
reloading plugin SideBarEnhancements.SideBar
reloading plugin SideBarEnhancements.SideBarAPI
reloading plugin SideBarEnhancements.SideBarDefaultDisable
reloading plugin ColorPicker.sublimecp
reloading plugin JSHint Gutter.JSHint
reloading plugin LiveReload.CoffeescriptPlugin
reloading plugin LiveReload.CommandAPI
reloading plugin LiveReload.CompassPlugin
reloading plugin LiveReload.LESSPlugin
reloading plugin LiveReload.LiveReload
reloading plugin LiveReload.SimpleReloadCallback
reloading plugin LiveReload.SimpleReloadPlugin
reloading plugin LiveReload.SimpleReloadPluginDelay
reloading plugin LiveReload.SimpleWSCallback
reloading plugin LiveReload.init
reloading plugin SFTP.SFTP
reloading plugin User.open_browser
plugins loaded
LiveReload: added file /livereload.js with content-type: text/javascript
INFO:WebSocketClient:Starting server
Emmet: No need to update PyV8
Package Control: Skipping automatic upgrade, last run at 2016-01-19 18:29:14, next run at 2016-01-19 19:29:14 or after
reloading Packages/User/Fetch.sublime-settings
warning: mnemonic t not found in menu caption Tools

0 Likes
#11

Okay, looks all good.

Is there still a problem when using it?

0 Likes
#12

yes. i open a index.html in the browser. i make a change in the html file and css. save them and there is not change in firefox.

any suggestion?

0 Likes
#13

Alternatively (I’ve no idea how the ST plugin of livereload works), if you have npm installed, you could install the livereload package.

npm install -g livereload
livereload "path/to/website/directory"

Make sure to have this script tag in your html files:

<script src="http://localhost:35729/livereload.js"></script>

The port may be different, though this one is the default I think.

1 Like
#14

i saw this way on google but i think the other one is better. you dont have to be focused on scripts but if i cant find a solution i will try it.
thanks

0 Likes
#15

First, a note. The browser extension is what replaces the need to manually insert the script tag, not the SublimeText plugin. But ok, let’s try to make it work.

Testing the server

Ok, let’s say you just opened Sublime.
You then create/open a file called index.html.
You activate the liveReload server by selecting the commands…

A. LiveReload: Enable/Disable plugins
B. Enable - Simple Reload

If you look in the status bar at the bottom, a message should temporarily appear.
"Simple Reload" the LiveReload plugin has been enabled!

If you make a change in the file, and save it, you should see a bunch of logs in the console that starts with INFO:WebSocketClient:.

Correct?

0 Likes
#16

Hi Dubeg

Thanks to you i did a small step forward.
I found a file named test.html in
“file:///home/asus/.config/sublime-text-3/Packages/LiveReload/web/test.html”

As its name says, it is to test LiveReloas. In the begining it didnt work because i didnt enable simple reload as i reinstalled it. Now the test.html works perfectly but MY files NO.

This is what the console show when i saved my own file:

{“apply_css_live”: null, “command”: “reload”, “path”: “index.html”, “apply_js_live”: null, “apply_images_live”: null}
INFO:WebSocketClient:Remove from clients table <LiveReload.server.WebSocketClient.WebSocketClient object at 0x7f8b49ab72d0>
ERROR:WebSocketClient:WebSocket error
Traceback (most recent call last):
File “/home/asus/.config/sublime-text-3/Packages/LiveReload/server/WebSocketClient.py”, line 84, in init
data = self.socket.recv(1024)
OSError: [Errno 9] Bad file descriptor
INFO:WebSocketClient:Remove from clients table <LiveReload.server.WebSocketClient.WebSocketClient object at 0x7f8b49ab72d0>
INFO:WebSocketClient:new client (‘127.0.0.1’, 49288)
INFO:WebSocketClient:new client (‘127.0.0.1’, 49291)
INFO:WebSocketClient:Add to clients table <LiveReload.server.WebSocketClient.WebSocketClient object at 0x7f8b49ab72d0>
INFO:WebSocketClient:{‘opcode’: 1, ‘mask’: b’\xefC\x85K’, ‘close_reason’: None, ‘close_code’: None, ‘hlen’: 4, ‘fin’: 1, ‘left’: 0, ‘payload’: b’{“command”:“hello”,“protocols”:[“http://livereload.com/protocols/official-6",“http://livereload.com/protocols/official-7”],“ver”:“2.0.8”,“snipver”:"1”}’, ‘length’: 151}
INFO:WebSocketClient:Command: hello
INFO:WebSocketClient:{‘opcode’: 1, ‘mask’: b’\xc8\xdf\xcc\xe2’, ‘close_reason’: None, ‘close_code’: None, ‘hlen’: 4, ‘fin’: 1, ‘left’: 0, ‘payload’: b’{“command”:“info”,“plugins”:{“less”:{“disable”:false,“version”:“1.0”}},“url”:“file:///home/asus/.config/sublime-text-3/Packages/LiveReload/web/test.html”}’, ‘length’: 154}
INFO:WebSocketClient:Command: info
b’{“command”:“info”,“plugins”:{“less”:{“disable”:false,“version”:“1.0”}},“url”:“file:///home/asus/.config/sublime-text-3/Packages/LiveReload/web/test.html”}’

0 Likes
#17

In your logs, you have OSError: [Errno 9] Bad file descriptor for the file WebSocketClient.py at line 84. I have this same error on Windows when I disable the LiveReload extension in Firefox. So I am guessing this is not our problem.

If we look at the last line in the logs, it seems the URL points to “test.html”. So perhaps it is only monitoring changes for that file.

Did you execute the command (“Enable… Simple Reload”) for your file as well? I get that you did it for test.html, but perhaps you need to execute it for every file that you want to sync.

0 Likes
#18

i tried Enable… Simple Reload while i am working on my file and doesnt work. when i save my own file, the file test.html make a reload. i can see it in the browser. must be something about configuration but as far as i know, at any moment i have tought any configuration’s file.

any idea come up to your mind?

0 Likes
#19

well… now is working. Apparently i had to write the next script into my file.

one important question… do you do this for every single file? there isnt another way as this one can be a bit annoying?

0 Likes
#20

sorry for insisting… just wondering if you guys need to write in the beginning of any file a small script in order to make it works.

0 Likes