Js中调试小技巧tips(二)—断点调试

文章2019-05-05778 人已阅来源：网络

什么是断点调试？

断点，调试器的功能之一，可以让程序中断在需要的地方，从而方便其分析。也可以在一次调试中设置断点，下一次只需让程序自动运行到设置断点位置，便可在上次设置断点的位置中断下来，极大的方便了操作，同时节省了时间，在前端开发中，断点调试是一个必备技能之一。

如何操作断点调试？

1. 打开Chrome 开发者工具

在Chrome菜单中选择 更多工具 > 开发者工具。
在页面元素上右键点击，选择 “检查”。
使用快捷键 Ctrl+Shift+I (Windows) 或者 Cmd+Opt+I (Mac)。

2. Source面板

Sources面板是chrome developer tool中的断点调试面板。我们打开Sources面板后其实会在界面中看到如下内容，我们跟着逐一看看都是什么意思：

Js中调试小技巧tips(二)—断点调试

2.1.左上蓝色模块

网站文件目录树。

2.2.右上黄色模块

左侧所选文件的具体内容展示区

2.3.右下绿色模块

这一模块有俩个可切换区域：

scope：显示当前断点的作用域
watch ：点击+号可添加你所需要监控的变量或者表达式

2.4.左下红色模块

主要核心功能区

Call Stack：显示当前断点的环境调用栈
Breakpoints：当前js断点列表，添加的每个断点都会出现在此处，点击列表中断点就会定位到内容区的断点上
DOM Breakpoints：当前DOM断点列表列表
XHR Breakpoints：当前xhr断点列表，可点击右侧+添加断点
Event Listener Breakpoints：事件监听器断点设置处
Event Listeners：当前事件监听断点列表

3. 设置断点

断点调试的首要条件当然是添加断点，js断点添加的方式有俩种:

3.1.JS断点

Sources断点

Sources断点添加的流程是“F12(Ctrl + Shift + I)打开开发工具”——“点击Sources菜单”——“左侧树中找到相应文件”——“点击行号列”即完成在当前行添加/删除断点操作。当断点添加完毕后，刷新页面JS执行到断点位置停住，在Sources界面会看到当前作用域中所有变量和值，只需对每个值进行验证即可完成我们题设验证要求。

Js中调试小技巧tips(二)—断点调试