问题描述:

I followed the instructions provided by Gogle to setup sourcemaps:

https://developers.google.com/chrome-developer-tools/docs/css-preprocessors

The sourcemaps are working, and I can see the .scss source link in the "Elements tab".

But I have two issues:

1 - When I edit the CSS properties in the "Elements tab" the link to .scss breaks up and DevTools shows link to the compiled .css file.

2 - When I ctrl-click on the CSS property in the "Elements" tab, the "Sources" tab opens successfully to show the corresponding .scss file. When I change the file inside the DevTools and try to save it - DevTools says that the file is saved, but it doesn't actually get saved on disk (seems like it gets saved somwhere else). So the sass watch doesn't update the .css because the .scss file doesn't actually get saved on disk.

I am using:

-Chrome 33.0.1750.154 m

-Sass 3.3.4

-SimpleHTTPServer

网友答案:

Found the answer in the article: https://medium.com/what-i-learned-building/b4daab987fb0

To be able to edit source files in Chrome DevTools one needs to:

  1. Add project folder as a Workspace (DevTools - Settings - Workspace - Add folder)
  2. Map the source file provided by webserver to the local file:

Ctrl+click on any css property to open the served source. In the Sources tree right-click on the file and choose "Map to network resource".

Chrome seems to automatically map all other resources in the folder. Now you can live-edit source files from DevTools.

If you want Chrome to automatically update website when changing source files, don't forget to enable the "Auto-reload generated CSS" in General tab.

相关阅读:
Top