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

前端必须知道的调试工具-LMLPHP

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

前端必须知道的调试工具-LMLPHP

  • 使用关键字 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代码通常会被压缩,压缩后的代码只有一行,变量使用字母替换,整体变得不可阅读,那么压缩后的代码如何调试呢?

前端必须知道的调试工具-LMLPHP
解决: 压缩时先产生source map文件,以便后续查看

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

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

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

Performance

前端必须知道的调试工具-LMLPHP

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

Network

前端必须知道的调试工具-LMLPHP

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

Application

前端必须知道的调试工具-LMLPHP
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
  • 小黄鸭调试大法!

前端必须知道的调试工具-LMLPHP

03-14 10:32