CODEWITHSUNDEEP
javascriptjqueryhtmliframe
K.Gabor
K.Gabor

Reputation: 99

Inspect html element without browser developer tool?

When I open (for example) Chrome's developer tool I can inspect an element by clicking on it (and the tool highlights that for me as well). It shows me it's html tag and the class or ID in the first place. Is it possible to have the same funcionality on my website, but without using a developer tool?

Example:

you pick an url, and my website shows it in an iframe. My goal is to get a html element's class/id shown in the iframe, just by clicking on it.

Upvotes: 1

Views: 1573

Answers (2)

scramlo
scramlo

Reputation: 105

Yes. You would need to use JavaScript.

Something like this:

    var h1s = document.getElementsByTagName("h1");
    var ps = document.getElementsByTagName('p');
    var imgs = document.getElementsByTagName('img');

    var developerWindow = document.getElementById("developer-window");

    function setUpListeners(tagCollection) {
      for (var i=0;i<tagCollection.length;i++) {
        tagCollection[i].addEventListener("pointerover", function() {
          this.style.padding = "1rem";
          this.style.backgroundColor = "yellow";
          developerWindow.innerHTML = this + " id: " + this.id;
        });

        tagCollection[i].addEventListener("pointerleave", function() {
          this.style.padding = "initial";
          this.style.backgroundColor = "initial";
          developerWindow.innerHTML = "";
        });
      }
    }

    setUpListeners(h1s);
    setUpListeners(ps);
    setUpListeners(imgs);
body {
  margin-bottom: 20%;
}

#developer-window {
  border: 2px solid black;
  border-bottom: none;
  background-color: white;
  height: 20%;
  position: fixed;
  bottom: 0;
  width:98vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
<h1 id="main-heading">My website</h1>
<p id="first-paragraph">My first paragraph</p>
<img id="featured-image" src="https://placehold.it/250x250">
<div id="developer-window"></div>

The OP requested a version of this where an external website is loaded via iframe and then utilizes the functionality of the "dev window" In the comments below I explained how this is not possible due to unmatched host names (CORS security issue), but if these settings were disabled on a local browser, here is how it might be done.

function startDevTools() {
 var iframe = document.getElementById("website-iframe");
    var website = iframe.contentDocument;
console.log(website);
    var h1s = website.getElementsByTagName("h1");
    var ps = website.getElementsByTagName('p');
    var imgs = website.getElementsByTagName('img');

    var developerWindow = document.getElementById("developer-window");

    function setUpListeners(tagCollection) {
      for (var i=0;i<tagCollection.length;i++) {
        tagCollection[i].addEventListener("pointerover", function() {
          this.style.padding = "1rem";
          this.style.backgroundColor = "yellow";
          developerWindow.innerHTML = this + " id: " + this.id;
        });

        tagCollection[i].addEventListener("pointerleave", function() {
          this.style.padding = "initial";
          this.style.backgroundColor = "initial";
          developerWindow.innerHTML = "";
        });
      }
    }

    setUpListeners(h1s);
    setUpListeners(ps);
    setUpListeners(imgs); 
}
body {
  background-color: #eee;
}
iframe {
  border: 5px dashed #ccc;
  width:90vw;
  height: 100vh;
  margin: 2rem;
  margin-bottom:20%;
}
#developer-window {
  border: 2px solid black;
  border-bottom: none;
  height: 20%;
  position: fixed;
  bottom: 0;
  width:98vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
}
<iframe id="website-iframe" src="http://nerdspecs.com" frameborder="0" onload="startDevTools()"></iframe>
<aside id="developer-window"></aside>

Upvotes: 1

Tom O.
Tom O.

Reputation: 5941

Something like this?

https://jsfiddle.net/tommy_o/8sx0d693/6/

<div id="myCoolDiv">
    <p class="myCoolClass">This text will get replaced with the name of the div!</p>
</div>

<script type="text/javascript">    
    function showElementId(element) {
        element.innerHTML = element.id;
    }

    showElementId(document.getElementById("myCoolDiv"));
</script>

Upvotes: 0

Related Questions