Google-chrome – Changing CSS values with “Inspect Elements” in Google Chrome

google-chrome

I'm trying to figure out how to change CSS styles in Google inspector, I can tweak HTML, PHP code, but not stylesheets.

I'm on Debian, might it be a problem with the Google Chrome version?

I'm using Chrome version 5.0.375.127.

Best Answer

Editing a style live in Chrome / Chromium depends on the source of the style and what exactly you need to do with it (the level of editing).

Open the Developer Tools console, then expand the Styles drop-down. From here, there are a few changes you can make.

  1. Edit a style (or selector) directly by double-clicking it and making a change.
  2. Toggle styles on or off by hovering the cursor over a block of styles.
  3. Edit inline styles the same as with [1]

You can also view the source of a given style (eg CSS file, line of inline style in HTML, etc.) [4] and clicking it will bring you to the file in the resource view or line in the DOM inspector. Styles that are crossed out have been overridden, the final style can be viewed by looking at the Computed Style.

enter image description here

Related Question