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

Answer 1

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

---

From that article:

Step 1: Launch Developer Tools. Go to View -> Developer -> Developer Tools. Navigate to "Sources"

Step 2: Click the Filesystem tab, then click + Add folder to workspace. You’ll be prompted to locate your work folder and Chrome will ask you to confirm that you Allow access.

Step 3: Edit and Save Your Code and refresh the browser to see your changes

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; }');