Break point 与 watch
使用关键字debugger或代码预览区域行号可以设置断点
执行到断处时代码暂停执行
展开break pints列表,勾选、取消可以激活、禁用对应断点
暂停状态下,鼠标hover变量可以查看变量的值
在调试器watch 右侧点击+可以添加对变量的监控,查看该变量的值
展开scope可以查看作用域列表(包含闭包)
展开call stack 可以查看当前Javascript代码的调用栈
压缩后的代码如何调试?
前端代码天生具有“开源”属性,出于安全考验,上线之前JavaScript代码通常会被压缩,压缩后的代码只有一行,变量使用“a”、“b”等替换,整体变得不可阅读。那么压缩后的代码如何调试呢?
Mappings字段存储了源文件和source map的映射
英文,表示源码及压缩代码的位置关联
逗号,分隔一行代码中的内容
分号,代表换行
Network
区域1 控制面板前端必须知道的开发调试知识
区域2 过滤面板
区域3 概览区域
区域4 request table 面板
区域5 总结面板
区域6 请求详情页面
Application面板展示与本地存储相关的信息
Local storage
Seession storage
IndexdDB
Web SQL
Cookie
Performance
区域1 控制面板
区域2 概览面板
FPS 每秒帧数
CPU:处理各个任务花费的时间
NET:各个请求花费时间
区域3 线程面板
Frames帧数程
Main主线程,负责运行JavaScript,解析html/css,完成绘制
Raster:raster线程,负责完成某个layer或者某些块的绘制
区域4 统计面板