Troubleshooting

LiveStyle is very experimental and very complex piece of software. And sometimes it doesn’t work the way as it should. This guide will help you find the cause of the problems.

Sensitive to valid CSS

For the best bi-directional live edit experience, LiveStyle performs source patching: it parses stylesheet into object model and makes decisions about updated data. It means your CSS/LESS/SCSS must be syntactically valid. LiveStyle tries to recover from simple mistakes but sometimes it fails to do so.

If a stylesheet can’t be parsed at all or ther were critical error during live update, you’ll see a LiveStyle icon in Google Chrome flashing red for some time:

image

If you click on this icon, you’ll see an error notification in extension popup. Also, a persistent “Show error log” link will appear in popup so you can click on it and review what caused errors:

image

Working with local files

If you’re working with local web-page (e.g. opened via file:// protocol), Google Chrome may apply some restrictions.

image

Note that it is highly recommended to work with web-pages via http:// protocol: there’s lots of free and simple tools to start local HTTP server in given folder (LiveStyle will have such option in near future too). When you open web-page via file:// protocol, Google Chrome applies a number of restrictions that LiveStyle tries to overcome with different hacks. As a result, you may experience slower performance and incorrect page updates.

If you still don’t want to use local HTTP server, just open DevTools for current page and keep it opened during live edit session.

Empty list of stylesheets

If you open LiveStyle popup and see no stylesheets but you sure that current page contains external stylesheets, try the following:

Most likely this error may appear after extension auto-update.

No connection

Chrome extension connects to editor via Websocket protocol. If you see “No connection” error, it might be one of the following:

Another reason of “No connection” issue is broken Sublime Text web-server implementation. Check out View > Show Console in ST for error log. In this case you can open LiveStyle app and then restart ST: LiveStyle app has its own server implementation so when Sublime Text starts, it will use it instead of creating a new one.

Getting debug data

If your stylesheet if perfectly valid, you see no error notifications, but LiveStyle still doesn’t work as expected, you can check out an internal debug log for more info.

To get debug log:

  1. In Goggle Chrome, go to Extensions preference page at chrome://extensions/.
  2. Enable “Developer mode” in the upper right corner.
  3. Click on “background page” in Emmet LiveStyle extension:

image

It will open a DevTools window. Go to “Console” pane to see debug log and possible hints about what’s going wrong.

Reporting errors and suggestions

If you find errors in LiveStyle or you have some ideas about what can be improved, you can report an issue. Please follow these simple rules before creating issue: