Chrome Dev Tools: Command Menu Making Experience Easier
Command Menu provides a fast way to navigate the Chrome Dev Tools UI and accomplish most common tasks easily such as disabling javascript, and making quick screenshots.
This similar feature in Visual Studio Code is called "Command Palette", originally inspired by Command Menu.
Open Command Menu
Various options are available, to open Command Menu
- Press Control + Shift + P (Windows/Linux) or Command + Shift + P (MacOS)
- Click the kebab menu in Chrome Inspector and select "Run Command" from the dropdown menu
The Command Menu provides a variety of commands that can be grouped into the following categories
- Rendering Commands
- Screenshot Commands
- Debugger Commands
- Source Commands
- Network & Performance Commands
On top of this categorization, the "Run Command" dropdown also provides information about the section of Dev Tool where the command will be executed. These sections can be Panel, Drawer, Appearance, Console, Debugger, Elements, Global, Grid, Help, Mobile, Navigation, Network, Performance, Persistence, Recorder, Sources, and Settings.
Sample Run Commands
Some examples of what Run Command has to offer are below:
- Panel: Show Console
- Panel: Show Elements
- Panel: Show Application
- Drawer: Show Animation
- Drawer: Show Coverage
- Console: Show Timestamps
- Debugger: Disable Javascript
- Debugger: Pause for Exceptions
- Elements: Edit as HTML
- Global: Dock to Bottom
- Global: Dock to Left
- Screenshot: Capture Node Screenshot
- Screenshot: Capture Full-Size Screenshot
Conclusion
The "Command Menu" enhances the developer experience, and reduces development and debugging time. Command Menu also provides some functionalities without spending anything from the pockets.
Happy Coding :)
