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


发表评论