4 ms·

> since devtools doesn't keep a log of all your changes It does now, although you'll have to find it. :) Flavio mentioned this below, but peek at the new Chan

> since devtools doesn't keep a log of all your changes It does now, although you'll have to find it. :) Flavio mentioned this below, but peek at the new Changes panel: https://umaar.com/dev-tips/137-changes-panel/ https://umaar.com/dev-tips/137-changes-panel/ And while it does track changes to all resources and inspector-stylesheet, any changes made to inline styles aren't captured yet. That aside, styleurl looks great and clearly improves the collaboration workflow.

Jarred 8y ago
Thanks for the kind words about StyleURL. I didn't know about the Changes panel until recently, that's going to help a lot of developers. Behind the scenes, StyleURL parses the CSS and uses an AST to do the diff'ing, rather than generating a character-by-character diff like one might see in a pull request on Github. StyleURL creates a more helpful diff because it ignores irrelevant changes (such as whitespace). As a comparison, on Hacker News, I changed the font-size on body from "10pt" to "12pt". Screenshot comparison: Changes panel: https://www.dropbox.com/s/qa57kvsazglx22y/changes.png?dl=0 https://www.dropbox.com/s/qa57kvsazglx22y/changes.png?dl=0 StyleURL: https://www.dropbox.com/s/5g8erdiskdskkhx/styleurl.png?dl=0 https://www.dropbox.com/s/5g8erdiskdskkhx/styleurl.png?dl=0 This is a contrived example, but most of the diff shown in the Changes panel is unintentional whitespace changes, whereas StyleURL's diff only shows valid CSS that changed.
nikkwong 8y ago
Wow, it's literally in the most hard-to-find part of the devtools UI. No wonder I thought it didn't exist.
Theodores 8y ago
The novelty of the Chrome Workspaces wore off for me even though it promises so much, particularly with source maps enabled. The problem for me was in the details, triggering the CSS compiler and being able to do undo repeatedly (for me most CSS undo things need a few lines changing). Furthermore I have the SCSS files open anyway in my IDE and for me I write a lot of concise comments in the SCSS file for the next guy that has to edit my code. What does work for me is making my changes in the IDE with that triggering the CSS compiler and, through Chrome Workspaces, having the browser reload the changes automatically. This auto-reload has been a game changer, due to placing emphasis on commenting my code I am not seeing how I am going to be having Chrome update my SCSS files any time soon. The functionality of my IDE is much better for that, it also has syntax checking so I also get all things sorted alphabetically and know if I have gone over the depth of three when it comes to specificity.

Jarred 8y ago

Thanks for the kind words about StyleURL. I didn't know about the Changes panel until recently, that's going to help a lot of developers. Behind the scenes, StyleURL parses the CSS and uses an AST to do the diff'ing, rather than generating a character-by-character diff like one might see in a pull request on Github. StyleURL creates a more helpful diff because it ignores irrelevant changes (such as whitespace). As a comparison, on Hacker News, I changed the font-size on body from "10pt" to "12pt". Screenshot comparison: Changes panel: https://www.dropbox.com/s/qa57kvsazglx22y/changes.png?dl=0 https://www.dropbox.com/s/qa57kvsazglx22y/changes.png?dl=0 StyleURL: https://www.dropbox.com/s/5g8erdiskdskkhx/styleurl.png?dl=0 https://www.dropbox.com/s/5g8erdiskdskkhx/styleurl.png?dl=0 This is a contrived example, but most of the diff shown in the Changes panel is unintentional whitespace changes, whereas StyleURL's diff only shows valid CSS that changed.

nikkwong 8y ago

Wow, it's literally in the most hard-to-find part of the devtools UI. No wonder I thought it didn't exist.

Theodores 8y ago

The novelty of the Chrome Workspaces wore off for me even though it promises so much, particularly with source maps enabled. The problem for me was in the details, triggering the CSS compiler and being able to do undo repeatedly (for me most CSS undo things need a few lines changing). Furthermore I have the SCSS files open anyway in my IDE and for me I write a lot of concise comments in the SCSS file for the next guy that has to edit my code. What does work for me is making my changes in the IDE with that triggering the CSS compiler and, through Chrome Workspaces, having the browser reload the changes automatically. This auto-reload has been a game changer, due to placing emphasis on commenting my code I am not seeing how I am going to be having Chrome update my SCSS files any time soon. The functionality of my IDE is much better for that, it also has syntax checking so I also get all things sorted alphabetically and know if I have gone over the depth of three when it comes to specificity.