利用DevTools Elements工具来调试页面DOM
Elements工具是Chrome DevTools界面的第一个标签，如今很多网页都通过JavaScript来动态的修改DOM以及CSS，传统的查看HTML和CSS源代码来调试页面，无法看到那些动态的内容，一遍一遍的刷新页面查看修改HTML和CSS的效果对于开发来说效率也很低下。Elements工具就是一个可以帮助我们实时的查看和编辑DOM树以及CSS样式的工具。
打开DevTools切换到Elements标签就可以看到Elements工具，左半边视图是当前页面的HTML代码，右半边视图是当前选中的DOM的CSS样式，显示的内容是当前Web页面实时的，通过JavaScript对页面的修改都会即时的反映在Elements工具中。为了更好的利用屏幕空间，可以拖动左右两块视图区域调节大小，以及通过点击三角形小图标收缩一些暂时不需要的内容。
我们会发现在Elements工具左边的DOM视图中看到的HTML代码和原始的网页源代码的内容是有点不一样的，有很多原因：
可能是页面上引用的JavaScript代码修改了DOM树，像jQuery等JavaScript库提供了大量的修改DOM树的方法，例如append()、remove()、html()等。这些JavaScript代码来改变的DOM，在源代码中是看不到的。浏览器会纠正一些HTML书写的错误。很多人在写HTML代码的时候，会漏掉<html><head><body>这些标签，但是从调试中可以看到浏览器在解析的时候自动地帮我们加上了<html><head><body>这几个标签。
也就是说，我们从Elements工具中看到的HTML代码是当前浏览器所实际解析的。在遇到一些bug需要调试页面HTML代码的时候，通过Elements工具查看，能够让我们以浏览器的角度来看HTML代码，比直接阅读源代码要更直接有效。
曾经在做一个项目的时候，需要对整个网站的样式进行重新设计，通过修改CSS然后在原有的标签上加上class属性来做的，当页面运行的时候，发现有些页面上的元素的显示效果不正常，看源代码class属性已经被加上了似乎没有问题，一打开Elements工具，很快就发现了问题的所在：HTML中每个标签的class属性只能被定义一次，多次定义的class不会被浏览器所解析。如图，第一个class=class1在被浏览器成功的解析了，而class=class2则直接被浏览器所忽略了。
类似的事情还有很多，例如不小心在HTML标签中加入了全角空格导致部分属性没有被解析（大家应该都被输入法坑过）等等，这些问题，可能我们光看源代码的话，很难发现问题出在哪里。而在DevTools的Elements工具下面，那些我们看代码百思不得其解的诡异bug一下子就现了原形。
选中HTML元素
在Elements工具中定位到我们需要查看的HTML元素，有几种方法：
通过键盘的上下左右按钮，可以快速的选中、折叠和展开HTML节点。在Elements工具的底部，会显示当前查看HTML元素的层级，可以点击上面的元素快速切换层级。
被选中的HTML元素，在页面上会高亮显示并有一个浮动的tooltip跟随。当被选中的HTML元素不在当前显示的范围内时候，会通过tooltip提示使用者当前HTML元素不在显示范围内，此时可以右键Elements工具内被选中的节点，选择「Scroll into view」来让被选中的HTML元素显示出来。
编辑HTML节点和属性
可以通过双击HTML节点对其进行修改，会根据双击的位置自动选中相应的标签、属性名或属性值。也可以通过右键菜单里的功能进行属性的增加和修改，还可以选择「Edit as HTML」对整个选中的节点进行修改。
在修改的过程中，按下ESC可以放弃当前的修改内容，在空白地方单击鼠标左键，可以让当前的修改在页面中实时生效。
我们也可以通过拖动HTML节点来调整元素在页面中的位置。
选中节点按下键盘上的Delete按钮，则会删除当前HTML节点，也可以在右键菜单中通过「Delete Node」完成这一操作，Ctrl+Z（MAC下面Cmd+Z）可以撤销删除操作。
需要特别注意的是，刚才提到的所有的HTML修改，都是临时的，不会影响到任何源代码文件，一旦刷新页面，所有的修改都会被还原。当我们通过Elements工具调试好页面HTML代码后，需要手动的去修改源代码文件以保存修改。
强制设置元素状态
在网页开发中，我们经常使用hover或者visited等状态来实现一些效果，例如鼠标悬停的导航菜单，，我们在Elements工具中，可以右键HTML节点来强制设置元素的状态。例如将某个悬停导航强制设置成hover状态来让悬停显示的菜单一直显示以方便我们调试。
设置DOM断点
DOM断点和Sources工具下面的JavaScript代码断点类似，用来在特定条件下暂停JavaScript的执行。JavaScript代码断点关联在JavaScript文件的某一行，当执行到这行代码的时候就触发断点暂停余下的代码执行。DOM断点关联在某个DOM元素，当该DOM元素被修改时触发。
的这一半更多地赢取上帝掌握的那一半。
