JSでオブジェクトを検査する

Question

JavaScriptを使用して要素を検査する方法はFireBugまたはDevToolと同じですか？このような何か：

Answer 1

あなたは:afterのような擬似クラスから作成された擬似要素を検査を除いては、JavaScriptを使用していることをシミュレートすることができます。

要素のプロパティと計算されたスタイルのプロパティですべて利用可能な要素のtagName、id、classList、およびdimensionsが表示されます。

var tag = element.tagName.toLowerCase(); 
var id = element.id; 
var classes = element.classList.toString(); 
var width = window.getComputedStyle(element).width; 
var height = window.getComputedStyle(element).height; 

デモ、ない

document.addEventListener("mouseover", function(e) { 
 
    var element = e.target; 
 
    var tag = element.tagName.toLowerCase(); 
 
    var id = element.id ? "#"+element.id:""; 
 
    var classes = element.classList.toString().replace(/\s/, "."); 
 
    classes = classes ? "."+classes:""; 
 
    var width = window.getComputedStyle(element).width; 
 
    var height = window.getComputedStyle(element).height; 
 
    element.setAttribute("data-tooltip", `${tag}${id}${classes} ${width} x ${height}`); 
 
});

* { 
 
    position: relative; 
 
} 
 

 
*:not(body):not(html):hover:after { 
 
    content: attr(data-tooltip); 
 
    display: block; 
 
    position: absolute; 
 
    top: -20px; 
 
    left: 0px; 
 
    background: black; 
 
    color: white; 
 
    font-size: 10px; 
 
    padding:6px; 
 
    white-space: nowrap; 
 
}

<div class="class1 class2"> 
 
    This is some text 
 
    <table id="table" class="someclass"> 
 
    <tr> 
 
     <th>Column 1</th> 
 
     <th>Column 2</th> 
 
    </tr> 
 
    <tr> 
 
     <td id="cell1">Data 1</td> 
 
     <td>Data 2</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Data 3</td> 
 
     <td>Data 4</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Data 6</td> 
 
     <td>Data 5</td> 
 
    </tr> 
 
    </table> 
 
</div> 
 
<ul> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
    <li>Item 4</li> 
 
</ul>