Web 调试技术 | 青训营笔记

zhang_galaxy
62 阅读2分钟

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

课程重点

  1. Bug与Debug
  2. Chrome Devtools

Bug与Debug

Debug的特点：多平台、多环节、多工具、多技巧

Chrome Devtools

动态修改元素和样式

  • 点击.cls开启动态修改元素的class
  • 输入字符串可以动态给元素添加类名
  • 勾选/取消类名可以动态的查看类名生效效果
  • 浏览器界面中右击-检查，可以直接跳转到html中的块
  • 点击具体的样式值，可以进行编辑，浏览器内容区域实时预览
  • Computed下点击样式里的箭头可以跳到styles面板中的css规则
    • 强制激活伪类
      选中具有伪类的元素，点击:hov
      dom树右键菜单，选择force state

Console

  • console.log
  • console.warn
  • console.error
  • console.debug
  • console.info
  • console.table
    具象化展示json和数组数据
  • console.dir
    通过类似文件树的方式展示对象的属性
  • 占位符
    给日志添加样式，可以突出重要信息，%s字符串占位符，%o对象，%c样式，%d数字

Source Tab

  • 使用关键字debugger或代码预览区域的行号可以设置断点。

  • 执行到断点处代码自动暂停

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

  • 暂停状态下，鼠标 hover 变量可以查看变量的值

  • 在调试器 Watch 右侧点击 +可以添加对变量的监控，查看该变量的值 字符串灰色，数字蓝色。

  • Scope

    • 展开scope可以查看作用域列表，包含闭包
    • 可以查看当前JavaScript代码的调用栈 !

SourceMap

  • 问题：压缩+混淆
    前端代码天生具有“开源”属性，出于安全考虑，上线之前 JavaScript 代码通常会被压缩，压缩后的代码只有一行，变量使用a、b等替换，整体变得不可阅读。那么压缩后的代码如何调试呢?
    使用sourceMap。
    mappings 字段存储了源文件和Source Map 的映射： 英文，表示源码及压缩代码的位置关联。逗号，分隔一行代码中的内容。分号，代表换行。
  • 思考题
    既然 Source Map 可以映射源码，那压缩后的代码带上 Source Map 上线不就又不安全了吗?
    上线不带sourceMap，sourceMap传到统一的监控平台。

Network

image.png
preview、response查看后端返回结果
image.png
可以模拟弱网环境

Application

Application面板展示与本地存储相关的信息：Local Storage，Session Storage，IndexedDB，Web SQL，Cookie

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

Performance

image.png 

Lighthouse

可以参考lighthouse的建议来优化站点

  • Largest Contentful Paint：可以进行最大内容绘制，可以测量加载性能
  • First Input Delay：首次输入延迟，可以测量交互性
  • Cumulative Layout Shift：累计布局偏移，可以测量视觉稳定性。
avatar
文章
阅读
粉丝