Inject CSS with chrome developer tool?

Question

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 1

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.

Answer 2

You can inject CSS using snippets in Chrome Devtools. Save and execute the snippet and then invoke it in the console or in another snippet:

function insertCss(code) {
  var style = document.createElement('style');
  style.type = 'text/css';

  if (style.styleSheet) {  // IE
    style.styleSheet.cssText = code;
  } else { // Other browsers
    style.innerHTML = code;
  }
  document.getElementsByTagName("head")[0].appendChild( style );
}

// run the snippet as follows:
insertCss('span { color: red !important; }');

Answer 3

Why not a kind of simple framework agnostic one-liner like this?

document.body.appendChild(function() {var el = document.createElement('link'); el.setAttribute('rel', 'stylesheet'); el.setAttribute('href', 'http://domain/print.css'); return el;}())

Seems to work like a charm...

Answer 4

Is this what you're after?: "How to Edit Source Files Directly in Chrome" http://www.sitepoint.com/edit-source-files-in-chrome/

Answer 5

This should work (paste into console, edit arguments in the last line as needed):

(function(i,n,j,e,c,t,css){
  css=i.createElement(n);t=i.getElementsByTagName(c)[0];css.href=j;css.rel=e;
  t.insertAdjacentElement('beforeend',css);})
(document,'link','//fonts.googleapis.com/css?family=Roboto','stylesheet','head');

This will insert a <link>

with an href //fonts.googleapis.com/css?family=Roboto

before the closing </head>

If there's no head tag in the document you're trying to add a css file to, try body as the last argument:

(document,'link','//fonts.googleapis.com/css?family=Roboto','stylesheet','body');

Answer 6

Go to the sources tab in dev tools and right click in the left column, then add folder to workspace and use file explorer to select the folder that contains your css file. You will have to allow to make changes, once you do this you will see your folder in the sources tree(MAKE SURE YOU SELECT FILESYSTEM TAB UNDER SOURCES TAB), open your folder find the file and right click on the your css file and select map to network resource. Once you map the file you can open and see it in the workspace and from that file any change made will affect the page styles. So basically your styles will over ride the served styles.