Chrome开发者工具键盘快捷键


Chrome开发者工具键盘快捷键

由于开发人员友好的界面,谷歌浏览器很受欢迎。即使是普通用户也可以使用 Chrome 开发者工具检查页面源并检查页面上的元素。我们在之前的文章中已经解释了如何使用Chrome 开发者工具。在本文中,让我们为 Chrome 开发者工具提供 60 多个键盘快捷键,以更快地导航和获取内容。

推荐:如何修复Windows无法访问指定的设备路径文件错误

打开 Chrome 开发者工具

有很多方法可以在 Chrome 中启动开发者工具部分。

在 Chrome Windows 上

  • 按 F12 键。
  • 使用“Control + Alt + I”键盘快捷键。
  • 右键单击任何区域并选择“检查元素”。
  • 转到三点按钮菜单并导航到“更多工具 > 开发人员工具”。

在 Chrome Mac 上

  • 按“Option + Command + I”快捷键s。
  • 转到三点菜单按钮并导航到“更多工具 > 开发人员工具”。
  • 单击“查看”菜单,然后转到“开发人员 > 开发人员工具”。
  • 右键单击浏览器内容区域并选择“检查元素”选项。

访问Chrome开发者工具快捷方式

请记住Google Chrome 浏览器快捷方式和开发者工具快捷方式是不同的。您需要小心使用快捷方式,因为它可能会更改开发人员工具的视图。例如,按“Control and +”或“Command and +”将增加浏览器的缩放比例。但是,在开发者工具中使用相同的快捷方式时,只会增加开发者工具部分的缩放。您可以再次按“Control 和 -”或“Command 和 -”键来降低缩放级别。

启动 Chrome 浏览器后,按照以下说明访问Chrome开发者工具快捷方式部分:

  • 单击开发人员工具部分上的三个点按钮。请记住,这不是浏览器右上角的自定义菜单。
  • 您可以在那里看到有用的Chrome开发者工具快捷方式列表。

Windows 和 Mac 中 Chrome开发者工具快捷方式

以下是 Windows 和 Mac 中 Chrome开发者工具快捷方式。

