文章目录
前端程序调试方法总结–初级版
前端程序调试方法总结–高级版
快捷键大全
快捷键有这么以下几大类…且看我一一道来~~~注:All pane是全局快捷键
Console()
- Ctrl + L : 清除控制台消息
- Tab : 自动完成通用常缀
- →: 接受建议
- Ctrl + U: 清除console的提示!!(实操查看源代码!!)
- ↓ / ↑ :选中下一行/上一行
- Enter: 执行代码或者命令
Debugger(调试面板)
- F8 or Ctrl + : 暂停/继续
- F10 or Ctrl + ': 单步执行
- F11 or Ctrl +;: 单步进入
- Shift + F11 or Ctrl + Shift+;: 单步退出
- Ctrl +./Ctrl+, : 上一帧/下一帧(译为框架怪怪的)
- Ctrl +Shift+E: 被选中代码在控制台中打印出console信息**(非常实用)**
- Ctrl + Shift + A: 添加到debugger的watch里面,可以关注你选中内容的变化
- Ctrl + B: 打断点/取消断点**(很实用)**
Text Editor(文本编辑器)
- Ctrl + Shift+P : 跳转到某个成员(不知鸟用)
- Ctrl + Space: 自动完成
- Ctrl + G : 跳转到某行
- Ctrl + Shift + E
- Alt + -: 跳转到之前的编辑位置
- Alt + +: 跳转到下一个编辑的位置
- Ctrl + /: 快捷键注释
- Alt + ↑: 调整CSS度量单位,每次增加一个单元
- Alt + ↓: 调整CSS度量单位,每次减少一个单元
- Alt + PageUp: 调整CSS度量单位,每次增加10个单元
- Alt + PageDown: 调整CSS度量单位,每次减少10个单元
- Ctrl + D: 选择选中内容的下一个匹配内容
- Ctrl + U: 软撤销
- Ctrl + M: 进入匹配的括号
- Alt + W: 关闭编辑便签
- Alt + O: 切换相同名字的或者不同后缀的文件
All Panels(所有面板)
- Ctrl + [ / Ctrl + ]:切换面板(向左向右)
- Ctrl + Shift + [ / Ctrl + Shift+] : 返回之前之后的面板状态
- Ctrl + Tilde[~]:显示Console
- Esc: 小菜单弹出隐藏
- Ctrl + Shift + M: 进入仿真设备模式(移动平板屏幕)
- Ctrl + Shift + D: 切换调试面板在底部还是侧边栏展示
- Ctrl + F: 搜索内容
- Ctrl + Shift + F: 在所有代码中搜索(跨域),很实用
- Ctrl + Shift + C: 选择页面节点并且查看代码,最常用!!
- Ctrl + P: 快速切换源码文件,很常用!
Style Pane(风格面板)
- Tab / Shift + Tab: 下一个/上一个属性
- ↑: 增加CSS度量单位->1单元
- ↓:减少CSS度量单位->1单元
- PageUporShift + ↑:增加CSS度量单位->10单元
- PageDownorShift + ↓:减少CSS度量单位->10单元
- Shift + PageUp:增加CSS度量单位->100单元
- Shift + PageDown:减少CSS度量单位->100单元
- Alt + ↑:增加CSS度量单位->0.1单元
- Alt + ↓:减少CSS度量单位->0.1单元
Timeline Panel(时间轴面板)
- Ctrl + E:开始
- Ctrl + S:保存时间轴数据
- Ctrl + O:加载时间轴数据
总结比较常用的
- Ctrl + L : 清除控制台消息
- Tab : 自动完成通用常缀
- Shirt+enter：在控制台的时候可以换行
- F8 : 暂停/继续
- F9 : 单步执行
- F10 会进入自己的方法
- F11 : 强制单步进入某方法/源码
- Shift + F11 : 单步退出
- Ctrl +Shift+E: 被选中代码在控制台中打印出console信息(非常实用)
- Ctrl + Shift + A: 添加到debugger的watch里面,可以关注你选中内容的变化
- Alt + W: 关闭编辑便签
- Ctrl + F: 搜索内容
- Ctrl + Shift + F: 在所有代码中搜索(跨域),很实用
- Ctrl + Shift + C: 选择页面节点并且查看代码,最常用!!
- Ctrl + P: 快速切换源码文件,很常用!
- Ctrl+shirt+delete：清除缓存
- 重新发起XHR请求。进入network面板，右键需要发起的请求、replay XHR（针对有些请求没有绑定事件）
- 通过console面板查看全局变量相关的代码，输入想要执行的方法
- 通过请求查看发出请求的函数调用栈，将鼠标移至需要查看请求的initiator处，就可以看到调用这个请求的全过程。然后如果是ajax请求，一般就在ajax的上面一层。
- 利用watch中查看当前的局部变量和全局变量，我们也可以直接修改代码，然后ctrl+s保存，然后运行的就是我们修改之后的代码了。（vue全局要带this.）
- 调试利用Call Stack，查看某个函数调用栈。
- 点击某个链接是新页面时，要在network查看发起的请求，可以在新页面刷新F5（比如点击详情跳转新页面）
- 双击network里面发起的请求，可以打开一个独立的页面查看
另外再说个浏览器小技巧：
查看密码： 有些网站登陆的时候，密码右边有个眼睛图标，点击可以看到登录密码，是如何实现的呢？它是通过调用js将该文本框的属性从password改为text，所以我们选中后点击这个type改为text即可查看你实际的密码
参考文章:
https://www.cnblogs.com/lishanyang/p/7767135.html
