Skip to content

Instantly share code, notes, and snippets.

  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save myrfy001/a5fc05ed3e54344ef095f98abcd957a6 to your computer and use it in GitHub Desktop.
Highlight DOM elements (include sub DOM) when mouse hover over it in Chrome or Firefox using DevTools

Paste the following code into the console panel of the DevTools window of Chrome or Firefox.

The style sheet came from (Web Scraper)[http://webscraper.io/] plugin for Chrome

It is useful for analyse a page layout and you can extend it to select preferred dom elements.

function addStyleString(str) {
    var node = document.createElement('style');
    node.innerHTML = str;
    document.body.appendChild(node);
}

addStyleString('.-sitemap-select-item-hover{outline:2px solid green!important}.-sitemap-select-item-hover,.-sitemap-select-item-hover *{background-color:rgba(0,213,0,.2)!important;background:rgba(0,213,0,.2)!important}.-sitemap-select-item-selected{outline:2px solid #c70000!important}.-sitemap-select-item-selected,.-sitemap-select-item-selected *{background-color:rgba(213,0,0,.2)!important;background:rgba(213,0,0,.2)!important}')

function mouseover(event) {
    event.target.classList.add('-sitemap-select-item-hover')
}
function mouseout(event) {
    event.target.classList.remove('-sitemap-select-item-hover')
}
document.addEventListener('mouseover', mouseover, { capture: true })
document.addEventListener('mouseout', mouseout, { capture: true })
@MurageKibicho
Copy link

You are doing the Lord's work!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment