手把手教学浏览器调试前端代码

优岚
1,822 阅读10分钟

在实习的时候，因为项目很大，调试的技能就非常重要了，在打滚了很久很久之后终于初掌握里其中的秘诀。

然而写着写着，发现还挺多的，那就写点常用到的吧（其他别人已经写得很好了😪😪😪）

1. 背景

调试 是指在一个脚本中找出并修复错误的过程。所有的现代浏览器和大多数其他环境都支持调试工具 —— 开发者工具中的一个令调试更加容易的特殊用户界面。它也可以让我们一步步地跟踪代码以查看当前实际运行情况。

简单来说，就是当项目里的代码非常复杂的时候，可能你不清楚其调用逻辑、可能你不知道变量的执行情况，这时候调试代码就很重要了，你可以根据这个断点：

  • 跟踪代码实际运行情况
  • 查看当前执行情况下变量的值
  • 查看函数调用顺序
  • 查看调用栈中的函数：同步/异步
  • ......

2. 操作

1. 调试工具

一般来说，对于前端就是编辑器或者浏览器

  • 使用本地的编辑器，如VSCode，好处是可以直接在源码中进行操作，也方便即时修改代码，不足之处是调试较为麻烦，并且需要做一些配置后才能进行调试（具体可以自己去配一下，这个用来刷算法题还是比较爽的）；
  • 使用谷歌浏览器，好处是拥有足够多的功能，可以基本上满足开发的需求，不足之处大概就是需要配置项目生成sources map，并且在浏览器中修改的源码无法在项目中同步，即需要在项目里找到对应文件才能进行修改代码；

这篇文档主要介绍谷歌浏览器的调试工具的使用。

  • Elements(元素)面板
  • Console(控制台)面板
  • Sources(源代码)面板
  • Network(网络)面板
  • Performance(性能)面板
  • Memory(内存)面板
  • Application(应用)面板
  • Security(安全)面板
  • Audits(审计)面板

3. 技巧

1. 快捷键

以下操作为mac电脑的快捷键

快捷键操作展示
command+option+i打开调试工具，默认打开上一次关闭的状态
command+option+j打开调试工具，默认打开console面板
command+shift+c打开element面板
command+shift+d改变面板的位置
command+shift+m切换设备模式
command+[ 和 command+]切换面板

2. Elements面板

这个面板很重要，静态的样式都是在这里查看的，HTML+CSS

左上角的箭头，点击后将鼠标移到页面，可以去查看对应的元素，并在面板中可以查看到这个元素的DOM结构，右侧可以查看这个元素的样式（包括其样式的来源 =》 可以查看样式是怎么被覆盖的）。并且在右侧的样式里可以进行编辑，编辑之后会直接在页面上展示出来，这个很适合编写前端UI的时候去调整padding、margin这些。

这里还能查看“盒子大小”、“布局Grid/FlexBox”、“绑定的属性”、“元素绑定的事件”等。

对该元素的状态进行debug，eg. 这个元素是hover才能显示，为了方便调试，往往会勾选这里的:hover来使得这个元素处于hover状态，方便查看样式

常用：⭐️⭐️⭐️⭐️⭐️

  • 审查元素，查看dom结构
  • 调整css样式
  • 查看样式覆盖原因
  • 通过classname去查找对应的文件

3. Console面板

console完全指北 - 掘金

Chrome DevTools的console面板 - 掘金

  • 这里是一个合格的JavaScript编辑器，往往我喜欢在这里进行一些js语句的编写，来查看自己使用的api是否正确。

    •   😍小福利😍：在浏览器里使用第三方依赖！搭配 chrome 插件 console-importer 
      if (!('_' in window)) $i('lodash')
else {
 const result = _.map([1, 2, 3, 4, 5], i => i + 1)
 console.log(result)
}
  • 项目中使用console.log(xxxx)便是在这里进行打印输出

  • 在控制台中还可以直接获取挂载到了全局的变量:

  • 过滤功能：

常用：⭐️⭐️⭐️⭐️

  • 查看项目中console.log内容
  • 编写js语句
  • 查看挂载到全局的变量

4. Sources面板

这里可以对源码进行断点调试，important！

同样的，这里也可以运行js代码，可以把算法代码粘贴到这里进行运行，控制台中可以直接调用这个文件里的方法，比起Console面板好处是可以进行调试

简单来认识一下这个面板吧，具体的使用会在下一个part进行展开

  1. Threads：标识出当前启动的线程，可以切换
  1. Watch：对变量进行监听
  1. BreakPoints：点击代码左边数字那里会打一个断点

  1. Scope：当前断点所在的作用域，可以看到当前作用域的所有变量的值

    1. Local 本地作用域：代码当前 {} 内存在的变量，this 就可以在这里找到。
    2. Closure 闭包作用域：代码当前所处闭包里的变量。注意名称后用括号注明了这是哪个闭包里的内容，因为闭包可以嵌套，所以可能出现多个 Closure 作用域。
    3. Script 代码标签作用域：当前 <script />标签里存在的变量，这个用的不多。
    4. Global 全局作用域：这个就不用解释了吧。
  1. Call Stack：调用栈，进入断点后这里会显示函数的调用次序（同步、异步），点击对应的可以跳转到对应的代码里
  1. Dom Breakpoints： dom 变更的时候进入断点

  1. Global Listener：显示所有绑定到 window 的事件监听器，点击可以跳转到对应的代码
  1. Event Listener Breakpoints：列举了所有事件，触发后自动进入断点
  1. 断点：(从左到右)
  • 点击运行到下一个断点，如果没有设置断点会直接运行完代码
  • 点击运行代码到断点的下一行
  • 点击跳进断点函数里进行调试
  • 跳出当前函数调用
  • 当前断点的下一步

