Change Docking Modes and Resize Chrome DevTools

After pressing F12, the Chrome DevTools popup will appear at the bottom of the screen. Sometimes we don’t want to dock the tool at the bottom of the screen, as they are in the way. The positions of the popup can be changed.

Changing the docking mode of Chrome DevTools is a great way to customize the way you interact with the web. You can choose from 4 different docking modes: bottom, right, left, or undocked.

  • The bottom mode is the default and places the DevTools at the bottom of the page.
  • The right mode places the DevTools to the right of the page.
  • The left mode places the DevTools to the left of the page.
  • The undocked mode allows you to move the DevTools to a separate window, which can be very helpful when you want to examine two web pages at the same time.

Table of Contents

Change docking modes

In Chrome Dev Tools, the top right’s three-dot icon allows you to quickly change the docking modes of the tool. There are 4 small icons that represent respective docking modes – undock, left, bottom, and right.

Resize window

You can also resize the Chrome DevTools window to better suit your needs.

By dragging the edges of the window, you can make it bigger or smaller. This way, you can make sure that all the information in the DevTools is visible without having to scroll.

This can be especially helpful if you’re looking at a lot of code or inspecting multiple elements on a page. With the resizing feature, you can also make sure that the DevTools window doesn’t take up too much of your screen real estate.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.