前端必须知道的开发调试知识2 | 青训营

28 阅读1分钟

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 统计面板