How can I make SASS editing work in Chrome Devtools?

Question

I just follow this tutplus tutorial for source map sass.

I cannot find Support for sass option in Experiment tab under the inspect ele

Answer 1

I made it work. SASS support is no longer an experiment: It's now a standard. I just follow simple steps to make it work.

1) Open your inspect element on chrome and click on gear icon which appears to the top right.

2) Enable the CSS source maps (which is I think its enabled by default. If not just check it. After enable the css source map don't close it.)

3) Click on Workspace tab on the left panel just below the General tab.

4) Add your source code folder by clicking the Add folder button (close the box.)

5) Go on Sources tab and find your scss file.

Now you can make changes and hit ctrl+s it will automatically change on your style.scss.

Answer 2

As of Chrome 75, here's how you turn on CSS source maps.

1. Open the browser's Developer Tools (Ctrl+Shift+I).
2. Open the dropdown menu in the top right corner, and click on "Settings."
3. Look for the checkbox that reads "Enable CSS source maps" and turn it on.