前端

这篇笔记记录了Web前端开发中必须了解的一些调试知识。

一、本堂课重点内容

  • PC端调试
  • 移动端调试
  • Node.js调试
  • 常用开发调试技巧

二、详细知识点介绍

1、PC端调试

  • Chrome DevTools
    • Elements: 元素和样式
      • 点击.cls开启动态修改元素的class，输入字符串可以给元素添加类名
      • 调试伪类元素可以在Elements的DOM树中右键单击该元素，选择【强制状态】，也可以在右边栏的【样式】（Styles） -> 【:hov】处选择
      • 如果某个元素具有的样式太多太复杂，可以在右边栏的【已计算】（Computed） -> 【筛选器】（Filter）搜索对应的样式，可以得到真正生效的样式
    • Console
      • console.log
      • console.warn
      • console.error
      • console.debug
      • console.info
      • console.table：具象化展示JSON和数组数据
      • console.dir：通过类似文件树的方式展示对象的属性
      • console.time && console.timeEnd：计算执行时间
      • 占位符：给日志添加样式，可以突出重要的信息
        • %s：字符串占位符
        • %o：对象占位符
        • %c：样式占位符
        • %d：数字占位符
    • Source Tab
      • 结构
        • 页面资源文件目录树
        • 代码预览区域
        • Debug工具栏
        • 断点调试器
      • 使用关键字debugger或代码预览区域的行号可以设置断点
      • 执行到断点处时代码暂停执行
      • 展开 Breakpoints 列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
      • 暂停状态下，鼠标hover变量可以查看变量的值
      • 在调试器 Watch 右侧点击+可以添加对变量的监控，查看该变量的值
      • 展开 Scope 可以查看作用域列表（包含闭包）
      • 展开 Call Stack 可以查看当前 JavaScript 代码的调用栈
    • Source Map
      • 使压缩的js文件和源文件形成映射
      • 为了安全起见，一般不随项目上线，而是另外上传到一个监控平台
    • Network
      • 结构
        • 控制面板
        • 过滤面板
        • 概览区域
        • Request Table面板
        • 总结面板
        • 请求详情面板
    • Application
      • Local Storage
      • Session Storage
      • Indexed DB
      • web SQL
      • Cookie
    • Performance
      • Performance运用示例
      • 调试步骤：页面卡顿 -> 查看FPS指标 -> 寻找性能瓶颈 -> 优化代码
      • 补充知识：一些获取页面元素距离的属性（如offsetTop、scrollWidth）会导致重绘重排，降低性能
      • 区域结构
        • 控制面板
        • 概览面板
        • 线程面板
        • 统计面板

2、移动端调试

  • 真机调试
  • VConsole
  • 代理工具
    • Charles
    • Fiddler
    • spy-debugger
    • Whistle

3、Node.js调试

  • Inspector Protocol + Chrome Devtools
    • 执行命令 node --inspect=8888 index.js
    • chrome浏览器访问服务
    • 点击绿色node图标打开node调试面板。如果没有的话就在chrome://inspect/#devices中配置 network target
    • 在node调试面板中使用断点调试
  • Inspector Protocol + VScode
    • 运行
    • 添加配置
    • 启动调试
    • 添加断点
    • 查看变量、堆栈

4、常用开发调试技巧

  • 线上即时修改Overrides
    • 打开Sources面板下的Overrides
    • 点击Select folders for Overrides，选择一个本地的空文件夹目录
    • 允许授权
    • 在 page 中修改代码，修改完成后 command + s 保存
    • 打开 devTools，点击右上角的三个小点 -> More Tools -> Changes，能够看到所有的修改
  • 利用代理解决开发阶段的跨域问题
  • 启用本地source map
  • 使用代理工具Mock数据

三、实践练习例子

无

四、课后个人总结

  • 学到了很多之前没有接触过的调试技巧，极大地减轻了调试的繁琐程度

五、引用参考