前端调试｜ 青训营笔记

Lil_Moon
109 阅读5分钟

Chrome DevTools

Elements，动态修改元素和样式

  • 使用.cls可以动态修改元素的类
    • 可以通过输入字符串给元素添加类名
    • 可以通过勾选/取消类名来动态查看类名效果
    • 点击具体的样式值(字号、颜色、宽高等)可以进行编辑，浏览器可以进行实时预览
    • 可以通过Computed标签中样式里的 → 可以跳转至对应的style中的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

通过Source标签页可以查看并修改调试源代码 Source标签页分为四个部分，从左到右分别为：

  • 页面资源文件目录树
  • 代码预览区域
  • Debug工具栏，其中的按键从左到右分别为：
    • 暂停/继续
    • 单步跳过
    • 进入函数
    • 跳出函数
    • 单步执行
    • 激活/关闭所有断点
    • 代码执行异常处自动
  • 断点调试器，其中的区域从上至下分别为：
    • 变量监视器
    • 断点，添加断点的方法：
      • 添加debugger代码，添加断点
      • 点击左侧行号添加断点
    • 作用域
    • 调用栈
    • 请求断点
    • DOM断点

调试压缩后的代码

使用Source Map进行调试，使用webpack配置中的source-map进行代码映射。

通过source-map可以将错误的压缩混淆后的代码映射回源代码。

在部署上线时，为了安全只会上传压缩混淆后的代码不带映射map，再将source-map上线至监控平台。错误监控程序会根据错误对照监控平台中的source map文件来展示对应的源码位置。

Network

通过Network标签页可以查看页面加载时请求的各种资源 Network标签页分为六个部分，从上到下分别为：

  • 控制面板，可以设置网络环境等配置
  • 过滤面板，可以根据文件类型来查看资源
  • 概览面板，可以查看网络请求的整体过程
  • Request Table面板，可以查看请求的结果目录
  • 总结面板，可以查看请求数量等信息
  • 请求详情面板，可以查看请求的具体详细信息

Application

Application面板展示与本地存储相关的信息。 常用的信息有：

  • Local Storage
  • Session Storage
  • IndexedDB
  • Web SQL
  • Cookie

Performance

Performance标签页分为四个部分，从上到下分别为：

  • 控制面板
  • 概览面板
    • FPS，每秒帧数
    • CPU，处理各个任务花费的时间
    • NET，各个请求花费的时间
  • 线程面板
    • Frames，线程帧
    • Main，主线程，负责执行JavaScript，解析HTML、CSS，完成绘制
    • Raster，负责完成某个layer或者某个块(tile)的绘制
  • 统计面板，可以查看网页运行时各个模块花费的时间

页面性能优化的思路：

  1. 页面卡顿
  2. 查看FPS指标
  3. 通过线程面板，查找性能瓶颈
  4. 优化代码

Lighthouse

Lighthouse可以分析站点的性能情况，其中有3个核心Web指标：

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

移动端H5调试

移动端常用的调试方法：

  • 真机调试，使用数据线连接电脑和手机或通过手机扫码进行查看调试。
  • vConsole，可以在页面中注入vConsole组件，就可以查看类似Chrome DevTools工具栏的相关信息。
  • 使用代理工具调试，常用的代理工具有Charles等。

NodeJS调试

NodeJS调试的常用方法：

  • 使用Inspector Protocol + Chrome DevTools
  • 使用Inspector Protocol + VS Code

常用开发调试技巧

线上即时修改 Overrides

线上即时修改并Overrides保存步骤：

  1. 打开Sources面板下的Overrides
  2. 点击Select folders for Overrides，选择一个本地的空文件夹目录，允许授权
  3. 在page中修改代码，修改完成后command + s保存
  4. 可以通过devTools右上角的三个小点 -> More tools -> Changes查看所有的修改

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

image.png

启用本地Source Map

线上不存在source map时，可以使用Map Local网络映射功能来访问本地的source map文件。

使用代理工具Mock数据

  1. 右键选中要mock数据的接口，选择save response，保存文件到本地
  2. 本地打开保存的文件，编辑想mock的数据并保存
  3. 右键选中第一步的接口，选择Map Local，Local Path选择第二步的mock数据文件
avatar
文章
阅读
粉丝