Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I create an element in the Chrome Dev Tools?

I would like to add a new element to the page in Chrome Dev tools. This seems like fairly obvious functionality but I can't seem to find it.

Does Chrome allow me to create elements in the DOM tab? I realize I could make something from the JS console, but would rather something on the DOM tab.

like image 568
mikemaccana Avatar asked Oct 26 '12 16:10

mikemaccana


People also ask

How do I add elements to Chrome?

Right-click an element in the inspector, and select "Edit as HTML". You can then add whatever HTML you want inside of it. Warning: this will destroy the element with all its descendants, and will then recreate them once you're done editing the HTML.

What is element in Devtools?

Getting to Know the Elements Panel in Chrome. Inspect Element is a feature of Chrome Developer Tools that allows you to inspect and modify a page's frontend web elements. With this tool, it's possible to change the appearance and content of a web page by editing its CSS and HTML files.

How do I add a pseudo element to Chrome dev tools?

You can use the plus sign, then while the class or element is highlighted, add the pseudo element by editing the class or element name. Hitting the right arrow key will put you at the end.


1 Answers

Just right click on the parent element, change to 'Edit as HTML' and then add whatever elements you want...

like image 60
alimac83 Avatar answered Oct 11 '22 01:10

alimac83