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.

Solution 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 +.

Solution 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.

Solution 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.

Solution 4

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...

Solution 5

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.

View more solutions

Comments

[Dan Bolser]

That only seems to allow me to edit js files... can I use that to edit CSS too?

[NaturalBornCamper]

CSS works alright for me, not sure if your comment is obsolete or Chrome changed

[Zachary Weixelbaum]

You shouldn't give links as the entire answer because what if that page no longer exists. Please type out an entire response and on the bottom you can say that it comes from sitepoint

[Shayan]

The article is great but as ZacharyWeixelbaum explained I had to downvote. If OP edits their answer I'll upvote.

[Us3rAIpha8rav0]

this is perfect.. and so easy!

[Paesano2000]

Thanks for providing a vanilla JavaScript way to do this.

[Paesano2000]

In your example "stylesheet" is misspelled as rel="styleshet".

[Manngo]

@Paesano2000 Well spotted. Thanks. It works even better if you spell it right :)

[Drewdavid]

I tried creating a snippet - it works when I type cmd+enter, but when I refresh the page the effect is gone. Any idea why? Thanks!

[Harry]

@Drewdavid I think this the expected behavior, but if you want to run the CSS or JS automatically every time you visit the page, you can use some extension, for example: Stylus

[Drewdavid]

Hm thanks Stylus. I haven't run across this anywhere. I guess I thought that the point of these snippets was to persist across sessions without needing to create a full-blown extension!

[Drewdavid]

Hi Michael, can snippets be configured to run automatically when visiting a specific web page, or do they need to be manually run each time? There is a web page that I regularly visit and would like to automatically be altered just for me each time I visit it.

[Michael]

There are currently chrome extensions that can run scripts on any page automatically. Check out Custom JavaScript for Websites 2, TamperMonkey. Or there are cool extensions like Stylish that let you pick and choose themes, styles from a community of creators. chrome.google.com/webstore/detail/stylish-custom-themes-for/‌​…

[Drewdavid]

Thanks I will look into these.