Инструменты разработчика DevTools

Набор инструментов для веб-разработчиков DevTools встроен непосредственно в браузер Google Chrome. DevTools позволяют редактировать загруженную страницу налету и оперативно диагностировать проблемы.

Официальная документация Chrome разработчиков //developer.chrome.com
DevTools для «чайников» //habr.com

https://www.lucidchart.com/techblog/2018/04/17/time-saving-chrome-devtools-shortcuts/

Windows / Linux Action
F1 Show Settings
Control+] Focus the next panel
Control+[ Focus the previous panel
Control+Shift+D Switch back to whatever docking position you last used. If DevTools has been in its default position for the entire session, then this shortcut undocks DevTools into a separate window
Control+Shift+M Toggle Device Mode
Control+Shift+C Toggle Inspect Element Mode
Control+Shift+P Open the Command Menu
Escape Toggle the Drawer
F5
Control+R
Normal reload
Control+F5
Control+Shift+R
Hard reload
Control+F Search for text within the current panel. Supported only in the Elements, Console, Sources, Performance, Memory, JavaScript Profiler, and Quick Source panels.
Control+Shift+F Opens the Search tab in the Drawer, which lets you search for text across all loaded resources
Control+O
Control+P
Open a file in the Sources panel
Control+Shift++ Zoom in
Control+- Zoom out
Control+0 Restore default zoom level
Press Control+O Run snippet. Open the Command Menu, type ! followed by the name of the script, then press Enter

Elements

В дереве элементов знаком == $0 отмечается текущий выбранный элемент (

Enter Toggle Edit Attributes mode on the currently-selected element
Tab / Shift+Tab Select the next / previous attribute after entering Edit Attributes mode
H Hide the currently-selected element
F2 Toggle Edit as HTML mode on the currently-selected element

Styles Computed Layout Event Listeners DOM Breakpoints Properties Accessibility

Consol

Right Arrow or Tab Accept autocomplete suggestion
Escape Reject autocomplete suggestion
Up Arrow Get previous statement
Down Arrow Get next statement
Control+` Focus the Console
Control+L Clear the Console
Shift+Enter Force a multi-line entry. Note that DevTools should detect multi-line scenarios by default, so this shortcut is now usually unnecessary
Enter Execute
Hold Alt then click Expand Expand all sub-properties of an object that's been logged to the Console

Source

F8 or Control+\ Pause script execution (if currently running) or resume (if currently paused)
F10 or Control+' Step over next function call
F11 or Control+; Step into next function call
Shift+F11
Control+Shift+;
Step out of current function
Control + click the line of code Continue to a certain line of code while paused
Control+. / Control+, Select the call frame below / above the currently-selected frame
Control+S Save changes to local modifications
Control+Alt+S Save all changes
Control+G Go to line
Control+O to open the Command Menu, type : followed the line number, then press Enter Jump to a line number of the currently-open file
Control+O to open the Command Menu, type :, then the line number, then another :, then the column number, then press Enter Jump to a column of the currently-open file (for example line 5, column 9)
Control+Shift+O, then type in the name of the declaration / rule set, or select it from the list of options Go to a function declaration (if currently-open file is HTML or a script), or a rule set (if currently-open file is a stylesheet)
Alt+W Close the active tab
Control+Shift+Y Toggle the Navigation sidebar on the left
Control+Shift+H Toggle the Debugger sidebar on the right
Code Editor
Control+Delete Delete all characters in the last word, up to the cursor
Focus your cursor on the line and then press Control+B Add or remove a line-of-code breakpoint
Control+M Go to matching bracket
Control+/ Toggle single-line comment. If multiple lines are selected, DevTools adds a comment to the start of each line
Control+D / Control+U Select / de-select the next occurrence of whatever word the cursor is on. Each occurrence is highlighted simultaneously

Network

Control+E Start / stop recording
Control+R Record a reload
R Replay a selected XHR request
Escape Hide the details of a selected request

Performance

Control+E Start / stop recording
Control+S Save recording
Control+O Load recording

Memory

Control+E Start / stop recording

Application Security Lighthouse Recorder Performance insights

 

Источники

Documentation > Chrome DevTools > Commands and shortcuts //developer.chrome.com

Leave a Reply