Inject CSS with chrome developer tool?

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

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)