Chrome调试工具使用常用面板Elements（元素面板）Console（控制台面板）Sources（资源面板）NetWork（网络面板）1.Elements面板定义：通过Elements面板，不是只能查看和编辑页面和样式，并且更改会立即生效。操作DOM查看DOM树：打开Element面板，可以查看所有DOM节点，包括CSS和JavaScript，一般在左边查看DOM树，在右边查看CSS样式。DOM节点选择：将鼠标移到网页中的某个元素上，可以选择该DOM节点进行DOM节点的增删改查：在元素面板中，选中DOM节点，在文本上单击鼠标右键，并且会弹出一个菜单，为节点添加属性，查看盒模型查看CSS样式，比如改变CSS属性，动态变化技巧：关于CSS样式的属性值，如果是数字属性值，可以按上下方向快捷键为属性值加一，通过按住shift键同时按上下方向快捷键使属性值加十。Element译为“元素”。Element面板让我们可以动态查看和编辑DOM节点和CSS样式表，并且会立即生效，避免了编辑器和编辑器频繁切换浏览的麻烦。我们可以使用Element面板来查看源代码。它不仅可以很好地格式化DOM节点，还可以清晰地显示HTML文档。比在当前网页上点击鼠标右键，选择“查看网页源代码”要强大的多。总之，Element面板可以让我们对DOM和CSS的底层结构有一个透彻的了解。我遇到的问题是在查看一些伪类的属性时，比如:hover，看不到具体的样式。查阅了一些资料，是通过鼠标Hover悬停在元素上，然后右键查看，或者在面板上选择:hover。2.控制台面板定义：使用ConsoleAPI向控制台输出信息，生成JavaScript文件并启动调试会话用途：console.log(messgae)，用于调试JS，查看错误等。直接运行JS代码遇到的问题console.log(),console.info(),console.error(),console.warn()需要区分。最好使用过滤工具来过滤一些无用的信息。3、网络面板查看HTTP请求、查看cookie、AJAX请求等信息，例如给按钮绑定点击事件，可以通过网络面板查看请求是否发送成功以及收到的信息。4.Sources面板用途：可用于设置断点、调试JS调试步骤、断点、单步执行、监听变化。可以查看作用域、变量、回调等的变化，也可以监听事件的变化。设置断点选中具体要设置断点的js行，点击行号，设置断点，再次点击取消设置的断点。1.CallStack：当遇到断点时，CallStack会显示当前断点所在的方法调用栈。调用堆栈中的每一层称为一个帧。单击任意帧可跳转到该帧。呼叫点。按框上的键选择重启框重新执行该功能。具有变量修改、代码编辑等功能，可以在当前帧中反复调试。2.ScopeVariables：这里可以查看此时局部变量和全局变量的值。3.断点列表（Breakpoints）：你设置的所有断点都会在这里列出，点击可以跳转到相应的断点位置。遇到的问题单步执行和进入函数执行有区别
