在没有浏览器开发工具的情况下检查 html 元素？

Question

当我打开（例如）Chrome 的开发者工具时，我可以通过点击一个元素来检查它（该工具也会为我突出显示）。它首先向我显示了它的 html 标记和类或 ID。 是否可以在我的网站上具有相同的功能，但不使用开发人员工具？

例子：

您选择一个网址，我的网站会在 iframe 中显示它。我的目标是在 iframe 中显示一个 html 元素的 class/id，只需点击它。

Answer 1

是的。您将需要使用 JavaScript。

类似这样的：

    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>

OP 请求了一个版本，其中外部网站通过 iframe 加载，然后利用“开发窗口”的功能在下面的 cmets 中，我解释了由于主机名不匹配而无法实现（CORS 安全问题） ，但如果在本地浏览器上禁用了这些设置，则可以这样做。

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>

Answer 2

这样的？

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>