描述Windows 快捷方式Mac 快捷方式控制板
Go to settings? 或 F1? 或 Fn + F1全部
Go to next panel in rightCtrl + ]命令 + ]全部
Go the previous panel in leftCtrl + [命令 + [全部
Toggle developer tools to previously used position. If you have not changed the position, then it will move the developer tools to a separate window.Ctrl + Shift + DCmd + Shift + D全部
Change device mode to mobile or desktopCtrl + Shift + MCmd + Shift + M全部
Open developer tools with Elements tab (Same as right clicking and selecting Inspection Element)Ctrl + Shift + CCmd + Shift + C全部
Open Command Prompt inside developer toolsCtrl + Shift + PCmd + Shift + P全部
Show or hide drawer逃脱逃脱全部
Reload webpageF5 或 Ctrl + RCmd + R全部
Force reload webpageCtrl + F5 或 Ctrl + Shift + RCmd + Shift + R全部
Search in the current panelCtrl + FCmd + F全部
Search from drawerCtrl + Shift + FCmd + 选项 + F全部
Select and open a file in Sources panelCtrl + O 或 Ctrl + PCmd + O 或 Cmd + P全部
Zoom inCtrl + Shift + +Cmd + Shift + +全部
Zoom outCtrl + –命令 + –全部
Default zoomCtrl + 0命令 + 0全部
Undo last editCtrl + ZCmd + Z元素
Redo last editCtrl + YCmd + Shift + Z元素
Move up or down to select codes and highlight corresponding elements on the page向上箭头/向下箭头向上箭头/向下箭头元素
Expand the node or go to the first element右箭头右箭头元素
Collapse the node or go to the parent node左箭头左箭头元素
Show or hide all nodes from the parent nodeCtrl + Alt + 单击元素的箭头图标Option + 单击元素的箭头图标元素
Edit the selected node进入进入元素
Go to previous or next node in edit modeTab / Shift + TabTab / Shift + Tab元素
Hide the currently-selected elementHH元素
Edit the selected node as HTMLF2Fn + F2元素
Go to the source code of the property控制 + 单击属性Command + 单击属性元素 > 样式
Toggle RBGA, HSLA, and Hex valuesShift + 单击颜色预览图标Shift + 单击颜色预览图标元素 > 样式
Go to next property or value or create a new line单击属性+选项卡单击属性+选项卡元素 > 样式
Go to previous property or value or create a new line单击属性和 Shift + Tab单击属性和 Shift + Tab元素 > 样式
Increase or decrease value by 0.1单击一个值 + Alt + 向上或向下箭头单击一个值 + Option + 向上或向下箭头元素 > 样式
Increase or decrease value by 0.1单击一个值 + 向上或向下箭头单击一个值 + 向上或向下箭头元素 > 样式
Increase or decrease value by 10单击一个值 + Shift + 向上或向下箭头单击一个值 + Shift + 向上或向下箭头元素 > 样式
Increase or decrease value by 100单击一个值 + Ctrl + 向上或向下箭头单击一个值 + Cmd + 向上或向下箭头元素 > 样式
Run or pause scriptF8 或 Ctrl +F8 或 Cmd +来源
Step over next function callF10 或 Ctrl + ‘F10 或 Cmd + ‘来源
Step into next function callF11 或 Ctrl + ;F11 或 Cmd + ;来源
Step out of current functionShift + F11 或 Ctrl + Shift + ;Shift + F11 或 Cmd + Shift + ;来源
Run code when pausedCtrl + 单击代码行Cmd + 单击代码行来源
Select the call frame above or belowCtrl + 。/ Ctrl + ,Ctrl + 。/ Ctrl + ,来源
Save changesCtrl + SCmd + S来源
Save all changesCtrl + Alt + SCmd + 选项 + S来源
Open go to line pop-upCtrl + GCtrl + G来源
Go to Current Open File Line NumberCtrl + O,输入:然后是行号,然后按回车。Cmd + O,输入:然后是行号,然后按回车。来源
Go to Current Open File Column NumberCtrl + O + : + 行号 + 列号 + EnterCmd + O + : + 行号 + 列号 + Enter来源
Close active tabAlt + W选项 + W来源
Delete characters till cursor position in the last wordCtrl + 删除选项 + 删除代码编辑器
Google code breakpoint选择行 + Ctrl + B选择行 + Cmd + B代码编辑器
Find closing bracketCtrl + MCtrl + M代码编辑器
Add CommentCtrl + /命令 + /代码编辑器
Select the highlighted wordCtrl + DCmd + D代码编辑器
De-select the highlighted wordCtrl + UCmd + U代码编辑器
Toggle recordingCtrl + ECmd + E性能/内存
Save recordingCtrl + SCmd + S表现
Load recordingCtrl + OCmd + O表现
Accept Autocomplete右箭头或 Tab右箭头或 Tab控制面板
Reject Autocomplete逃脱逃脱控制面板
Previous statement向上箭头向上箭头控制面板
Next statement向下箭头向下箭头控制面板
Focus ConsoleCtrl + `Ctrl + `控制面板
Clear ConsoleCtrl + LCmd + K 或 Option + L控制面板
Force multiple line entryShift + EnterCmd + 返回控制面板
Run进入返回控制面板
Collapse objectAlt + 单击 展开选项 + 单击展开控制面板
 

推荐:WordPress自动新闻帖子生成器插件Newsomatic

[新春采购季]京东云 服务器2核2G 51元起/年 点这里优惠购买
[新春采购季]阿里云 服务器2核2G 61元起/年 点这里优惠购买
[新春采购季]腾讯云 云服务器2核2G 61起/年 点这里优惠购买
感谢您的来访,获取更多精彩文章请Ctrl+D收藏本站。
更多精彩文章,请收藏本站
本文为【软件乐园】原创文章
转载请附上原文链接:https://app.qiip.cc/archives/4619
本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长删除处理。
本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
THE END
分享
二维码
< <上一篇
下一篇>>