【项目后总结】快速定位问题

没bug是不可能的，这辈子都不可能没bug的"

我们要做的是，

1.尽量减少bug，避免问题重复出现，

2.遇到问题，快速修复。

3.千万不要害怕bug，更不要担心

快速定位Bug代码，更不要担心出bug从而不敢写bug

由于带我的leader很厉害，往往不自觉地会对自己的要求也会相应的提高。我觉得这是好事。

最后：

1.遇到问题不要慌，尽量复现问题。

2.接口报错，看报的什么错，看是前端的问题还是后端问题

3.快速定位代码位置。（我一般采用全局搜索，后来发现这样真的不太聪明的样子~）

4.对于不明白的错误，建议开始学会使用debugger，所以的错误都是有原因的，都是可以找到的，使用console. 有的时候看起来不太聪明的样子

5.对于一些错误的经验可以记录下来。毕竟好记性不如烂笔头

一、Chrome开发者工具之断点调试

1.JavaScript脚本断点调试

第一步：打开开发者工具，按F12或者在浏览器页面上右键选择检查。

第二步：在Source面板中找到需要调试的文件。

第三步：设置断点。

第四步：触发调试部分程序的运行，开始调试。

调试过程中常用的按钮及快捷键：

1. 跳到下一个断点：点击Sources面板右侧的“三角按钮” 使用 快捷键：F8 或者  Ctrl+\
2. 跳到下一步（逐步跨方法）：点击Sources面板右侧的第二个按钮 使用  快捷键：F10  或者 Ctrl+’
3. 跳进断点处的方法中：点击Sources面板右侧第三个按钮 使用快捷键：F11  或者 Ctrl+;
4. 跳出正在执行的方法：点击Sources面板右侧第四个按钮   使用快捷键：Shift+F11 或者Ctrl+Shift+;
5. 禁用断点：点击Sources面板右侧的第五个按钮
6. 暂停在捕获到的异常处：点击Sources面板右侧的第六个按钮，然后勾选PauseOn Caught Exception
7. 暂停在未捕获的异常处：点击Sources右侧的第六个按钮，不勾选PauseOn Caught Exception.

Sources面板调试过程中快捷键预览：

1. 查看断点处，获取的数据的值：
2. 将鼠标光标停留在变量上面即可，也可以将变量赋值到Console的控制台上打印出来。

清除断点：

在Source面板最右侧面板中，找到Breakpoints打开，可以看到你打的断点。在断点列表出右键选择Remove all breakpoints可以一次性删除所有断点。

XHR断点调试

右侧调试区有一个 XHR Breakpoints，点击+ 并输入 URL 包含的字符串即可监听该 URL 的 Ajax 请求，输入内容就相当于 URL 的过滤器。如果什么都不填，那么就监听所有 XHR 请求。一旦 XHR 调用触发时就会在 request.send() 的地方中断。

 

事件监听断点

事件监听是对我们选定的是事件类型进行监听，当这个事件触发的时候，程序就会在这个事件处停止。有助于我们快速找到某一个元素上绑定的事件。