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

There are multiple ways to do that, and they are also very easy.

---

First way, inspector-stylesheet:

Open Inspect Element (F12 Or Ctrl+ Shift+I)

Go to Elements tab (Ctrl+ Shift+ P and type show elements), if you are not already there, see the Styles tab, now see on right corner, there would be a + icon, click it (or long press that icon if it doesn't automatically add inspector-stylesheet), it will add selector of currently highlighted element, just next to the selector, there will a link/button inspector-stylesheet, click it, it will take you a window, where you can add styles.

---

Second way, Edit as HTML

Open Inspect Element (F12 Or Ctrl+ Shift+I)

Go to element panel (Ctrl+ Shift+ p and type show element panel).

Scroll to the head element right click on the element and choose Edit as HTML, go to the bottom of that element (Ctrl+ End), add your <style></style> element there add your style in that element, and hit Ctrl+ Enter.

---

Third way, Snippet:

Open Inspect Element (F12 Or Ctrl+ Shift+I)

Go to the Source tab, go to the Snippets tab, click on the + New snippet, name it whatever you want, and add this:

Create new snippet Ctrl+ Shift+ P type Create new snippet hit Enter , rename the snippet if you want to, and add this (edit the style) :

(function(){
    let style = `<style>
/*change your style here*/
body{
        display:none;
    }
</style>`;

document.head.insertAdjacentHTML("beforeend", style);
})();

Save it, run it (Ctrl+Enter).

You can also run the snippets by doing this: Ctrl+ p type ! it will show your saved snippets, choose the one you want to run.

To edit or see your snippets, Ctrl+ Shift+ P type show snippets.

---

In FireFox it's even easier:

Open Inspect Element (F12)

Go to Style Editor, click the + icon and you will be able to edit the style; You can also, import styles, just by clicking the icon next to the +.

Answer 2

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 3

To begin with, this is one reason why I use Firefox for teaching and my own development work. The answer is built in.

As a variation to the above answers, using modern JavaScript, you can add a hard-coded style as follows:

document.head.insertAdjacentHTML('beforeend','<style> … </style>');

or you can add an external style sheet as follows:

document.head.insertAdjacentHTML('beforeend','<link rel="stylesheet" href="…">');

The beforeend argument is to help the injected CSS to override previously loaded styles.

If you’re going to do this repeatedly, you can then add it as a bookmarklet, using something like Bookmarklet Crunchinator.

The technique is similar to one I teach in a JavaScript class, where I use afterbegin to inject some default CSS, but allow user style sheets to override the defaults.

Answer 4

Since 2018 in Chrome (65) the browser's integrated DevTools has a feature called Local Overrides 1. As such, there is no need for an add-on or extension like StyleBot, Stylish or Greasemonkey.

Local Overrides allow rewrites of CSS, JS and DOM on any live site. Changes are saved in a local folder and they override the contents of the live environment.

This can be accessed under Developer Tools > Sources >> Overrides

This allows you to select a custom local folder that will contain CSS and JS that will override the current website's own CSS and JS.

Answer 5

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 6

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 7

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 8

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.

Answer 9

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