Feature Request: Goto Rendered CSS While Using Source Maps

18 views
Skip to first unread message

pedr....@gmail.com

unread,
Dec 9, 2014, 1:21:27 PM12/9/14
to google-chrome-...@googlegroups.com
When using source maps (with Sass) I can Cmd-click on a property to see the Sass line responsible for its generation, however I often find I would like to view the generated CSS for a line (particularly for looking at optimising Sass and looking at context). 

It would be great to have an alternative shortcut to click on a property and view the generated CSS for that property.

Paul Irish

unread,
Dec 9, 2014, 2:25:56 PM12/9/14
to google-chrome-...@googlegroups.com
Good idea. 

I think there might be room to explore exposing the mapping visually like http://sokra.github.io/source-map-visualization/

GWT did some research in this area before, basically allowing you to toggle between two views. (Their usecase was more breakpoint debugging.) Screenshot: https://lh3.googleusercontent.com/AciYsnhUjj5QujtVVPP75OF-7dWxgoISDk6_rZrUlZHeSujCsJe4p_FnuwL0TsPCZBXFP1q8oA=s640-h400-e365-rw

Our preprocessed CSS workflow could use some improvement. More concretely, we want to make sure you get the nice edit/iterate workflow with the styles pane even when your authored css is in Sass, Stylus, etc. 

We can definitely do this split-pane mapping view to indicate the relationship, but I'm also thinking there may be a more direct way. Something to think about: how would you like to iterate/tweak styles during development with sass and devtools? What would the style pane behavior be like?  Cmd-click is a fallback plan but I bet we can come up with a more immediate UX.

Cheers

On Tue Dec 09 2014 at 10:21:28 AM <pedr....@gmail.com> wrote:
When using source maps (with Sass) I can Cmd-click on a property to see the Sass line responsible for its generation, however I often find I would like to view the generated CSS for a line (particularly for looking at optimising Sass and looking at context). 

It would be great to have an alternative shortcut to click on a property and view the generated CSS for that property.

--
You received this message because you are subscribed to the Google Groups "Google Chrome Developer Tools" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-developer-tools+unsub...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/7bf49b22-b4ed-4035-b6b6-2e4e8d681648%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Lanny

unread,
Nov 26, 2015, 1:41:30 AM11/26/15
to Google Chrome Developer Tools
Sorry for the nearly-year-late bump but did this go anywhere? Definitely a feature I'd love to see, can't find mention of it anywhere so I don't know if it just fell by the way side or just isn't documented or is accepted and waiting for an implementation.
Reply all
Reply to author
Forward
0 new messages