当前位置：网站首页>Chrome developer tool shortcut key reference to improve development efficiency

Chrome developer tool shortcut key reference to improve development efficiency

2022-07-20 09:48:00 【Yun Qi】

The article comes from a personal blog https://knightyun.github.io/2020/05/23/tools-devtool-shortcut, Reprint please state

This article only introduces Chrome Some main and commonly used shortcut keys , In the developer tools of other browsers, it can be compared , Most shortcut keys work the same , Only individual differences .

overall situation （ All panels ）

function Shortcut key describe
Open developer tools F12 / Ctrl + Shift + I Normal open
open ConsoleCtrl + Shift + J Open the tool and enter Console panel
Check elements Ctrl + Shift + C Get into Elements Start selecting page elements after the panel
Developer tool settings ?/F1 All relevant settings of developer tools
Switch to the previous panel Ctrl + [ Switch one panel to the left
Switch to the next panel Ctrl + ] Switch one panel to the right
Switch tool docking position Ctrl + Shift + D That is, the docking position of the entire tool relative to the browser , Specific in suspension 、 left 、 On the right side 、 Which two at the bottom switch , Depends on the last two operations
Switch device mode Ctrl + Shift + M Switch between normal mode and responsive device editing mode
Switch drawer toolbar Esc Toggle the pop-up toolbar at the bottom of the display tool , Such as Console etc.
Refresh web page F5/Ctrl + R Normal refresh page , Will read memory cache and disk cache
Forced to refresh Ctrl + F5/Ctrl + Shift + R Disable cache refresh , Similar to checking disable cache Post refresh
Search in the current panel Ctrl + F Search text in the current panel , Such as Elements, Console etc.
Search all resources Ctrl + Shift + F All resources loaded on the current web page （Sources） Search for text
Search by filename Ctrl + O/Ctrl + P Also search all resources , Only the search object is limited to the file name
Enlarge the font Ctrl + + Enlarge the font and graphics of the entire developer tool （ Excluding web pages ）
Reduce the font size Ctrl + - Reduce the size of developer tools fonts and graphics
Restore font size Ctrl + 0 Restore the font and graphic size of the developer tool to the default size

Elements（ Elements ） panel

function Shortcut key describe
Undo changes Ctrl + Z Undo right HTML Modification of content
Redo the changes Ctrl + Y Restore the changes before revocation
Expand nodes →（ Right Arrow ） Expand the currently collapsed HTML Element nodes
Fold nodes ←（ Left key ） Collapse the currently expanded HTML Element nodes
Recursively expand nodes Alt + → Recursively expand the currently collapsed HTML Element nodes
Recursively collapse nodes Alt + ← Recursively collapse the currently expanded HTML Element nodes
Edit node attributes Enter Edit the attribute value of the element node （ Of the first attribute ）
Edit the next attribute Tab Press down Enter After editing the attribute , Press Tab You can switch to the following properties in turn
Edit the last attribute Shift + Tab Switch to the previous attribute value of the current element node to edit
Hide nodes H Hide the current element node in the page , The essence is to set visibility: hidden !important; style
edit HTMLF2 With HTML Edit the content of the current element node in the form of , Similar to the right-click menu Edit as HTML
Edit source style Ctrl + Click on Style（ style ） In the bar ,Ctrl + Mouse click CSS The rules （ Selectors 、 Attribute or attribute value ） when , It will jump to the corresponding location of the source file
Switch color types Shift + Click on Shift + Click the color selection box on the left of the style color value , The color value type will be in #, rgb(), hls() Switch between
increase / Minus value ↑/↓（ On 、 Down key ） Single increase / Reduce the size to 1 Company
0.1 Multiply / Impairment Alt + ↑/Alt + ↓ Single increase / reduce 0.1 Times the unit value
10 Multiply / Impairment Shift + ↑/Shift + ↓ Single increase / reduce 10 Times the unit value
100 Multiply / Impairment Ctrl + ↑/Ctrl + ↓ Single increase / reduce 100 Times the unit value

Console（ Console ） panel

function Shortcut key describe
Clear output Ctrl + L Clear the historical output of the console
Focus on input Ctrl + `（ The quotation marks ） Focus the input focus on the console input box , Open when used in other panels Console Drawer bar
Take the advice Enter/→ Accept the first suggestion of the code prompt
Switch command ↑/↓ Switch up / Next history input command
Run code Enter Enter to run the entered code
Line feed Shift + Enter Because the direct carriage return is to run the code , Therefore, you need to add Shift

Sources（ resources ） panel

function Shortcut key describe
Execute the script F8/Ctrl + \ Switch between executing or pausing scripts
Step by step F10/Ctrl + '（Debugger In the bar ） Single step debugging script
Step in F11/Ctrl + ; Step into debugging （ When you encounter a function, jump into ）
Step out Shift + F11/Ctrl + Shift + ; Step out debugging （ step out ）
Next call frame Ctrl + .（ English full stop ） Switch to the call stack when debugging （Call Stack bar ） The next frame in the current frame
Last call frame Ctrl + ,（ English comma ） When debugging, switch to the frame above the current call （ If it is currently at the top of the stack, ignore ）
Output variable value Ctrl + Shift + E The value of the variable selected in the console output editor
Observe the variable value Ctrl + Shift + A Add the variable value selected in the editor to Watch In the bar
Switch breakpoints Ctrl + B When the focus is in the code editor , Used to switch whether the current line is set as a breakpoint
Toggle enable breakpoints Ctrl + Shift + B Switch whether the breakpoint of the current line is enabled （ Breakpoints will not be deleted ）
Toggle enable all breakpoints Ctrl + F8 Switch whether all set breakpoints are enabled
Edit breakpoint Ctrl + Alt + B Edit the breakpoint type of the current line （Breakpoint, Conditional Breakpoint, Logpoint）

Code editor （Sources The palette ）

function Shortcut key describe
Toggle comment Ctrl + / Add / uncomment
Save changes Ctrl + S Save changes to the file （ You need to enable the sidebar Overrides function ）
Save all changes Ctrl + Alt + S Save all files opened by the editor , It also needs to be enabled Overrides
Go to matching brackets Ctrl + M Jump to another bracket that matches the bracket at the current cursor position
Add a match Ctrl + D Jump and add select the next text that matches the selected text
Undo the match Ctrl + U Go back and deselect a match , And Ctrl + D contrary
go to line Ctrl + G Jump to the specified number of lines
Go to member Ctrl + Shift + O Jump to the specified member function in the current file
Last editorial office Alt + - Jump to the previous edit position where the cursor is located
Next editorial office Alt + + Jump to the next editing position
Close the activity tab Alt + W Close the currently edited tag （ file ）
increase / reduce CSS value Alt + ↑/Alt +↓ edit CSS Source file , The current value can be increased / reduce 1 A unit
10 Multiply / reduce CSS value Alt + PageUp↑/Alt + PageDownCSS The current value of the middle pair increases / reduce 10 A unit
Technical article push
mobile phone 、 Computer utility software sharing
原网站

版权声明
本文为[Yun Qi]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/201/202207190512186748.html

边栏推荐

猜你喜欢

随机推荐