前端调试方案以及问题查找方案

随着浏览器的升级，现在调试应该是比较简单的。
对于前端开发者我们最熟悉的调试工具应该就是Chrome自带的Developer Tools
下边从我们的具体项目中总结出来一些调试的经验

调试已知结构的代码（自己写的代码）

样式问题

在Developer Tools中有一个elements选项卡，该选项卡中能看到当前的dom树，点击每个节点在右边的style选项卡中都能看到对应的样式。

简述一下这个页面的功能使用技巧
1. 鼠标移动到节点上时在页面上能快速看到该节点的宽度和高度

2. 右边styles选项卡中能看到该节点相关的样式
3. 点击样式右边的文件名称能直接打开改文件并定位到样式位置

4. 右边的样式可以直接修改和新增修改

5. 最下边有个盒模型，能直观看出该节点的盒模型

6. 右边的computed选项卡显示计算后最终样式

普通JS代码调试

在Developer Tools中有一个Sources选项卡，该选项卡中右侧为加载的资源列表，右边为功能栏，中间为资源视图。

简述一下这个页面的功能使用技巧
1. 添加断点
在行号处点击即可添加断点
2. 调试快捷键
打开调试开关情况下

F8：调到下一个断点
F10：逐过程调试
F11：逐语句调试
3. 监听变量
点击添加监视，输入变量，调试的时候可以实时的看到该变量的变化

4. 事件调用栈
当调试进入到断点时，我们可以在调用栈中看到从哪里跳到该方法的

5. 断点列表
在断点中我们可以控制使用哪些断点，禁用哪些断点。

JS语法错误

当我们在console中看到错误的时候，可以点击后边的文件名直接跳到错误未知，快速定位。
可以直接从错误信息中看出问题所在，点击文件跳转到文件中直接进行修改。

接口对接问题

接口问题一般发生在和后台对接的时候，主要问题在于地址不正确返回404，或者参数不正确，这时我们就需要用到Developer Tools中的Network看看请求的地址和参数时候正确，一般我们查看ajax请求的时候，将过滤选中XHR

假如我们对接https://pv.youkuaiyun.com/csdnbi此接口，我们可以点击左侧的该请求，从头信息中我们可以看到请求的地址为https://pv.youkuaiyun.com/csdnbi，参数为Request Payload中的对象，然后看看是否与后台接口对应。

常用快捷键

• 快速查找资源：Ctrl+o
• 快速定位到某行：Ctrl+o输入:+行号
• 快速在资源中查找某字符串：Ctrl+Shift+f
• 更多快捷键可在Settings–>Shortcuts或者访问https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/shortcuts

调试未知结构的代码（他人写的代码【坑】）

调试他人的代码十有八九都会带着不和谐情绪，因为不熟悉别人的代码，再加上没有统一规范的编码习惯，因此在找问题的时候很不爽。把大部分的时间都花到了找错误原因上。为节省时间，我总结以下几个方面来快速找到错误代码块。

通过网络请求找问题代码

假如测试给我们提出了一个bug，加载页面时返回的数据不对。

这时候我们不知道里边的逻辑，也不知道在哪段代码中发出的请求，这是我们只能从请求入手。

当鼠标放到网络请求列表的Initiator列上时，会弹出该请求的堆栈，从上往下找到非js库的文件，然后点击，进入到sources视图。这样能快速定位到发送该请求的代码块。

通过节点绑定寻找问题代码

假如测试给我们提出了一个bug，点击保存按钮时无响应。

由于内部代码不清楚，这时候我们需要通过dom节点的绑定事件入手，找到处理逻辑

• 首先在elements选项卡中找到该dom节点
• 在右侧对应的Event Listeners中找到对应的事件，然后看绑定的事件列表中找到绑定该事件的代码。
  

通过dom属性的变化找问题代码

假如测试给我们提出了一个bug，加载数据时显示遮罩层，数据还没有加载完遮罩层就自动关闭了。

对于这种没有浏览器事件触发的问题，我们可以通过dom属性的变化来找到处理代码的逻辑。

查找未知框架的方法

假如我们在使用某些框架，例如jquery、easyui这些框架，但是我们找不到对应版本的框架API这时就需要凭经验来进行有哪些方法的猜测。
可以借用console来打印某个对象下边方法。

例如我们不清楚jquery中有哪些方法，大概猜测出两个字母ea这时会联想出方法全名，如果需要看具体的函数体也可以直接打印出来。

结语

Developer Tools目前是我最常用的调试工具，工具的熟练程度在于常用。