在前端的工作学习中，我们有可能会遇到以下问题，比如图片无法加载、样式不正确、JS无法执行、无法调至手机页面、与后台对接出错等等问题，在排查和处理这些问题的方法就是使用浏览器的开发者工具。
source ——> ctrl + p
- 调试html、css一般在elements中进行，调试js一般在source中进行
- ctrl + p 可以快速点开所需的js文件（可模糊匹配）
设置断点开始调试
首先红色区域内从左到右依次为：
- Pause/Resume script execution: 暂停/恢复脚本执行（程序执行到下一断点停止）。
- Step over next function call：执行到下一步的函数调用（跳到下一行）
- Step into next function call：进入当前函数
- Step out of current function：跳出当前执行函数
- Deactive/Active all breakpoints：关闭/开启所有断点（不会取消）
- Pause on exceptions:异常情况自动断点设置
绿色区域：
- scope: 显示当前断点的作用域
- watch: 点击+号可添加你所需要监控的变量或者表达式
- Call Stack：显示当前断点的环境调用栈
- Breakpoints：当前js断点列表，添加的每个断点都会出现在此处，点击列表中断点就会定位到内容区的断点上
- DOM Breakpoints：当前DOM断点列表
- XHR Breakpoints：当前XHR断点列表，可点击右侧+添加断点
- Event Listener Breakpoints：事件监听器断点设置处
- Event Listeners：当前事件监听断点列表
其他注意点
- 在调试界面，我们把鼠标放在代码的每个变量上，他会显示这个变量的具体信息，当选中表达式以后，也会同样的显示表达式的值
- 快速跳转到某个断点的位置
右侧的Breakpoints会汇总你在JS文件所有打过的断点，点击跟checkbox同一行的会暂时取消这个断点，若点击checkbox下一行会直接跳转到该断点的位置 - 查看断点内部的作用范围
右侧的scope可以看到相当多使用的信息，比如this的指向，是否有值等 - 监听时间断点
右侧的Event Listener Breakpoints可以选择性的监听某类行为时间，比如键盘输入、拖拉等，勾选前面的checkbox就可以生效，当你触发别的行为的时候就会跳转到触发的JS - DOM及XHR监听跳转
DOM Breakpoints：是在elements页，感觉要监听某段dom的可能有的一些行为，但是又不具体知道确切位置就可以用了