CODEWITHSUNDEEP
csssassgoogle-chrome-devtoolsbrowser-sync
Goblin
Goblin

Reputation: 33

Is there any way to open local file directly from 'Elements > Styles' tab in Chrome devtools?

I'm using the Chrome devtools persistence feature with browser-sync and sass.

I set a Workspace pointing to my scss folder and I can edit scss files from Chrome and have all css files created correctly, applied to browser real-time and saved in hard drive. However when I select an element on the Elements > Styles tab and make some changes, the changed file is the http://localhost:3000... one so changes are not kept. Then I still have to find the local file in the Sources tab to copy these changes.

I'm not sure if this is the best we can get but if we could either open the local file directly from the Elements > Style tab instead of the http://localhost:3000... file or somehow automatically copy any changes in the http://localhost:3000... file to local file the workflow would be even easier and faster.

Does any one knows how to accomplish that, even using some app/extension?

UPDATE:

From Rohit answer I found that if I turn off css source maps in devtools settings then it is correctly synced, showing the green circle on the Elements > Style and keep my changes, although it still pointing to http://localhost:3000...style.css file.
However then it only changes this file, not the specific partials/*.scss file and if I run sass compiler it overrides the css with the old code.
With the css source maps on Chrome finds my partial scss correctly but doesn't show the green circle so it's not synced and doesn't keep changes.

The problem seems to be with syncing scss files instead of css.

I was trying with a Workspace pointing to my root scss folder, also tried pointing it to the direct parent of the file beeing edited and still not syncing corretly.

Upvotes: 1

Views: 1618

Answers (2)

Goblin
Goblin

Reputation: 33

Adding the root of my project to the Workspace synced scss files correctly. Now when I click an element on the Element > Styles tab, Quick source opens the right file at the right scss rule but doesn't follow my changes in the Element > Styles tab (as it does using pure css) and I still need to copy changes to Quick source or edit there directly, save and wait sass compilation to apply changes on screen.

The workflow is much easier now but I'm not choosing this as the correct anwser because is not "as live as css" yet and maybe someone knows how to do this final step.

PS: browser-sync is not needed in this setup, just something to compile sass and Chrome apply changes automatically.

Upvotes: 0

Rohit Kumar
Rohit Kumar

Reputation: 724

This is a shot in the dark but,I beleive if you add the parent folder of the files you are working on from Devtools > Sources Tab > Filesystem tab > Add folder to workspace. Like so : image

Then navigate to your folder, and add reload the page. After reloading if you see green like so: image

It means it is synced and will update without you going to the sources tab.

Upvotes: 3

Related Questions