浏览器调试动态元素

当我们在控制台调试一些动态样式的话，会特别麻烦。

针对于这种情况，我们可以选中对应的元素，右键，打断点于（Break on），这时可以看到三个子选项：子树修改时（subtree modifications），属性修改时（attributions modifications）以及节点删除时（node removal），选中对应的选项。当我们点击动态元素的时候就会被断点。

实例

如下一个例子中，当我们点击输入框的时候，下方的方框就会显示，当输入框失焦的时候，下方的方框消失不见。我们可以通过选中方框元素，然后 Break on -> attributions modifications，然后点击输入框。此时可以看到效果。

代码如下：

<input id="input" type="text" />
<div id="card"></div>

#card {
  width: 120px;
  height: 120px;
  background: #ffe411;
  display: none;
}

const input = document.getElementById('input');
const card = document.getElementById('card');
input.onfocus = function () {
  card.style.display = 'block';
};
input.onblur = function () {
  card.style.display = 'none';
};