前端必须知道的调试工具

Bug和Debug#

Bug的起源:

当时人们还在使用第一代真空计算机(马克二型),这种计算机是依靠控制电流来改变开关,从而实现控制,但是它会发出大量的热和光。

1949年9月9日,天气非常炎热,有一只娥死在了70号继电器里面,造成电路不通,机器死机,经过近一天的检查,Grace Hopper(格蕾斯哈珀)终于找到了真凶,原来正是被光吸引过来的娥造成了机器宕机,在这儿之后,在计算机科学中,Bug就从虫子变成了程序的缺陷,一只虫子就这样被载入了计算机史册。

前端Debug的特点:

  1. 多平台:浏览器、Hybrid、NodeJS、小程序、桌面应用
  2. 多环境:本地开发环境、线上开发环境
  3. 多工具:Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole
  4. 多技巧:Console、BreakPoint、SourceMap、代理

Chrome DevTools#

Elements 元素#

  • 动态修改元素和样式
  • 点击.cls开启动态修改元素的class
  • 输入字符串可以动态给元素添加类名
  • 勾选/取消类名可以动态的查看类名生效效果
  • 点击具体的样式值(字号、颜色、宽度高度等)可以进行编辑,浏览器内容区域实时预览
  • Computed下点击样式里的箭头可以跳转到style面板中的css规则

可以用以下2种方式强制激活伪类

  • 选中具有伪类的元素:点击:hov
  • DOM树右键菜单:选择Force State

Console 日志#

  • console.log
  • console.warn
  • console.error
  • console.debug
  • console.info
  • console.table (具象化的展示JSON和数组数据)

占位符:

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

%s:字符串占位符、%o:对象占位符、%c:样式占位符、%d:数字占位符

(巧用console来Debug)

Score Tab#

image.png

  • 区域1:页面资源文件目录树
  • 区域2:代码预览区域
  • 区域3:Debug工具栏(从左到右:暂停(继续)、单步跳过、进入函数、跳出函数、单步执行、激活(关闭)所有断点、代码执行异常处截断)
  • 区域4:断点调试器
Break Point & Watch

image.png

  • 使用关键字 debugger 或 代码预览区域的行号可以设置断点
  • 执行到断点处时代码暂停执行
  • 展开 Breakpoints 列表可以查看断点列表,勾选/取消可以激活/禁用对应断点
  • 暂停状态下鼠标hover 变量可以查看变量的值
  • 在调试器 Watch 右侧点击 +可以添加对变量的监控,查看该变量的值
Scope & CallStack

展开 Scope 可以查看作用域列表(包含闭包),闭包可以参考
https://developer.mozilla.org/en-US/docseb/JavaScript/Closures
展开Call Stack 可以查看当前javaScript代码的调用栈,关于调用栈可以参考
https://developer.mozilla.org/en-US/docs/Glossary/Call_stack

压缩后的代码如何调试?

前端代码天生具有“开源”属性,出于安全考虑,Js代码通常会被压缩,压缩后的代码只有一行,变量使用字母替换,整体变得不可阅读,那么压缩后的代码如何调试呢?

image.png
解决: 压缩时先产生source map文件,以便后续查看

mappings 字段存储了源文件和 SourceMap 的映射

  • 英文,表示源码及压缩代码的位置关联
  • 逗号,分隔一行代码中的内容。
  • 分号,代表换行。之所以没有显示分号是因为压缩后的代码就只有一行

既然 Source Map 可以映射源码,那压缩后的代码不就又不安全了吗?
https://blog.csdn.net/m0_67392273/article/details/126496551

Performance#

image.png

  • 区域1: 控制面板
  • 区域2: 概览面板
  1. FPS:每秒顿数
  2. CPU: 处理各个任务花费的时间
  3. NET:各个请求花费时间
  • 区域3: 线程面板
  1. Frames: 顿线程
  2. Main:主线程,负责执行
  3. Javascript,解析HTML/CSS,完成绘制
  4. Raster: Raster线程,负责完成某个layer或者某些块(tile)的绘制
  • 区域4: 统计面板

Network#

image.png

  • 区域1: 控制面板
  • 区域2: 过滤面板
  • 区域3: 概览区域
  • 区域4: Request Table 面板
  • 区域5:总结面板
  • 区域6:请求详情面板

Application#

image.png
Application 面板展示与本地存储相关的信息

  • Local Storage
  • Session Storage
  • IndexedDB
  • Web SOL
  • Cookie

点击左侧 Application 下的Stroage 面板中的 Clear Site Data可以清楚网页的本地存储数据

常用工具#

  • Charles:适合查看、控制网络请求、分析数据
  • Fiddler:与Charles类似,适合windows平台
  • spy-debugger:远程调试手机页面、抓包
  • Whistle:基于Node实现的跨平台Web调试代理工具

常用开发调试技巧#

  • 线上即时修改 Overrides
  1. 打开 sources 面板下的的Overrides
  2. 点击 Select folders for Overrides。选择一个本地的空文件夹目录。
  3. 允许授权
  4. 在 page 中修改代码,修改完成后ctrl +s保存
  5. 打开 devTools ,点击右上角的三个小5.点->More tools ->Changes,就能看到所有修改了
  • 利用代理解决开发阶段的跨域问题
  • 启用本地source map
  • 小黄鸭调试大法!

image.png

posted @   辜负寒彻骨  阅读(787)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
  1. 1 逝年 夏小虎
逝年 - 夏小虎
00:00 / 00:00
An audio error has occurred.

作词 : 刁云逸

作曲 : 夏小虎

风里飘雪的花

在记忆之中发芽

那些红色绿色

我们的青春年华

志向无限远大

转眼已各奔天涯

独自走在街上

只看见曾经的晚霞

时间似流水

催促我们长大

年轻的心有了白发

当初的人呐

你们如今在哪

是否也在寻找梦的家

风里飘雪的花

在记忆之中发芽

那些红色绿色

我们的青春年华

志向无限远大

转眼已各奔天涯

独自走在街上

只看见曾经的晚霞

时间似流水

催促我们长大

年轻的心有了白发

当初的人呐

你们如今在哪

是否也在寻找梦的家

时间似流水

催促我们长大

年轻的心有了白发

当初的人呐

你们如今在哪

是否也在寻找梦的家

点击右上角即可分享
微信分享提示
主题色彩