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

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="styleshet" 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.