关于页面的直接调试基本都在这个面板里面进行
点击1.可以选择节点，我们选择2.这个节点，然后就直接进入元素面板了
快速展开全部子节点的方式 ：按住alt再点击节点的展开符号
你可以通过这个方式选择页面中的任意节点来进行调试，也可以直接在右方的元素面板点击切换节点，在任意节点通过鼠标右键都可以激活更多的功能
在1.这个区域你可以直接编辑节点的属性，比编辑器更为直观和迅速；
在2.这个区域你可以进行拷贝这个节点的一些东西，比如js选择器，节点样式或者整个节点；
这在查看别人网站效果时非常有用
在3.这个区域你可以隐藏节点或者修改当前节点的状态，比如聚焦，鼠标移入等操作，同样的这个操作你可以在右方的styles面板直接切换
当你想知道页面中摸一个节点的变化是哪些JavaScript代码在操控它，可以使用 Break on 来监听页面
比如我想监听这个主题选择面板的切换与显示是谁在控制，我们点击这个红框的元素面板节点
然后右键可以加入监听
此时我们再次去点击切换这个主题面板的显示于隐藏，便会自动跳到JavaScript代码中
在4.这个区域是对我们操作的一个辅助，比如滑动到其他地方快速定位到当前选择的节点，或者关闭所有已展开的节点
点击5.可以将这个节点存储为一个全局变量，可以直接在console面板使用，这个在上面已经提到过
直接在浏览器中调试样式也是非常方便的，元素面板的右边部分就是样式面板
可以点击左边选择框来决定这个效果是否展示，还可以直接编辑里面的具体属性
带删除线的效果表示这个效果在这个浏览器不起作用
只要是有颜色的地方可以点击小方块进入可视化选择界面，支持取色和预定义颜色非常方便
可视化的方式去制作一个阴影是不是更加的直观和方便呢
点击Computed标签可以查看当前节点的各种样式数据，并可以通过小箭头直接前往这个效果的源代码位置
更多内容可以查看我的个人博客
浏览器调试的必知必会，零基础足够详细-第二节Elements元素面板
原文：https://www.cnblogs.com/lookroot/p/13645758.html