【浏览器编程】浏览器F12调试工具面板详解和JavaScript添加断点

1.控制台面板介绍

• 按F12 键启动浏览器中的调试器
  
  请注意与右键“检查源代码”的区别：
  
• 浏览器调试器（控制台）面板详解：
  
• Part-1：原始网页。可以左右调整调试器面板，甚至充满整个屏幕，但是原始网页的作用在于，分析Part-2的Element属性时可以查看选中状态。
• Part-2：调试器导航栏（Navigation）。
  • Element：选中后，与Part-1、Part-3结合定位鼠标选中的元素
  • console（控制台）：JavaScript（JS）输出结果窗口，例如使用如下语句输出"wangSH".

<script>
var a = "wang";
var b = "SH";
console.log(a+B)
</script>

• Source是JavaScript源码区域，左边为文件夹导航栏右边为源码区。注：没有HTML和CSS（不调试）。

• Part-3：HTML的元素查看区域
• Part-4：会随着Part-3选中元素的不同而发生变化，格式是“标签+类名”（Tag+class）
• Part-5：从左至右分别是CSS,计算机属性，事件监听，DOM断点和属性
• Part-6：控制台输出，见Part-2的图2。

2.为JavaScript添加断点

掌握控制台面板的布局后，有助于理解“如何添加断点”。

1. 点开导航栏Source选项
2. 选中需要调试的文件
3. 在图中红框区域添加断点

可以使用快捷键进行操作，常用的快捷键如下：

• 重新加载网页激活断点。
• F9：添加/移除 断点。
• F10：逐过程，即跳过该语句中的方法、表达式等。
• F11：逐语句调试，即单步调试，会跳入方法、表达式，进行逐语句的跟踪调试。