Back

chrome console 的快捷键 ( shortcuts in chrome developer tools)

发布时间: 2015-01-12 23:20:00

refer to: F12 -> 小齿轮 -> 点击 shortcuts 就是。 也可以看:  https://developer.chrome.com/devtools/docs/shortcuts

几个我最想要的功能:

console 下: 使用 代码补全:  ->

切换各个小tab:  ctrl + [, ctrl + ]

style下, 增加、减少数值: shift + up/down (每次加10) 

Keyboard Shortcuts

The DevTools has several built-in shortcut keys that developers can use to save time in their day to day workflow. Outlined below is each shortcut and the corresponding key for each on Windows/Linux and Mac. While some shortcuts are globally available across all of the DevTools, others are specific to a single panel, and are broken up based on where it can be used.

To access the DevTools, on any web page or app in Google Chrome you can use one of these options:

  • Open the Chrome menu Chrome menu at the top-right of your browser window, then select Tools > Developer Tools.
  • Right-click on any page element and select Inspect Element.
Windows / Linux Mac
Open Developer Tools F12, Ctrl + Shift + I Cmd + Opt + I
Open / switch from inspect element mode and browser window Ctrl + Shift + C Cmd + Shift + C
Open Developer Tools and bring focus to the console Ctrl + Shift + J Cmd + Opt + J
Inspect the Inspector (undock first one and press) Ctrl + Shift + I Cmd + Opt + I

To open up the General Settings dialog type ? or F1 when the Developer Tools window is open. Press Esc to close the settings dialog.

