StyleURL

Dev tools

css editing extension

SHOW HN2018

StyleURL

Edit CSS via Chrome Devtools and turn the diff into a gist

styleurl.app

#css editor#chrome devtools#css diff#stylesheet#gist

94points
22comments
#465of 2,155 in 2018
Top 22%of 2018 by points

How HN took it

MixedNo clear lean

7 positive, 5 neutral or asking, 0 mixed, 2 critical, out of 14 comments about the project. Thread score +0.30.

Idea: 4 for, 0 againstDocs: 0 for, 2 againstExecution: 1 for, 0 against

The thread, comment by comment

Each row is a top-level comment and its replies, in HN's order. Select a cell to open that comment on HN.

positive neutral or mixed critical about another commenter or something else the maker

What HN said

What people liked

  • Fills a long-wanted gap in the devtools workflow

    From 2 comments
    • I have to fanboy in here as well...this tool is exactly what I've been wanting for a long time. You've absolutely nailed the workflow for my use case. Thank you so much for…
      hellojason on HN
    • 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…
      nikkwong on HN
  • Diffs ignore whitespace and show only valid CSS changes

    From 2 comments
    • 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…
      Jarred on HN
    • This is amazing. I just tried editing a minified CSS, while the Chrome Dev Tools have a way to show the changes (https://umaar.com/dev-tips/137-changes-panel/) the result I get…
      flaviocopes on HN

Objections

  • Unclear how to use it; no visible place to enter CSS edits

    From 2 comments
    • I feel really stupid but I don't know how to use it. I clicked the button to open the toolbar in the footer but after that, I don't see where I am supposed to actually input my…
      wuliwong on HN
    • I think just a single line somewhere easy to see that tells the user that they edit in the console and can see the changes in your toolbar would suffice.
      wuliwong on HN
  • Requires installing a Chrome extension and copy-paste editing

    From 2 comments
    • I know you can have a workspace and edit local files via Chrome, but is there really no simple way to "close the loop" and sync the devtools changes to a local file? This…
      101km on HN
    • I bet it's possible to write a webpack plugin that takes CSS changes from StyleURL and saves them to disk It currently outputs CSS based on the filenames from the sourcemaps,…
      Jarred on HN

Requests

  • Port to Firefox

    From 2 comments
    • You could look into porting it to Firefox, since they use a similar API now it would hopefully not require much work. There was something called Firediff before but it hasn't…
      maturz on HN
    • Yes please.
      saintPirelli on HN
  • Sync changes directly to local files

    From 2 comments
    • I know you can have a workspace and edit local files via Chrome, but is there really no simple way to "close the loop" and sync the devtools changes to a local file? This…
      101km on HN
    • I bet it's possible to write a webpack plugin that takes CSS changes from StyleURL and saves them to disk It currently outputs CSS based on the filenames from the sourcemaps,…
      Jarred on HN
  • Source map support for SCSS/Sass

    From 1 comment
    • Suggestions: - add .map support for scss/sass?! - make this usable in gitlab?!
      otibsa on HN
  • GitLab support

    From 1 comment
    • Suggestions: - add .map support for scss/sass?! - make this usable in gitlab?!
      otibsa on HN

Questions

  • How to use the extension

    From 1 comment
    • I feel really stupid but I don't know how to use it. I clicked the button to open the toolbar in the footer but after that, I don't see where I am supposed to actually input my…
      wuliwong on HN

Alternatives named

  • Chrome DevTools Changes panel

    From 1 comment
    • > 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:…
      paulirish on HN
  • Chrome Workspaces for local file editing

    From 2 comments
    • 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)
      buremba on HN
    • 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…
      Theodores on HN
  • Firediff

    From 1 comment
    • You could look into porting it to Firefox, since they use a similar API now it would hopefully not require much work. There was something called Firediff before but it hasn't…
      maturz on HN

Category, keywords, summaries and labels on this page were made by AI (Thread Reader v2) and not checked by hand. Each point links to the comments it came from.

Add a badge to your READMEShown on HackerShow
[![Shown on HackerShow](https://hackershow.org/badge.svg)](https://hackershow.org/show/17662068)