文章目录
前端程序调试方法总结--初级版前端程序调试方法总结--高级版快捷键大全Console()Debugger(调试面板)Text Editor(文本编辑器)All Panels(所有面板)Style Pane(风格面板)Timeline Panel(时间轴面板)总结比较常用的
前端程序调试方法总结–初级版
前端程序调试方法总结–高级版
快捷键大全
快捷键有这么以下几大类…且看我一一道来~~~注: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 + EAlt + -: 跳转到之前的编辑位置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[~]:显示ConsoleEsc: 小菜单弹出隐藏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