1、devtool
-
console控制台
- 查看日志信息、执行JavaScript代码、打印变量等
- console.time('timer')、console.Endtime('timer')指令来获取到这两个console指令里夹的代码运行所需要的时间
- console.dir() json对象折叠起来输出
- console.table([xxx,xxx])以表格形式输出
- console.log(
%C test,'color:red') 此种方式可以带样式输出
-
Sources（源代码） 设置断点、单步调试、查看调用栈、监控变量等
-
Network（网络） 监控网络请求、查看请求头、响应头、响应内容、请求体等
-
Elements（元素） 查看和修改DOM结构和CSS样式
-
Application（应用） 管理本地存储、session Storage、Cookie等
-
Performance（性能） 分析页面加载和运行时的性能，找出瓶颈
-
Memory（内存） 检测内存泄漏
2、使用debugger语句
在代码中插入
debugger;语句，当浏览器执行到该语句时会自动暂停（需在开发者工具打开的情况下）。3、使用ESLint等工具静态类型检查
使用ESLint、TypeScript等工具可以在开发阶段就发现潜在问题。
4、使用Source Map调试
即使代码经过压缩混淆，只要在构建时生成Source Map，就可以在DevTools中映射回源代码，方便调试
