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.
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.
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.
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.
Just right click on the parent element, change to 'Edit as HTML' and then add whatever elements you want...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With