Chrome调试调试快捷键

不是我写的，作者写的真棒
原文地址 https://blog.csdn.net/crper/article/details/48098625

题记
大多浏览器的调试功能的启用快捷键都一致…按下F12;还是熟悉的味道;

或者直接

Ctrl> + Shift + J: 直接进入console面板

点击第一张截图圈圈那个进入,看到Shortcuts这个就是了….快捷键大全

快捷键大全
快捷键有这么以下几大类…且看我一一道来~~~注: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:加载时间轴数据
总结
Chrome 的debugger和style pane的快捷键和Firefox下的firebug大同小异; 就是chrome的丰富些;
写完这篇文章…没必要所有都去记忆,常用的就那么八九个;其他的鼠标点点就好了…当然,能记下来最好,
毕竟快捷键还是比鼠标高效的~~~ 翻译不容易,且记且珍惜!!

好无语…CSDN竟然不支持KBD标签!!!..我辛辛苦苦的全部套上kbd….一点效果都没!!!

作者：crper
来源：CSDN
原文：https://blog.csdn.net/crper/article/details/48098625
版权声明：本文为博主原创文章，转载请附上博文链接！

Chrome调试调试快捷键相关推荐

在Chrome 中调试Javascript
在前面的两篇文章中我们讲了如何在IE中调试Javascript和在Visual Studio中调试Javascript,在本篇内容中,我们讲一下如何在谷歌 Chrome中调试Javascript. C ...
chrome浏览器调试总结
chrome浏览器调试总结 1.如何调出浏览器调试工具 2.开发者工具初步介绍 2.1 元素(Elements) 2.2 控制台(Console) 2.3 源代码(Source) 2.4Network ...
Chrome - JavaScript调试技巧总结（浏览器调试JS）
Chrome 是 Google 出品的一款非常优秀的浏览器,其内置了开发者工具(Windows 系统中按下 F12 即可开启),可以让我们方便地对 JavaScript 代码进行调试. 为方便大家学习 ...
Android通过Chrome Inspect调试WebView
Android通过Chrome Inspect调试WebView的H5 App出现空白页面的解决方法转载自:https://www.cnblogs.com/slmk/p/7591126.html A ...
HBuilder离线打包启用Chrome Inspect调试
解决方法: 修改这个文件 assets/data/dcloud_control.xml <msc version="1.9.9.39354" debug="true ...
Android 借助Stetho在Chrome上调试Android网络、数据库、Sharedpreferences
Android 借助Stetho在Chrome上调试Android网络.数据库.Sharedpreferences 转载请标明出处:http://blog.csdn.net/zhaoyanjun6/a ...
chrome android 远程调试,chrome 远程调试
方式一: 远程调式手机的chrome浏览器 Chrome DevTools调试移动设备Brower Page Tabs/WebViews 安卓远程调试目前支持所有操作系统(Windows,Mac, L ...
实现Chrome Devtools调试JavaScript V8引擎
摘要: 最近开发小程序JavaScript的运行时,通过在客户端嵌入JavaScript V8引擎来实现.前端同学需要调试JavaScript代码,正好Chrome浏览器的Devtools是与V8的I ...
前端chrome浏览器调试总结？？
前端chrome浏览器调试总结 1.Console 代码中Console.log(),在此处看打印结果. 2.Network 请求与回复,在此处查看. 3.Sources 代码中放debugger后, ...
小花仙通过远程Chrome远程调试来高清截图
鄙人一直在竭力简化小花仙高清截图的操作步骤.这次再来尝试使用原生的Chrome远程调试来操作CDP的指令. 参考之前的文章python selenium chrome 控制devtools 一些线索将 ...

Chrome调试调试快捷键

好无语…CSDN竟然不支持KBD标签!!!..我辛辛苦苦的全部套上kbd….一点效果都没!!!

Chrome调试调试快捷键相关推荐

最新文章

热门文章