在page面板修改是不会改变本地文件的，而这里的【overrides】可以选择保存到本地哪个文件夹里，选择保存到覆盖文件即可（Save for Overrides）

常用：⭐️⭐️⭐️⭐️⭐️

用于调试代码

  • 查看变量的执行情况
  • 查看函数调用情况
  • 判断函数是否执行

5. Network面板

http协议报头详解 - 蚊子博客 - 博客园

Referrer Policy 介绍 | JerryQu 的小站

关于这个面板，对于前端来说，最重要的事情就是用来查看网络请求情况：

  1. 左上角的小红点，是一个开关：是否捕获网络请求

    1. 红色状态下，可以正常捕获网络请求；灰色状态，则停止捕获网络请求。一般用于分析网络，不想被新请求的网络干扰时，会使用这个功能
  1. 右侧是清除面板的网络请求情况
  1. Preserve log ：保留请求日志，跳转页面的时候勾选上，可以看到跳转前的请求（不勾选默认就是跳转到新页面就看不到之前的请求了）
  1. Disable cache：忽略缓存，一般get请求会做一些缓存，主要是避免重复加载资源时的浪费

  1. 再往右，可以选择网速情况，有4g 3g等等情况，支持自定义，一般在这里选择无网状态，模拟用户断网的情况，或选择低网速模拟用户弱网状态
  1. 再往右，支持上传下载网络请求情况文件
  1. 往下有个输入框Filter，可以对网络请求进行筛选，一般用于筛选对应的网络请求（输入api地址）
  1. 对资源进行分类：对于网络请求来说，一般分为【静态资源】&【动态资源】，其中动态资源也就是api接口请求，归属于“Fetch/XHR”，其他的就属于静态资源了，比如js、css、字体、图片、视频等，都有对应的分类

  1. 网络请求：

    1. （1）Name: 表示加载的文件名。
    2. （2）Method: 表示请求的方式。
    3. （3）Status: 表示状态码（200为请求成功，304表示从缓存读取）。
    4. （4）Type: 表示文件的MIME Type的类型。
    5. （5）Initiator: 表示发出这个文件请求的发出者。
    6. （6）Size: 表示文件大小。
    7. （7）Time: 表示每个请求的总时长。
    8. （8）Timeline: 以图表的形式显示元素的请求和加载情况。

  1. 查看watchfall：Chrome控制台 Network Timing面板 - 掘金

  1. ❗️ 查看网络详情：点开对应的网络，会有具体的情况

    2. 这里可以查看到网络请求的具体情况，几个比较重要的：
    3. header：查看请求的url、method、status等等，包括跨域也会在这里进行体现，以及一些请求头携带的特殊参数，例如logId
    4. payload：请求的request参数
    5. response：请求的response参数
    6. preview：对请求回来的参数进行格式化，方便查看
    7. cookies：改请求对cookie的操作
    8. 其他查看较少，一般用于优化网络加载情况时会使用的

常用：⭐️⭐️⭐️⭐️⭐️

  • 设置网速
  • 查看接口请求情况：状态码、返回参数等
  • 查看请求时间、数量
  • 网络优化

6. Performance面板

chrome devtools使用详解--Performance - 掘金

用于分析页面运行性能，做优化的时候使用

常用：⭐️⭐️

  • 页面整体的网络加载情况
  • 监控页面整体性能

7. Application面板

Chrome 开发工具之 Application - 走看看

这里最主要的是查看LocalStorage、SessionStorag、Cookies

常用：⭐️⭐️⭐️

  • 查看缓存情况
  • 清除缓存

4. 实操

对于一个项目，我们可以通过调试的方式去了解这个项目的逻辑

  1. 通过元素审查，拿到classname，到项目中搜索，一般可以找到对应的代码文件，方便我们将代码定位到一个文件里
  1. 此时知道代码的位置了，可以粗略的查看该文件是什么组件、有什么功能、大致的函数调用关系，此时就可以通过打断点的形式去开启debug
  1. debug的入手点：
  • 有dom的变化，直接对dom打断点。eg、对输入框所在的dom打一个断点，当你在输入框中输入内容的时候，代码会停住在这个操作执行的第一个函数
  • 初始化或者特定时机执行的函数，例如初始化执行的函数，可以直接对生命周期函数打断点，以此以此执行代码找到对应的函数
  • 行为对应的函数，这个需要对代码函数执行有一定的了解，eg、点击发送按钮，在代码中看到了这个按钮绑定的点击事件，将断点打在这个函数里

  1. 断点打好了，通过调试器对代码进行调试：

  • 在未知的情况下，使用【第二个】，执行下一行代码
  • 想要查看某一行的变量，在变量那一行加一个断点，使用【第一个】，直接跳到下一个断点的位置
  • 在执行的时候，遇到有调用其他函数，使用【第三个】，进入该函数里
  • 使用【第四个】从当前执行的函数中跳出来，回到调用该函数的方法里（一般和第三个配合使用）
  • 使用【第五个】直接不调用这个方法
  1. 在调试过程中，主要查看：
  • 变量的情况，在【watch】中加入想要看的变量 或者 在【scope】中直接查看
  • 函数调用情况，在【call stack】中查看，并且可以看到同步&异步栈中的入栈函数

最后

附上了几个还不错的文章链接，基本上是覆盖了谷歌浏览器调试工具的使用了~

这个详细版：shouce.jb51.net/chrome/inde…

avatar
文章
阅读
粉丝