一、背景
- 主题：日常调试过程心得整理
- 目的：提高工作效率，技能查漏补缺
二、Chrome Dev Tools
打开chrome开发者工具，快捷键F12
Mac - ⌥⌘I（option+command+i）
Window - ctrl+shift+i
2.1 命令菜单
- 快捷键ctrl/command+shift+p - 切换皮肤主题/控制面板显影/截屏等等
- ctrl/command + p - Open File
2.2 五大面板
-
Element
- Device（mobile/DIY-ua）
- Search（文本定位/css选择器/Xpath)
- Css
- DOM debug - break on
-
Console
- $_ 上条语句结果
- 上一个选择的DOM节点 $0
- monitor()
-
Source
- debugger
- breakpoints & Eventlistener
- Call Stack & ignore
-
Network
- Preserve log
- throtting（截流器）
- HAR file
-
Application
- cookie/session storage/local storage
2.3 线上代码调试
- 方法1 - 搜索压缩的代码文件中的关键词
- 方法2 - sourcemap - 找到远端map文件路径 / 文件系统中导入本地map文件
2.4 浏览器插件 - vuejs devtools
- 需要vue是未压缩的
- chrome安装需要翻墙/离线包安装，edge很方便
- 定位，vuex的使用
三、配置本地vscode debug环境
3.1 chrome launch模式
新版本vscode已内置chrome debugger tools插件能力
根据说明文档添加配置即可
- 先开启chrome launch的调试
- 再vscode console中运行npm run dev
3.2 nodejs launch模式
四、移动端真机调试
vConsole/README_CN.md at dev · Tencent/vConsole (github.com)
4.1 Android + Chrome
4.2 IOS + Safari
五、个人心得
-
基础知识很重要，如事件调度原理，框架生命周期顺序等
- 单步调试多练练，自己写的代码怎么运行的，做到心中有数
- 认识常见错误类型，看到报错不慌张 - 可自行搜索前端常见错误类型
-
异步情况用断点很难定位，建议找到输入/改变状态的入口，打全日志
- 日志善用标识，如console.log('异步情况', 'funA')，console.count('异步交互')
-
未知情况，无报错
- 考虑是否拼音问题 - 可装拼写检查插件
- 考虑大块删代码缩小影响范围 - 提前做好备份
- 考虑休息会儿 - 陷入误区了，等心情好了就会有新思路的
- 求助吧，身边牛人肩膀拍一拍 - 好朋友从一起看bug开始
-
有机会多帮助他人，共同成长
- 即使自己未能帮助解决，仍可以关注最终解决方案，成长就是点点滴滴的积累
