Overview Open Chrome DevTools What's New In DevTools DevTools Engineering Get Started With Viewing And Changing The DOM Find Unused JavaScript And CSS With The Coverage Tab Find and fix problems with the Issues tab Run commands in the Command Menu View and debug media players information Emulate authenticators and debug WebAuthn Edit files with Workspaces Debug Progressive Web Apps Understand security issues Keyboard shortcuts View page resources
Overview Open Chrome DevTools What's New In DevTools DevTools Engineering Get Started With Viewing And Changing The DOM Find Unused JavaScript And CSS With The Coverage Tab Find and fix problems with the Issues tab Run commands in the Command Menu View and debug media players information Emulate authenticators and debug WebAuthn Edit files with Workspaces Debug Progressive Web Apps Understand security issues Keyboard shortcuts View page resources

Change placement: undock, dock to bottom, dock to left

Published on

By default DevTools is docked to the right of your viewport. You can also dock to bottom, dock to left, or undock to a DevTools to a separate bottom.

Dock To Left.

Figure 1. Dock To Left.

Dock To Bottom.

Figure 2. Dock To Bottom.

Undocked.

Figure 3. Undocked.

  1. Click Customize And Control DevTools Customize And Control DevTools and select Undock Into Separate Window Undock, Dock To Bottom Dock To Bottom, or Dock To Left Dock To Left.

    Selecting Undock Into Separate Window.

    Figure 4. Selecting Undock Into Separate Window.

Change placement from the Command Menu #

  1. Open the Command Menu.

  2. Run one of the following commands: Dock To Bottom, Undock Into Separate Window. Currently there is no command for docking to left, but you can access it from the main menu.

    The undock command.

    Figure 5. The undock command.

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.