Hacker News Reader

Comment by nikkwong | Hacker News Reader

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!

View on HN

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

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

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

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

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.

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

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.

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)

Reply on news.ycombinator.com