Overview Open Chrome DevTools What's New In DevTools 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 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 left, Dock to right, Dock to bottom, Undock into separate window or Restore last dock position. To toggle Restore last dock position with a keyboard shortcut, press Control+Shift+D (Linux/Windows) or Command+Shift+D (Mac).

    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.