Windows / Linux Mac
Show General Settings dialog ?, F1 ?
Next panel Ctrl + ] Cmd + ]
Previous panel Ctrl + [ Cmd + [
Backward in panel History Ctrl + Alt + [ Cmd + Alt + [
Forward in panel history Ctrl + Alt + ] Cmd + Alt + ]
Open Device Mode (v38+) Ctrl + Shift + M Cmd + Shift + M
Toggle Console / close settings dialog when open Esc Esc
Refresh the page F5, Ctrl + R Cmd + R
Refresh the page ignoring cached content Ctrl + F5, Ctrl + Shift + R Cmd + Shift + R
Text search within current file or panel Ctrl + F Cmd + F
Text search across all sources Ctrl + Shift + F Cmd + Alt + F
Search by filename (except on Timeline) Ctrl + O, Ctrl + O Cmd + O, Cmd + O
Zoom in (while focused in DevTools) Ctrl + + Shift + +
Zoom out Ctrl + - Shift + -
Restore default text size Ctrl + 0 Shift + 0
Windows / Linux Mac
Undo change Ctrl + Z Cmd + Z
Redo change Ctrl + Y Cmd + Y, Cmd + Shift + Z
Navigate Up, Down Up, Down
Expand / collapse node Right, Left Right, Left
Expand node Single-click on tag Single-click on tag
Expand / collapse node and all its children Ctrl + Alt + Click on arrow icon Opt + Click on arrow icon
Edit attribute Enter, Double-click on attribute Enter, Double-click on attribute
Hide element H H
Toggle edit as HTML F2

Right-clicking an element you can:

  • Force element pseudo states: (:active, :hover, :focus, :visited)
  • Set breakpoints on the elements: (Subtree modifications, Attribute modification, Node removal)
  • Clear console
Windows / Linux Mac
Edit rule Single-click Single-click
Insert new property Single-click on whitespace Single-click on whitespace
Go to line of style rule property declaration in source Ctrl + Click on property Cmd + Click on property
Go to line of property value declaration in source Ctrl + Click on property value Cmd + Click on property value
Cycle through the color definition value Shift + Click on color picker box Shift + Click on color picker box
View auto-complete suggestions Ctrl + Space Cmd + Space
Edit next / previous property Tab, Shift + Tab Tab, Shift + Tab
Increment / decrement value Up, Down Up, Down
Increment / decrement value by 10 Shift + Up, Shift + Down Shift + Up, Shift + Down
Increment / decrement value by 10 PgUp, PgDown PgUp, PgDown
Increment / decrement value by 100 Shift + PgUp, Shift + PgDown Shift + PgUp, Shift + PgDown
Increment / decrement value by 0.1 Alt + Up, Alt + Down Opt + Up, Opt + Down

Element Pseudostates Emulate an element's pseudo state (:active, :hover, :focus, :visited)

Adding style selectors Add new style selectors

Windows / Linux Mac
Pause / resume script execution 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 + ;
Select next call frame Ctrl + . Opt + .
Select previous call frame Ctrl + , Opt + ,
Toggle breakpoint condition Click on line number, Ctrl + B Click on line number, Cmd + B
Edit breakpoint condition Right-click on line number Right-click on line number
Delete individual words Alt + Delete Opt + Delete
Comment a line or selected text Ctrl + / Cmd + /
Save changes to local modifications Ctrl + S Cmd + S
Save all changes Ctrl + Alt + S Cmd + Opt + S
Go to line Ctrl + G Ctrl + G
Search by filename Ctrl + O Cmd + O
Jump to line number Ctrl + P + :<number> Cmd + P + :<number>
Jump to column Ctrl + O + :<number> + :<number> Cmd + O + :<number> + :<number>
Go to member Ctrl + Shift + O Cmd + Shift + O
Toggle console and evaluate code selected in Sources panel Ctrl + Shift + E Cmd + Shift + E
Close active tab Alt + W Opt + W
Run snippet Ctrl + Enter Cmd + Enter
Toggle comment Ctrl + / Cmd + /

Pause on Exception Button Don't pause on exceptions

Pause on All Exceptions Pause on All exceptions (including those caught within try/catch blocks)

Pause on Uncaught Exceptions Pause on uncaught exceptions (usually the one you want)

Windows / Linux Mac
Start / stop recording Ctrl + E Cmd + E
Save timeline data Ctrl + S Cmd + S
Load timeline data Ctrl + O Cmd + O
Windows / Linux Mac
Start / stop recording Ctrl + E Cmd + E
Windows / Linux Mac
Next suggestion Tab Tab
Previous suggestion Shift + Tab Shift + Tab
Accept suggestion Right Right
Previous command / line Up Up
Next command / line Down Down
Focus the Console Ctrl + ` Ctrl + `
Clear Console Ctrl + L Cmd + K, Opt + L
Multi-line entry Shift + Enter Ctrl + Return
Execute Enter Return

Right-clicking on console:

  • XMLHTTPRequest logging: Turn on to view the XHR log
  • Preserve log upon navigation
  • Filter: Hide and unhide messages from script files
  • Clear console: Clear all console messages
Windows / Linux Mac
Pinch zoom in and out Alt + Scroll,Ctrl + Cick and drag with two fingers Opt + Scroll, Cmd + Cick and drag with two fingers
Inspect element tool Ctrl + Shift + C Cmd + Shift + C
Windows / Linux Mac
Pinch zoom in and out Shift + Scroll Shift + Scroll

Here are some additional Chrome shortcuts which are useful for general use within the browser not specific to the DevTools. View all Chrome shortcuts for Windows, Mac, and Linux.

Windows / Linux Mac
Find next Ctrl + G Cmd + G
Find previous Ctrl + Shift + G Cmd + Shift + G
Open a new window in Incognito mode Ctrl + Shift + N Cmd + Shift + N
Toggle Bookmarks bar on and off Ctrl + Shift + B Cmd + Shift + B
View the History page Ctrl + H Cmd + Y
View the Downloads page Ctrl + J Cmd + Shift + J
View the Task Manager Shift + ESC Shift + ESC
Next page in a tabs browsing history Alt + Right Alt + Right
Previous page in a tabs browsing history Backspace, Alt + Left Backspace, Alt + Left
Highlight content in the web address area F6, Ctrl + L, Alt + D Cmd + L, Alt + D
Places a ? in the address bar for performing a keyword
search using your default search engine
Ctrl + K, Ctrl + E Cmd + K, Cmd + E

Back