Css – Inject CSS with chrome developer tool

cssdeveloper-toolsgoogle-chrome

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.

Best Answer

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.