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 right Ctrl + ] 命令 + ] 全部
Go the previous panel in left Ctrl + [ 命令 + [ 全部
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 + D Cmd + Shift + D 全部
Change device mode to mobile or desktop Ctrl + Shift + M Cmd + Shift + M 全部
Open developer tools with Elements tab (Same as right clicking and selecting Inspection Element) Ctrl + Shift + C Cmd + Shift + C 全部
Open Command Prompt inside developer tools Ctrl + Shift + P Cmd + Shift + P 全部
Show or hide drawer 逃脱 逃脱 全部
Reload webpage F5 或 Ctrl + R Cmd + R 全部
Force reload webpage Ctrl + F5 或 Ctrl + Shift + R Cmd + Shift + R 全部
Search in the current panel Ctrl + F Cmd + F 全部
Search from drawer Ctrl + Shift + F Cmd + 选项 + F 全部
Select and open a file in Sources panel Ctrl + O 或 Ctrl + P Cmd + O 或 Cmd + P 全部
Zoom in Ctrl + Shift + + Cmd + Shift + + 全部
Zoom out Ctrl + – 命令 + – 全部
Default zoom Ctrl + 0 命令 + 0 全部
Undo last edit Ctrl + Z Cmd + Z 元素
Redo last edit Ctrl + Y Cmd + 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 node Ctrl + Alt + 单击元素的箭头图标 Option + 单击元素的箭头图标 元素
Edit the selected node 进入 进入 元素
Go to previous or next node in edit mode Tab / Shift + Tab Tab / Shift + Tab 元素
Hide the currently-selected element H H 元素
Edit the selected node as HTML F2 Fn + F2 元素
Go to the source code of the property 控制 + 单击属性 Command + 单击属性 元素 > 样式
Toggle RBGA, HSLA, and Hex values Shift + 单击颜色预览图标 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 script F8 或 Ctrl + F8 或 Cmd + 来源
Step over next function call F10 或 Ctrl + ‘ F10 或 Cmd + ‘ 来源
Step into next function call F11 或 Ctrl + ; F11 或 Cmd + ; 来源
Step out of current function Shift + F11 或 Ctrl + Shift + ; Shift + F11 或 Cmd + Shift + ; 来源
Run code when paused Ctrl + 单击代码行 Cmd + 单击代码行 来源
Select the call frame above or below Ctrl + 。/ Ctrl + , Ctrl + 。/ Ctrl + , 来源
Save changes Ctrl + S Cmd + S 来源
Save all changes Ctrl + Alt + S Cmd + 选项 + S 来源
Open go to line pop-up Ctrl + G Ctrl + G 来源
Go to Current Open File Line Number Ctrl + O,输入:然后是行号,然后按回车。 Cmd + O,输入:然后是行号,然后按回车。 来源
Go to Current Open File Column Number Ctrl + O + : + 行号 + 列号 + Enter Cmd + O + : + 行号 + 列号 + Enter 来源
Close active tab Alt + W 选项 + W 来源
Delete characters till cursor position in the last word Ctrl + 删除 选项 + 删除 代码编辑器
Google code breakpoint 选择行 + Ctrl + B 选择行 + Cmd + B 代码编辑器
Find closing bracket Ctrl + M Ctrl + M 代码编辑器
Add Comment Ctrl + / 命令 + / 代码编辑器
Select the highlighted word Ctrl + D Cmd + D 代码编辑器
De-select the highlighted word Ctrl + U Cmd + U 代码编辑器
Toggle recording Ctrl + E Cmd + E 性能/内存
Save recording Ctrl + S Cmd + S 表现
Load recording Ctrl + O Cmd + O 表现
Accept Autocomplete 右箭头或 Tab 右箭头或 Tab 控制面板
Reject Autocomplete 逃脱 逃脱 控制面板
Previous statement 向上箭头 向上箭头 控制面板
Next statement 向下箭头 向下箭头 控制面板
Focus Console Ctrl + ` Ctrl + ` 控制面板
Clear Console Ctrl + L Cmd + K 或 Option + L 控制面板
Force multiple line entry Shift + Enter Cmd + 返回 控制面板
Run 进入 返回 控制面板
Collapse object Alt + 单击 展开 选项 + 单击展开 控制面板
 

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

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