⌨️ 快捷键

Chrome DevTools

Chrome DevTools Cheat Sheet - 快速参考指南，收录常用语法、命令与实践。

📂 分类 · 快捷键🧭 Markdown 速查🏷️ 2 个标签

#chrome#debug

向下滚动查看内容

Keyboard Shortcuts

Opening DevTools

Shortcut	Action
`Ctrl` `Shift` `I`	Open whatever panel you used last
`Ctrl` `Shift` `J`	Open the Console panel
`Ctrl` `Shift` `C`	Open the Elements panel

{.shortcuts}

Global Shortcuts

Shortcut	Action
`F1`	Show Settings
`Ctrl` `]`	Focus the next panel
`Ctrl` `[`	Focus the previous panel
`Ctrl` `Shift` `D`	Switch back to whatever docking position you last used
`Ctrl` `Shift` `M`	Toggle Device Mode
`Ctrl` `Shift` `C`	Toggle Inspect Element Mode
`Ctrl` `Shift` `P`	Open the Command Menu
`Esc`	Toggle the Drawer
`Ctrl` `R`	Normal reload
`Ctrl` `Shift` `R`	Hard reload
`Ctrl` `F`	Search for text within the current panel
`Ctrl` `Shift` `F`	Opens the Search tab in the Drawer
`Ctrl` `P`	Open a file in the Sources panel
`Ctrl` `Shift` `+`	Zoom in
`Ctrl` `-`	Zoom out
`Ctrl` `0`	Restore default zoom level
`Ctrl` `O` `!`	Run snippet

{.shortcuts}

Elements Panel

Shortcut	Action
`Ctrl` `Z`	Undo change
`Ctrl` `Y`	Redo change
`Up/Down`	Select the element above or below the currently-selected element
`Right`	Expand the currently-selected node
`Left`	Collapse the currently-selected node
`Enter`	Toggle Edit Attributes mode on the currently-selected element
`Tab`	Select the next attribute after entering Edit Attributes mode
`Shift` `Tab`	Select the previous attribute after entering Edit Attributes mode
`H`	Hide the currently-selected element
`F2`	Toggle Edit as HTML mode on the currently-selected element

{.shortcuts}

Sources Panel

Shortcut	Action
`Ctrl` `\`	Pause script execution (if running), or resume (if paused)
`Ctrl` `'`	Step over next function call
`Ctrl` `;`	Step into next function call
`Ctrl` `Shift` `;`	Step out of current function
`Ctrl` `./,`	Select the call frame below or above the currently-selected frame
`Ctrl` `S`	Save changes to local modifications
`Ctrl` `Alt` `S`	Save all changes
`Ctrl` `G`	Go to line
`Alt` `W`	Close the active tab

{.shortcuts}

Code Editor

Shortcut	Action
`Ctrl` `Del`	Delete all characters in the last word, up to the cursor
`Ctrl` `M`	Go to matching bracket
`Ctrl` `/`	Toggle single-line comment
`Ctrl` `D`	Select the next occurrence of whatever word the cursor is on
`Ctrl` `U`	Deselect the next occurrence of whatever word the cursor is on

{.shortcuts}

Performance Panel

Shortcut	Action
`Ctrl` `E`	Start or stop recording
`Ctrl` `S`	Save recording
`Ctrl` `O`	Load recording

{.shortcuts}

Memory Panel

Shortcut	Action
`Ctrl` `E`	Start or stop recording

{.shortcuts}

Console Panel

Shortcut	Action
`Tab`	Accept autocomplete suggestion
`Esc`	Reject autocomplete suggestion
`Up`	Get previous statement
`Down`	Get next statement
`Ctrl` <code>`</code>	Focus the Console
`Ctrl` `L`	Clear the console
`Shift` `Enter`	Force a multi-line entry
`Enter`	Execute

{.shortcuts}

Also see

Keyboard shortcuts for Chrome DevTools (developers.google.com)

相关 Cheat Sheets

1v1免费职业咨询

We Accept

Top Categories

Web全栈班 DevOps项目班数据工程全栈班数据分析项目班编程入门班 Business Analyst实习算法集训营

求职就业

BA和产品经理实习数据科学实习数据分析实习 Marketing实习简历修改面试指导导师指导VIP

地址

Level 10b, 144 Edward Street, Brisbane CBD(Headquarter)

Level 2, 171 La Trobe St, Melbourne VIC 3000

四川省成都市武侯区桂溪街道天府大道中段500号D5东方希望天祥广场B座45A13号

Business Hub, 155 Waymouth St, Adelaide SA 5000

联系方式

hello@jiangren.com.au 0421-672-555

Disclaimer

JR Academy acknowledges Traditional Owners of Country throughout Australia and recognises the continuing connection to lands, waters and communities. We pay our respect to Aboriginal and Torres Strait Islander cultures; and to Elders past and present. Aboriginal and Torres Strait Islander peoples should be aware that this website may contain images or names of people who have since passed away.

ABN 26621887572

Chrome DevTools

Keyboard Shortcuts

Also see

相关 Cheat Sheets

VS Code

Figma

GitHub

Slack

IntelliJ IDEA