-1

Please note: I found this question as well as this one, but both of their answers involve writing and executing customized JS. My question here is about how to wield Chrome Dev Tools (or similar) to accomplish the same thing in real-time.

I have a quasi-legacy JVM app that serves (and creates as part of its build pipeline) all sorts of nasty and messy CSS files.

I'm wondering if Chrome Dev Tools (or any other modern OSS webdev tool for that matter) has a "reverse engineering" feature in it that allows you to click on an HTML element and get a list of all the CSS rules that apply to it. And, not only that, but which rules are overriding other rules.

This way, when I need to tweak my CSS, it's less of a wild goose chase to figure out which rules are coming from which CSS files and that are actually being applied to the live element at runtime.

Any ideas?

Community
  • 1
  • 1
smeeb
  • 27,777
  • 57
  • 250
  • 447

2 Answers2

2

Yes, in Chrome DevTools (F12 in Windows / Option+Cmd+I in OSX) within the Elements panel you can click on an element and see the applied CSS rules on the right-hand side. The overridden styles or classes are crossed out, and you can see the file name in which the CSS rule comes from. See below:

CSS Rules

element.style refers to inline styles. For example, if I modified the selected element to be <div class="container" style="background-color:#000">...</div>, background-color:#000 will show up in the that section.

#content refers to the div element with the associated id of 'content'. The checkboxes that are checked on the right indicate that they have been applied with no overriding. You can check and uncheck these to play around with the styles so that you can see what you should change in your source code.

The html, body, div, span etc. allows multiple selectors to use the same styles. All the selectors in that comma-separated list will have the styles, except some may be overridden by other CSS rules - in this case, margin and padding are overridden by the more specific #content selector.

The next block is for user agent styles. These are styles that are applied by the browser, and each browser may apply different ones. This can be a problem if you have more specific rules defined yourself. Many people use normalizers to make sure things remain consistent among browsers. Check out Normalize

The inherited section shows all the styles that are inherited from parent styles. In this example, the text-align: left style was applied from the .container class as that is the parent element and the #content element didn't override it explicitly.

Update

  • Added better quality screenshot (thanks to @SLaks)
  • Added keyboard shortcuts for access (thanks to @NKD)
  • Added simple explanations of the sections of the Styles panel on the right.
Gideon Pyzer
  • 22,610
  • 7
  • 62
  • 68
  • You should turn on anti-aliasing. – SLaks May 17 '16 at 15:58
  • I just wanted to add to the answer that the Chrome DevTools is accessible by hitting F12, in case you (@johnniebenson) are new to using the tool. – NKD May 17 '16 at 16:00
  • Awesome answer, thanks @Gideon (+1). So in your screenshot, on the right, I see (essentially) 6 sections of information that all seem to correspond to the highlighted `
    ` on the left: (1) `element.style { ... }`, (2) `#content { ... }`, (3) `html, body, div, ...`, (4) `div { display: block; }`, (5) `.container { ... }` and (6) another `html, body, div, ...` section. Any chance you could give me the highlight reel as to what each of these sections represents and how they relate to the highlighted `
    `? Thanks again so much!     – smeeb May 17 '16 at 16:04
  • @Smeeb I have added some information about those sections to my answer based on what I know. – Gideon Pyzer May 17 '16 at 16:32
0

Modern browsers have an "inspector" option that allow you to select a piece of generated HTML and view the CSS applied to it. Each one varies slightly, but normally hitting F12 will get you going.

johnniebenson
  • 540
  • 3
  • 9