Web调试技术|青训营笔记

蔡plus
64 阅读2分钟

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

PC端调试

前端Debug特点

  • 多平台：浏览器、Hybrid、NodeJS、小程序、桌面应用等
  • 多环境：本地开发环境、线上环境
  • 多工具：Chrome devTools、Charles、Spy-Debugger等
  • 多技巧：Console、BreakPoint、sourceMap、代理等

Chrome devTools

elements面板

  • 动态修改元素和样式
  • computed下点击样式里的箭头可以跳转到styles面板中的css规则 强制激活伪类方法：
  • 选中具有伪类的元素，点击:hov
  • DOM树右击菜单，选择Force State

Console面板

  • .log普通日志
  • .warn警告
  • .error错误
  • .debug
  • .info
  • .table具象化显示JSON和数组数据

image.png

  • .dir通过类似文件树的方式展示对象的属性

image.png

  • console.time方法是开始计时
  • console.timeEnd是停止计时，输出脚本执行的时间。

这两个方法中都可以传入一个参数，作为计时器的名称，主要测试JavaScript性能。对console.timeEnd的调用会立即输出执行总共消耗的时间，单位是毫秒。

占位符： 给日志添加样式，可以突出重要信息 %s:字符串占位符，%o:对象占位符，%c:样式占位符，%d:数组占位符

例： console.log('%s %o %c%s','hello',{name:'zs',age:'18'},'font-size:24px;color:red','Welcome to bytedance')

console样式.png 输出的对象类型不同，显示的颜色也不同

Source面板

image.png

NetWork面板

image.png

Application面板

  • 展示与本地存储相关的信息
  • 点击Application下的Stroage面板的Clear Site Data可以清除网页的本地存储数据

Break Point与Watch

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

压缩后的代码如何调试

Source Map

  • mappings字段存储了源文件和Source Map的映射
  • 英文：表示源码及压缩代码的位置关联
  • 逗号：分隔一行代码中的内容
  • 分号：代表换行

移动端H5调试

调试方案

  • 真机调试
  • VConsole
  • 使用代理工具调试
  • NodeJS调试： Inspector Protocol+Chrome Devtool Inspector Protocol+VS Code：添加配置，启动调试，添加断点，查看变量、堆栈

常用开发调试技巧

线上及时修改Overrides

  • 打开Sources面板下的Overrides
  • 点击Select folders for Overrides，选择一个本地的空文件夹目录
  • 允许授权
  • 在Page中修改代码，修改完后commend+s保存
  • 打开devTools，点击右上角的三个小点->More tools->Changes，就能看到所有修改了
avatar
文章
阅读
粉丝