前端debug方法

事前端者，又名bug路由器。 bug定位第一责任人。

基础用法

1、页面跳转时，保留记录。

打开设置中的Perserve log

Network中也有一个Perserve log

2、筛选网络请求

直接输入，筛选出包含该名称等

// 过滤包含xxx的请求
-url:xxxxxx

domain: 仅显示来自指定域的资源。例如，*.nowcoder.com显示以 .nowcoder.com结尾的所有域名中的资源。 
method：显示通过指定的HTTP方法类型检索的资源。
status-code：仅显示其HTTP状态代码与指定代码匹配的资源。

3、格式化代码

编译后的代码单行显示，毫无可读性，难以调试，需要进行格式化。

点击左下角{ }后会出现格式化新文件 :formatted

4、查看代码所在文件路径

鼠标悬浮即可知道这段代码是哪个文件生效的

5、搜索文件

ctrl +p 搜索指定文档。可通过第4点查看路径，再搜索，当你两个网页同时对比调试的时候会用到。

6、定位代码

无论是项目代码中，还是debug sources代码中，还是console控制台中，都非常常用的快捷键，就是Ctrl + F / Ctrl + shift + F，搜索关键字。

定位一个功能未生效时，首先要定位你的代码是否在这个网页上。可通过sources搜索关键字。

断点调试

1、选项卡介绍

sources选项卡如图，左边蓝色行为当前断点位置，右边Breakpoints可查看所有断点，可点击勾选或取消，Call Stack查看js调用栈，可追溯执行路径。

左边代码区域，执行到断点位置时，可鼠标悬浮变量之上，即可看到当前变量的值，从而分析代码逻辑和运行路径。

在source左边可以看到全部文件，包括node modules

2、打断点的方法

打断点很简单，代码行号左边点一下就行，谁都会。打断点在合适的地方，准确的地方，你想打的地方，能帮你快速定位出问题的地方就有点讲法了。

1、代码里直接输入debugger

当你在sources选项卡下难以找到指定文件/位置的时候，这是最快最好用的方法。局限性是只能在本地开发的时候用。

2、console.log定位

先console.log打印控制台，再点击打印出的字符串的右边的文件，即跳转到source选项卡并定位到该文件报错/打印位置。

点击报错信息下面的调用栈也可以定位到调用代码的位置。

打断点到指定代码时候，可以直接在控制台打印输出，就是断点位置的变量。

看报错红色的控制台输出，可以展开看下面的调用栈，点进去，在右边的调用栈call stack，可以看到运行历史。

调用栈可以看到代码是从哪里运行的，一步一步，从哪个文件到哪个文件，再打断点

3、事件监听器定位

Elements选项卡下，选择dom元素后，再选择Event Listeners，即可查看该元素的事件和绑定事件代码的位置。

4、点击代码行号左边

通过代码中关键字Ctrl + F搜索代码位置，并打断点，这种方法有时不好找。

5、XHR请求断点

在XHR/fetch Breakpoints下，点击右边的+号，即可添加断点的url。一旦发起请求，就会断点在请求位置。但是一般请求的发起都是经过封装的，要定位到发起请求的业务代码的位置的话，可以通过调用栈callStack去追溯。

6、DOM断点

在标签上右键，选择Break on，可以选择子树修改、属性修改、节点移除三种断点方式。当js修改该dom节点时，就会断点在修改的位置。可以查看到哪些代码改变了dom。

此时，sources选项卡下DOM breakpoints会显示当前断点。

事件监听器断点

3、调试步骤

执行代码

step over 下一行、跳过函数

step into 下一行，进入函数

跳出最近的函数

屏蔽所有断点

一步步运行代码，并查看运行时变量，来分析运行情况。

打断点后，可以看到变量的值，一步步运行，进入或者跳过，查看代码运行轨迹，并且注意运行代码的文件是什么。

运行到断点位置时，可在控制台之间输入指令，console.log可直接打印当前断点位置的变量来查看。

可以直接在项目的nodemodules里面直接修改代码然后运行, 必须是修改直接引用到的代码，修改未打包前的代码无效。因为有些npm包会包含打包后的dist，和未打包前的代码。

接口报错定位

1、检查请求路径、方法、状态码

2、检测传参

3、请求路径没问题，传参没问题，结果有问题，请找后端。

发现请求问题时，copy as cURL发给后端定位问题