idea debug到一半停止_前端 Debug 技巧，提升 Debug 能力

本文简单介绍了，前端 Debug 技巧，并使用 chrome 浏览器进行演示讲解。

工具栏说明

打开 chrome 浏览器，按 F12 打开 DevTools，界面如图所示。

主要含有如下几个部分：

•Elements：页面元素•Console：控制台•Sources：源代码•Network：网络请求

Elements 界面

Elements 界面即，按 F12 默认显示界面，各部分功能如下。

1. 元素选择器，点击或按 ctrl + shift + c。2. 切换设备效果，点击或按 ctrl + shift + m。

1. 元素选择器

启动后，可通过鼠标点击对应元素，并显示元素样式，找到对应代码。也可以通过下方代码，找到对应页面元素；同时我们可以点击右侧 style，勾选对应 css 调试样式效果。

2. 切换设备效果

启动后，我们可以选择页面显示的尺寸效果，用于调试页面对不同设备的适配效果。此外还能点击旋转，显示设备横屏时的效果。

3. 切换 DevTools 位置

通常默认内嵌到浏览器中，通过该选项我们可以调整 DevTools 窗口所在位置。

4. Styles 样式调试

可以动态的调试 css 样式，不需要重启项目。

5. Computed 盒子模型

调试元素之间的位置间距关系，并且可以直接调试到对应样式。

6. Event Listeners 事件监听

页面所有监听事件，点击可跳转到对应代码。

7. DOM Breakpoint 断点

所有 Dom 断点管理。

8. Properties 属性

属性以及拥有的方法。

Console 界面

如图 console 界面，显示前端 js 代码的不同级别的日志信息，可以直接输入页面上定义的变量名称，查看变量信息。不需要使用 console.log() 打印变量值。

Sources 界面

如图 sources 界面，主要分成 3 个部分，左边的文件区，中间的代码区，右边的调试区。

文件区：选择需要调试的文件。

代码区：点击下方 {}，可以对乱序的代码进行格式化，并在所需的地方上设置断点，进行调试。

调试区上方：类似 IDEA 调试 Java 代码一样。

1. 暂停 / 恢复脚本执行，执行到下一断点停止 ( F8 或 ctrl + \ )2. 执行到下一步的函数调用，跳到下一行( F10 )3. 进入当前函数( F11 )4. 跳出当前执行函数( shift + F11 )5. 单步执行( F10 )6. 关闭 / 开启所有断点，不会取消( ctrl+ F8 )7. 异常情况自动设置断点

调试区下方：查看数值与，各种类型的断点管理。

•Watch：查看调试返回值与参数信息。•Call Stack：调用栈，函数执行上下文信息。•Breakpoints：JS 断点。•XHR/fetch Breakpoints: 请求断点。•DOM Breakpoints: DOM 对象断点(最终跳转到 JS 进行调试)。•Global Listeners: 全局监听事件。•Event Listener Breakpoints: 监听事件断点(可以通过触发相应事件找到对应 JS 代码)。

Network 界面

如图所示，Network 界面主要是前端发起 http 请求，在这里我们可以选择查看请求资源的类型，或通过搜索框查找含有特定字符的请求。

Headers

如图所示，主要包括：

•General：显示请求地址、请求方法类型、返回状态码等。•Request Header：显示请求头部携带信息，含验证信息、资源类型等。•Query String Parameters / Form Data：查询参数，通常用于判断传入参数是否正确。

Preview：显示 http 请求返回的数据。如下图所示

Timing：显示请求的一些数据，如数据量、各个阶段消耗时间。

总结

一般来说，比较常用的就如上四个地方，同时，主要还是对 JS 代码进行调试，查看对应变量具体数值。以及通过 Network 判断请求失败的原因，判断是前端问题还是后端问题。除本文内容外，我推荐下列文章，大家可以阅读一下。

• 海沫汐 | 浅谈前端 Debug 调试方法 ^[1]• 菜鸟教程 | 一探前端开发中的 JS 调试技巧 ^[2]

引用链接

[1] 海沫汐 | 浅谈前端 Debug 调试方法 : https://www.cnblogs.com/ayqc/p/12525264.html[2] 菜鸟教程 | 一探前端开发中的 JS 调试技巧: https://www.runoob.com/w3cnote/js-debugging-skills.html