前端开发调试小技巧之PC端调试篇 | 青训营笔记

Canivores
170 阅读5分钟

前端开发调试小技巧之PC端调试篇 | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的的第7天。

在我们写前端程序的时候，必不可少的就是调试代码，可能偶尔用过但不是特别了解，快来一起学习一下关于PC端调试的小技巧吧。

提到前端关于PC端的调试，首先想到的肯定是浏览器。PC 端调试与浏览器有紧密的关系。

  • 浏览器是用户在 PC 上访问网页的主要工具，也是前端开发人员调试代码的重要环境。
  • 浏览器提供了一系列的开发者工具，例如控制台、断点调试、网络面板等，前端开发人员可以利用这些工具来调试网页的布局、样式、交互等问题。

Chrome DevTools

Chrome DevTools（Chrome 开发者工具） 是内嵌在 Chrome 浏览器里的一组用于网页制作和调试的工具。

可以通过以下这些方式打开 Chrome DevTools：

  • 选择右上角Chrome 菜单，然后选择更多工具 -> 开发者工具
  • 右键，选择检查/审查元素

当然，比较推荐利用快捷键来打开：

  • Ctrl + Shift + I, F12 / Cmd + Opt + I，打开 DevTools
  • Ctrl + Shift + J / Cmd + Opt + J，打开 DevTools，并且定位到控制台面板
  • Ctrl + Shift + C / Cmd + Opt + C，打开 DevTools，并且开启审查元素模式（相当于点击了 DevTools 左上角的图标： ）

DevTools功能（9个功能组）：

image.png

  • Elements：通过 DOM 树的形式查看所有页面元素，提供对页面元素进行所见即所得的编辑
  • Console：记录日志，执行脚本以及与页面文档、DevTools等进行交互
  • Sources：调试页面中的 JavaScript
  • Network：查看通过请求资源以及请求耗时
  • Performance：查看页面加载过程中的详细信息
  • Memory：显示页面 JS 对象和相关联的 DOM 节点的内存分布情况
  • Application：记录网页加载的所有资源
  • Security：检测当面页面的安全性
  • Lighthouse：网页性能分析工具

官方文档：developers.google.com/web/tools/c…

1. Elements

  • 通过.cls动态添加删除修改元素类名以及样式

  • 强制激活伪类：右键某个元素在菜单选择Force State可以选择锁定对应的伪类或者使用:hov锁定

  • Computed下可以搜索对应样式，然后跳转到styles面板中的css规则

  • 对DOM结构也可以添加删除修改对应的节点或属性

  • 截取节点屏幕截图

2. Console

1 ）控制台输出日志

打印console
普通打印：console.log
效果同普通打印console.debug、console.info
警告打印console.warn
将数据以表格形式展示console.table
打印节点树形结构console.dir
错误打印：console.error

2）占位符

给日志添加css样式，可以突出重要的信息

  • %s：字符串占位符
  • %o：对象占位符
  • %c：样式占位符
  • %d：数字占位符

3. Sources面板

可以在这个面板里面调试JS代码，也可以在工作区打开本地文件

  • 在调试器中Watch右侧点击+添加变量，查看对应变量

  • 展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点

  • DOM breakpoint，XHR/fetch breakpoint第一个是给DOM添加断点，后者是有请求发生的时候会触发断点

  • Scope可以看到对应代码的作用域（包含闭包），CallStack是查看当前代码的执行栈

  • Sourcemap映射了压缩后的代码对应的源文件，sourcemap文件和源文件只会上传到监控平台，真正上线只会上线源文件

4. Network面板

Network面板可以记录页面上的网络请求的详情信息，从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间、Request和Response等），可以根据这个进行网络性能优化。

5. Performance面板

在 Performance 面板可以查看页面加载过程中的详细信息。可以看到通过网络加载资源的信息，还能看到解析 JS、计算样式、重绘等页面加载的方方面面的信息。

6. Application面板

显示对应的本地储存数据

  • LocalStorage（本地存储）
  • SessionStorage（会话存储）
  • IndexedDB
  • WebSQL
  • Cookie

7. lighthouse面板

Lighthouse是网页性能分析工具。

以上几个面板的详细讲解可以看这篇文章

审计面板会对页面的加载进行分析，然后给出提高页面性能的建议，官网建议查看PageSpeed Insights来获得更多的页面加载建议。

8. Security面板

用于检测当面页面的安全性

9. Memory面板

Memory 面板主要显示页面 JS 对象和相关联的 DOM 节点的内存分布情况

常用的 Chrome DevTools 调试技巧

  1. 元素检查：可以使用元素检查工具实时预览网页的布局和样式，并对元素进行实时修改。
  2. 断点调试：可以在 JavaScript 代码中设置断点，在运行时调试代码。
  3. 性能分析：可以使用性能分析工具检测网页的性能，包括脚本的执行时间、内存使用情况等。
  4. 网络抓包：可以使用网络抓包工具查看网页的网络请求和响应数据。
  5. 模拟设备：可以使用模拟设备工具模拟不同的移动设备，以检测网页在移动设备上的表现。
  6. 设置手机调试：可以通过 USB 连接手机与电脑，在 DevTools 中调试手机上的网页。

定制自己的调试工具

看这里，juejin.cn/post/713394…

Chrome DevTools 分为 frontend、backend，之间通过 Chrome DevTools Protocol 通信，通信的信道有很多种，常用的是 WebSocket。

我们可以集成 chrome devtools frontend 的代码，对接自己实现的 backend，从而实现调试的功能。

avatar
文章
阅读
粉丝