Can You Add New CSS Properties in Chrome Inspector

Add a new CSS class in Chrome developer tool

On the Elements tab there's a styles tab which contains a small + button on the right side.

When you click here, you can add a whole new CSS class.

Once you've defined the new class, see Add a class to an element to learn how to apply it to an element. You could also just double-click the element in the DOM Tree on the Elements panel to add or edit the element's class attribute.

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

How do I add / insert a before or after pseudo element into Chrome's Inspector?

This is the easiest way and the way I do it:

1. Inspect the element you want to add the ::before or ::after to by right clicking it and going to "Inspect Element".

2. Now in the Developer Tools Console, click on the plus sign icon aka. "New Style Rule". See the image below, the plus sign is next to the "Toggle Element State" button.

   

3. Next, you will be able to edit the selector so add ::before / ::after to it:

   

4. Now edit the content to whatever you like, i.e.

Like so:

.grp-row::before {       
   content: '> '; 
}

That's all there is to it :)

How to get a summary of your CSS changes in Chrome dev tools?

You can see all changes via the Changes Drawer

In Dev Tools, you can locate the Changes Drawer via either:

• A) Open Command Palette (Ctrl + Shift + P) and type "changes"

  
  
  
  

• B) Open Drawer (Esc), click on the more options menu (triple dot), and select Changes

  

Further Reading

• How to get a summary of your CSS changes in Chrome dev tools?
• Export CSS changes from inspector (webkit, firebug, etc)

Updates

• Dev Tools 98 added More precise changes to automatically pretty prints changes
• Issue #1296143 opened User-Select: none in Changes drawer makes it very hard to utilize

View CSS added by via inspector in Google Chrome Developer Tools

Since at least Chrome 22, you can open the "inspector-stylesheet" source in the Sources panel. It contains all the rules you have added manually.

---

Related Topics