5 ms·

Oh my god, I've been waiting and looking for something like this for forever. It's a total pain in the arse to change dozens or hundreds of styles on a page in

Oh my god, I've been waiting and looking for something like this for forever. It's a total pain in the arse to change dozens or hundreds of styles on a page in devtools and have to keep a mental model of what's been changed to then manually save each of the changes to disk. It's incredibly painstaking, since devtools doesn't keep a log of all your changes, the closest thing is the inspector-stylesheet, which doesn't work if you're editing an existing stylesheet. This will make my life so much easier! Thank you so much!

buremba 8y ago
Actually, you can apply the changes to local files using Chrome's in place editor when you map your local workspace in Devtools. (See the sidebar in Sources tab)
paulirish 8y ago
> 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.
have_faith 8y ago
> dozens or hundreds of styles on a page in devtools I've never made more than a couple changes at a time in devtools (I'm a front-end dev). Do you write the majority of your css in the browser first before adding it to a css/sass file? I tend to do the opposite, write the bulk of it in an editor and tweak a little in the browser as needed. Just curious of the process.
- megaman22 8y ago
  People do do this... I'm astounded sometimes at the workflows I see, but I've worked with people that wrote all their HTML in dev tools and copied it back to their editor, and wrote huge chunks of JS in the console. The latter tends to not work well, because everything is constantly dirty and state is corrupted.

buremba 8y ago

Actually, you can apply the changes to local files using Chrome's in place editor when you map your local workspace in Devtools. (See the sidebar in Sources tab)

paulirish 8y ago

> 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.

have_faith 8y ago

> dozens or hundreds of styles on a page in devtools I've never made more than a couple changes at a time in devtools (I'm a front-end dev). Do you write the majority of your css in the browser first before adding it to a css/sass file? I tend to do the opposite, write the bulk of it in an editor and tweak a little in the browser as needed. Just curious of the process.

megaman22 8y ago
People do do this... I'm astounded sometimes at the workflows I see, but I've worked with people that wrote all their HTML in dev tools and copied it back to their editor, and wrote huge chunks of JS in the console. The latter tends to not work well, because everything is constantly dirty and state is corrupted.