转载:Chrome调试折腾记_(1)调试控制中心快捷键详解!!!

时间:2021-07-08 02:10:10

大多浏览器的调试功能的启用快捷键都一致…按下F12;还是熟悉的味道; 
转载:Chrome调试折腾记_(1)调试控制中心快捷键详解!!!

或者直接

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

转载:Chrome调试折腾记_(1)调试控制中心快捷键详解!!!

点击第一张截图圈圈那个进入,看到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的丰富些; 
写完这篇文章…没必要所有都去记忆,常用的就那么八九个;其他的鼠标点点就好了…当然,能记下来最好, 
毕竟快捷键还是比鼠标高效的~~~ 翻译不容易,且记且珍惜!!

 

版权声明:保留原博文链接及作者的情况下,请尽情转载吧!!!

转载:Chrome调试折腾记_(1)调试控制中心快捷键详解!!!的更多相关文章

  1. Chrome调试折腾记_(1)调试控制中心快捷键详解!!!

    转载:http://blog.csdn.net/crper/article/details/48098625 大多浏览器的调试功能的启用快捷键都一致-按下F12;还是熟悉的味道;  或者直接 Ctrl ...

  2. SQL Server 表的管理_关于事务的处理的详解(案例代码)

    SQL Server 表的管理_关于事务的处理的详解(案例代码) 一.SQL 事务 1.1SQL 事务 ●事务是在数据库上按照一定的逻辑顺序执行的任务序列,既可以由用户手动执行,也可以由某种数据库程序 ...

  3. Chrome的cookie放在哪里了,Cookie/Session机制详解

    Chrome的cookie放在哪里了,Cookie/Session机制详解:https://blog.csdn.net/u010002184/article/details/82082951

  4. [转载]Ocelot简易教程(三)之主要特性及路由详解

    上篇<Ocelot简易教程(二)之快速开始2>教大家如何快速跑起来一个ocelot实例项目,也只是简单的对Ocelot进行了配置,这篇文章会给大家详细的介绍一下Ocelot的配置信息.希望 ...

  5. Atom编辑器折腾记&lowbar;&lpar;15&rpar;JS代码片段补全&lpar;插件&colon;javascript-snippets&rpar;

    题外话 这款插件就比較重量级了-.用熟悉了写原生JS的效率要提升非常多--并且,不仅支持JS还包括了nodejs snippet javascript-snippets 插件作者: zenorocha ...

  6. Atom编辑器折腾记&lowbar;&lpar;13&rpar;JS代码智能提示补全&lpar;插件&colon;atom-ternjs&rpar;

    题外话 官方正式版尽管内置了.autocomplete-plus;最为明显的一个功能就是记忆你已经输入过的名称进行匹配; 可是针对于某些语言来说,还是有些不足的-.当中JS的补全上就明显不足了-所以须 ...

  7. &lbrack;转载&rsqb;让你玩转代码的编辑神器phpstorm功能详解

    转载网址:http://wwwquan.com/show-66-121-1.html phpstorm包含了webstorm的全部功能,更能够支持php代码.PhpStorm是一个轻量级且便捷的PHP ...

  8. Python02 标准输入输出、数据类型、变量、随记数的生成、turtle模块详解

    1 标准输出 python3利用 print() 来实现标准输出 def print(self, *args, sep=' ', end='\n', file=None): # known speci ...

  9. Chrome开发工具Elements面板&lpar;编辑DOM和CSS样式&rpar;详解

    Element 译为“元素”,Element 面板可以让我们动态查看和编辑DOM节点和CSS样式表,并且立即生效,避免了频繁切换浏览器和编辑器的麻烦. 我们可以使用Element面板来查看源代码,它不 ...

随机推荐

  1. 【代码笔记】iOS-旋转的风扇

    一,效果图. 二,工程图. 三,代码. AppDelegate.m #import "AppDelegate.h" //加入头文件 #import "RoundDiskV ...

  2. jQuery中事件绑定到bind、live、delegate、on方法的探究

    1. 给页面上的某个元素绑定事件,最初采用下面的方式实现: $(‘selector’).click(function(){ //code }); 缺点: 不能同时绑定多个事件,不能绑定动态的元素. 后 ...

  3. Python Set Literals

    现有3种方式创建set() >>> def f(): ... return set([1, 2, 3]) ... >>> def h(): ... return s ...

  4. linux 学习 12 服务管理

      第十二讲 Linux服务管理 12.1 Linux服务管理-服务分类 ——Linux服务 ----RPM包默认安装的服务 ————独立的服务 ————基于xinetd服务 ----源码包安装的服务 ...

  5. 加载状态为complete时移除loading效果

    一.JS代码: //获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = docum ...

  6. Mysql迁移工具在生产环境下的使用

    在产品迭代开发发布过程中,由于业务需求的增加,数据库难免会有结构调整等操作. 在每个版本发布过程中怎么控制每个版本server端程序与数据库版本保持一致,以及数 据库升级.回滚等操作. 本博文宅鸟将向 ...

  7. jquery属性选择器中&vert;value和&Hat;value的区别

    jquery的属性选择中有两个比较混淆:一个是[attribute^value], 另一个是[attribute|value]. 先看解释: [attribute^value]:选取属性的值以valu ...

  8. django - get&lowbar;or&lowbar;create&lpar;&rpar; 使用提醒

    [omron - debug] user_id建表的时候,不能使用unique,因为一个用户,可能有多个product_id,相对应的是,get_or_create()中的查询参数,如果在建表中有un ...

  9. 关于winform主题IrisSkin2的编写

    第一步:首先引用IrisSkin2.dll. 第二步自定义类: /// <summary> /// 窗体主题边界类 /// </summary> public class Fo ...

  10. 彩色图像--色彩空间 HSI&lpar;HSL&rpar;、HSV&lpar;HSB&rpar;

    得知DIP文章66日 转载请注明文章出处:http://blog.csdn.net/tonyshengtan ,出于尊重文章作者的劳动,转载请标明出处!文章代码已托管.欢迎共同开发:https://g ...