Набор инструментов для веб-разработчиков 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 |
? есть мнение, что точку остановки заменяет команда debugger;
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
//developer.chrome.com/docs/devtools/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
//developer.chrome.com/docs/devtools/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