这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天
前端开发调试(debug)
Debug特点
- 多平台(浏览器、Hybrid、NodeJs、小程序、桌面应用等)
- 多环境(本地开发环境、线上环境)
- 多工具(Chrome devTools、Charles、Spy-Debugger Whistle、vConsole ...)
- 多技巧(Console、BreakPoint、sourceMap、代理等)
动态修改元素和样式
选择元素(右键检查或左上角箭头) 伪类或动态状态调试:选中元素后Force State/Style栏中 filter选择 调试样式:在computed的filter中检索
console调试 console.table和console.dir(文件树展示属性)
key:给日志添加样式 %s: 字符串占位符; %o: 对象占位符; %c: 样式占位符; %d: 数字占位符
Source Tab(在sources那一栏)
断点调试(加入debugger/点击行号)
watch: 输入观测值
scope:作用域 call stack:当前js代码的调用栈
压缩后代码调试 sourcemap:抛出异常时可以调试源码的映射 打包时带有Source Map的源码，但是该文件上传到另一个监控平台，再上线不带该文件的版本
NetWork调试
Application面板(存储相关)
clear site data：清缓存
Performance面板(record录制后查看性能)
render中勾选FPS可以查看： 右上角红色即显示有性能瓶颈
Lighthouse面板(性能查看)
移动端H5调试
- 真机调试
- 代理调试
- 常用工具
企业会有云真机的调试方案
常用代理工具
- Charles: 适合查看、控制网络请求，分析数据(常用:小花瓶)
- Fiddler: 与 Charles 类似，适合 windows 平台
- spy-debugger: 远程调试手机页面，抓包
- Whistle: 基于 Node 实现的跨平台 Web 调试代 理工具
常用开发调试技巧
key:利用代理解决跨域问题 部署到线上时就不是软件做代理，而是nginx配置作为代理
标题：前端开发调试之 PC 端调试 - 掘金
