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

Canivores
201 阅读6分钟

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

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

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

chrome develop

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

DevTools功能（9个功能组）：

image.png image.png

  • Elements：在 Elements 面板中可以通过 DOM 树的形式查看所有页面元素，同时也能对这些页面元素进行所见即所得的编辑
  • Console：一方面用来记录页面在执行过程中的信息即日志（一般通过各种 console 语句来实现），另一方面用来当做 shell 窗口来执行脚本以及与页面文档、DevTools等进行交互
  • Sources：Sources 面板主要用来调试页面中的 JavaScript -Network：在 Network 面板中可以查看通过网络来请求来的资源的详细信息以及请求这些资源的耗时。
  • Performance：在 Performance 面板可以查看页面加载过程中的详细信息，比如在什么时间开始做什么事情，耗时多久等等。这个跟上面的 Network 有什么区别呢？在 Performance 面板中，你不仅可以看到通过网络加载资源的信息，还能看到解析 JS、计算样式、重绘等页面加载的方方面面的信息。
  • Memory：Memory 面板主要显示页面 JS 对象和相关联的 DOM 节点的内存分布情况。
  • Application：记录网页加载的所有资源，包括存储信息、缓存信息以及页面用到的图片、字体、脚本、样式等信息。
  • Security：用于检测当面页面的安全性。
  • Lighthouse：谷歌网页性能分析工具。

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

1. Elements 面板

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

    img

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

    image.png

    image.png

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

    img

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

  • 截取节点屏幕截图

image.png

2. Console面板

1 ）控制台输出日志

  • 普通打印：console.log

  • 效果同普通打印：console.debug、console.info

  • 警告打印：console.warn

  • 错误打印：console.error

    image.png

  • 将数据以表格形式展示：console.table，具像化的展示JSON 和数组数据

    image.png

  • 打印节点树形结构：console.dir，通过类似文件树的方式展示对象的属性

2）占位符

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

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

效果如图：

image.png

3. Sources面板

image.png

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

image.png

如何进入调试状态？

打断点！

两种方法：

  • 在代码指定位置添加debugger关键字就可以在代码运行到对应的位置暂停
  • 在代码预览区对应的行数旁点一下可以添加断点，跟debugger行为一样

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

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

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

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

    闭包可以参考

    developer.mozilla.org/enUS/docs/W…

    关于调用栈可以参考

    developer.mozilla.org/enUS/docs/G…

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

    映射解析器：www.murzwin.com/base64vlq.h…

4. Network面板

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

image.png

5. Performance面板

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

image.png

区域1：控制面板

区域2：概览面板

  • FPS：每秒的帧数
  • CPU：处理各个任务花费的时间
  • NET：各个请求花费的时间

区域3：线程面板，

  • Frames：帧线程，
  • Main：主线程，负责执行JavaScript，解析HTML/CSS，完成绘制；
  • Raster：Raster线程，负责完成某个layer或者某些块的绘制

区域4：统计面板

Performance运用过程：

页面卡顿 => 查看FPS指标 => 寻找性能瓶颈 => 优化代码

6. Application面板

显示对应的本地储存数据

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

image.png

7. lighthouse面板

Lighthouse是网页性能分析工具。

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

image.png

Web核心指标：

  • LCP（largest Contentful Paint） ：最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5内发生。
  • FID（First Input Delay） ：首次输入延迟，测量交互性。为了提供良好的用户体验，页面的FID应为100毫秒或更短。
  • CLS（Cumulative Layout Shift） ：累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的CLS应保持在0.1或更少。

8. Security面板

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

9. Memory面板

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

参考博客：

链接：juejin.cn/post/712785…

作者：皓月u

常用开发调试技巧

  1. 线上即视修改Overrides
  • 在Source里面的overrides
  • 点击Select folders for Overrides，选择一个本地的空文件目录
  • 允许授权
  • 在page中修改代码，修改完成后保存
  • 打开devTools，点击右上角的 ··· -> More tools -> Changes，就能看到所有修改
  • image.png

  1. 利用代理解决开发阶段的跨域问题

    image.png

  2. 用本地的sourcemap文件代理到远程，可以在本地看到对应的源代码的错误位置

总结

调试的时候可以捏捏小黄鸭喔！0060CC46.gif

avatar
文章
阅读
粉丝