举个例子：
1. 打开开发者工具
2. 查看 console 面板是否存在报错信息，例如

3. 如果有发现报错信息，就比较容易定位错误。如上图的错误，点击相应的错误信息，就可以自动跳转到 source 面板里相应的位置上。这时候就可以通过打断点的方式进行调试错误。

4. 如果没有出现报错信息，就需要进行一些分析，找到一个调试的切入点。例如某个界面，点击新增按钮之后有问题，那么问题可能就是出在新增按钮的方法上。找到新增按钮的元素，查看其绑定的方法。在 source 面板定位到该页面的 js 文件，搜索到定义此方法的位置，然后进行断点调试。

常用调试技巧：
1. 在开发者工具界面按 ctrl + p，打开文件搜索面板，可以搜索 js 等文件

2. 在开发者工具界面按 ctrl + shift + o，打开方法搜索面板，可以搜索当前 js文件中的方法定义。

1. 在开发者工具界面按 ctrl + g，快速跳转指定行
   
2. 断点调试过程中：
   跳过断点(F8)
   F10，执行当前断点的语句，前进一句
   F11，如果当前断点是一个方法，断点进入方法体
   shift + F11, 跳出当前执行的方法，返回上层调用语句处
   ctrl + F8，切换是否关闭断点调试
3. 调试过程中，鼠标移动到变量上，会显示变量的值
   
   如果变量是方法，会显示方法定义的位置，点击后可以进行跳转
   
4. 调试过程中，可以在console 面板进行变量的查看和修改等，此时 console 面板的上下文为当前断点所在位置的上下文
   
5. call stack 面板可以查看当前语句的调用栈，点击可以跳转到相应位置。然后输入条件
   

1. 获取当前页面的 scope：在 console 面板输入$(‘body’).scope()
   

2. 把 network 面板下的 disable cache 勾上，可以禁用浏览器缓存
   

3. Network 面板可以查看网络请求状况，点击其中一条，可以显示请求和响应的具体内容,如查看请求头，请求参数等。
   
   
   response 下可以查看响应的具体内容，preview 可以查看序列化后的数据，更加直观。