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.
