前端必须知道的开发调试知识 ｜ 青训营笔记

zhouzh
83 阅读3分钟

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

前端Debug的特点

  • 多平台
    • 浏览器
    • Hybrid
    • NodeJS
    • 小程序
    • 桌面应用等
  • 多环境
    • 本地开发环境
    • 线上生产环境
  • 多工具
    • Chrome DevTools
    • Charles
    • Spy-Debugger
    • Whistle
    • vConsole
  • 多技巧
    • Console
    • Breakpoint
    • SourceMap
    • Proxy

Chrome DevTools

    1. 动态修改元素和样式
    • 可以动态修改元素的类名、样式
    • 可以强制指定元素的伪类
      • 通过Force state
      • 通过Styles标签页Filter
    • 可以右键元素截屏特定元素
    1. 控制台
    • 日志分为log warn error debug info五种等级
    • 可以用占位符给日志添加样式，突出重要信息
      • %s 字符串占位符
      • %o 对象占位符
      • %c 样式占位符
      • %d 数字占位符
    • 默认不同类型的值在浏览器控制台在颜色上会进行区分
    • console.table可以更可视化展示JSON和数组数据
    • console.dir 通过类似文件树的方式展示对象的属性
    • console.time(timerName)开始计时，console.timeEnd(timerName)结束计时，可用于跟踪操作时长
// 占位符输出日志示例
console.log("%o, %c%s", {name:"学生", age: 24}, 'color: red', 'is watching you.')
    1. Source 标签页 可以浏览页面资源文件目录，实时修改代码和加入断点调试
    • 加入断点的方法
      • 嵌入一行debugger;
      • 手动添加
    • 监测变量的值
      • Watch标签页
      • 鼠标hover到该变量
    • Scope - 作用域列表(包括闭包)
    • Call Stack - 调用栈
    • 压缩混淆后的代码如何调试？
      • 使用SourceMap，把压缩混淆后的代码映射到原始代码位置
      • 浏览器使用.map文件进行映射
        文件中包含一个json，存储SourceMap版本、对应文件、原始代码内容、标识符、用Base64编码的映射位置等
      • 出于安全和存储体积考虑，项目上线不带SourceMap，而仅把SourceMap上传到监控平台
    1. Network 标签页 展示页面加载过程中的各种请求
    • 可以调节模拟弱网环境
    1. Performance 标签页
    • Frames 帧线程
    • Main 主线程，负责执行JavaScript、解析HTML和CSS，完成页面绘制
    • Raster Raster线程负责完成某个layer或某些tile的绘制
    • 示例
      • 调优流程
        • 发现页面卡顿
        • 查看FPS指标
          • More Tools -> Rendering - Frame Rendering Stats
          • 正常情况浏览器刷新率是60fps
        • 寻找性能瓶颈
          • 获取offsetTop属性值时，浏览器会进行强制重排
          • 重排和重绘会导致卡顿
        • 优化代码
    1. Lighthouse 标签页

    较Performance简化，包含一些核心性能指标和优化建议

    • LCP 最大内容绘制 测量加载性能。为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5秒内发生
    • FID 首次输入延迟 测量交互性。为了提供良好的用户体验，页面的FID应在0.1秒内
    • CLS 累积布局偏移测量视觉稳定性。为了提供良好的用户体验，页面的CLS应在 0.1. 内

移动端H5调试

  • 真机调试
    • USB连接电脑
  • 使用vConsole
  • 使用代理工具调试
    • Charles
      • Map Remote 把资源代理到远程
      • Map Local 把资源代理到本地
    • Fiddler
    • spy-debugger
    • Whistle

NodeJS调试

  • Inspector Protocol + Chrome DevTools
    • chrome://inspect//#devices
  • Inspector Protocol + VSCode

常用开发调试技巧

  • Overrides 线上即时修改

    在刷新后仍存有调试的中间状态

    • Source 标签页 -> Overrides
    • 选择一个空文件夹保存
    • 现代前端开发通常使用热更新

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

    • 比如把localhost:5000/api的请求代理到目标api地址
    • 线上阶段？
      • 用nginx配置代理

  • 启用本地Source Map

    线上不存在Source Map，可以用Map Local映射到本地的Source Map

    • 比如把/dist/bundle.js.map代理到本地的Source Map文件
    • Charles代理https请求可能会出现证书问题

  • 使用代理工具Mock数据

    前端需要数据渲染，后端还没有准备好接口

    • 比如把/api代理到本地的json数据

  • 向小黄鸭解释你的代码

avatar
文章
阅读
粉丝