PC端网页调试 #

Elements #

• 查看网站的全部元素内容
• 动态修改元素和样式
  • .cls动态添加元素class

Console #

• console.log：打印日志
• console.warn：打印警告
• console.error：打印错误
• console.debug：打印调试
• console.info：打印信息
• console.table：具象的展示JSON和数组数据
• console.dir：打印目录/树结构
• 使用占位符打印：%s %c %d %o

Sources #

• 页面资源文件目录树
• 代码预览
• 调试工具栏
  • 设置断点
    • 代码输入debugger
    • 代码预览窗口设置断点
    • 异步请求断点
    • dom结点设置断点
  • scope：作用域列表（包含闭包）
  • call stack：调用栈

压缩后的代码如何调试？

• 生成source map文件
  • mapping字段存储了源文件和Source Map 的映射。
    • 英文，表示源码及压缩代码的位置关联
    • 逗号，分割一行代码中的内容
    • 分号，代表换行。之所以没有分号，是因为压缩后的代码只有一行

Performance #

Network #

• 控制面板
  • 网速控制
• 查看请求详情

Application #

• 清理缓存

移动端H5调试 #

• 真机调试
• 代理调试
  • Charles：适合查看、控制网络请求，分析数据
  • Fiddler：与Charles类似，适合windows
  • spy-debugger：远程调试手机页面，抓包
  • whistle：基于Node实现的跨平台Web调试代理工具

使用技巧：

通过代理，调试远程的网站，将远程的文件代理成本地的文件，修复bug，再重新上线。

常用调试技巧 #

• overrides：保存调试时的代码修改
• 利用代理解决开发阶段跨域问题
• 启用本地的source map
  • 与上面的代理文件同理，source map同样可以代理
• 小黄鸭调试法

扩展 #

• vscode调试
• 前端埋点方案