Inject CSS with chrome developer tool?

css google-chrome developer-tools
Dan Bolser picture Dan Bolser · Oct 18, 2013 · Viewed 43k times · Source

Where can I add CSS to the page I'm viewing? I don't want to add style to one element directly, I want to add a 'document' to a page to debug changes before editing the site's style.css.

Note, there are lots of questions here about 'injecting CSS from a chrome extension', but specifically I want to do it via the 'Chrome Developer Tools' thingy.

Answer

larssy1 picture larssy1 · Oct 18, 2013

I'm not sure if it works, but you'd have to try.

Pressing F12/ (Cmd + opt + I on Mac) to open up the Developer Console and go to the Console tab.

Copy paste the following code (edit the path):

$(document.head).append('<link rel="stylesheet" href="path_to_my_css">');

Alternatively, you could edit one property so the inspector-stylesheet.css is created by Chrome, and copy past your CSS source there.

Related questions

Chrome Developer Tools: How to find out what is overriding a CSS rule?

Well, this is pretty straightforward. If Chrome's Developer Tools is showing me that a style is overridden, how to see what CSS rule is overriding it? I want to know if is there anything like "Show me what overrides this". …

Read More
Is it possible to emulate orientation in a browser?

As the title is it possible to emulate orientation in google chrome or firefox? Meaning somehow change the browser to support media query (orientation = (landscape or portrait)) I have a emulator for mobile, but I would like to have the …

Read More
Is there CSS Grid highlighting in Chrome Developer Tools?

In the developer tools of Firefox, it is possible see the CSS grid, and also see when it is not selected. Is it possible to show a CSS Grid in the developer tools of Chrome, also when the grid is …

Read More