How to drag/re-position inspect element tool in google chrome?
Asked Answered
B

6

22

I am using Google Chrome browser. I did right click -> inspect element to open up the inspect element tool. This is what I currently see on my screen

enter image description here

Is there a way I can re-position/move the inspect element tool to the bottom of the browser screen? I tried looking this up https://www.google.com/#q=drag+and+drop+inspect+element but only found results for shortcuts to open the inspect element tool.

Brescia answered 5/1, 2015 at 2:52 Comment(1)
Thanks to your question.Kalin
L
33

You should be able to click and hold the little "two squares" icon next to the "close" icon, and it will reveal an option to move the DevTools to the bottom:

screenshot

The half-filled rectangle will move the DevTools to the side/bottom, and the overlapping squares will pop the DevTools out of your browser into a separate window.

Loisloise answered 5/1, 2015 at 2:59 Comment(2)
This is now obsoleteInterrupter
@Interrupter click the three dots and the option is in the drop downBreather
J
17

My answer is based on Chrome 59 but currently applies to previous versions since then.

As shown in image, you can click the 3 vertical dots on top right, then the menu below will appear, there you can click on your preferred arrangement (the darkened box portion shows where you would like to put the toolbar). In your case select the icon which has the bottom arrangement.

Move Doc to bottom in Chrome 59

Jiles answered 9/8, 2017 at 9:31 Comment(0)
F
1

In case you are a keyboard shortcut guy,

  • If you are in windows Cntrl + Shift + D
  • In OSX + Shift + D
Filial answered 5/2, 2020 at 6:6 Comment(0)
L
0

Just before the close icon in inspect element , there is docking icon.
If the docking is like single box icon, just click on it to toggle the inspect element between bottom and right.
If the docking icon is like double box icon , press the icon ,hold it and then move the cursor to the single box icon(which appears shortly after pressing the icon).
For more information visit here.

Landgrabber answered 12/9, 2015 at 21:6 Comment(1)
What additional information does this add to an already answered question?Narcis
K
0

In Windows PC 2020 version

Toogle Device toolbar select or deselect

enter image description here

Kalin answered 26/5, 2020 at 22:58 Comment(1)
That changes the view of the screen (e.g. to an iPad), but not the location of the inspect elementInsurable
L
-1

For Windows--> Press--> Ctrl+Shift+D


For OSX --> Press --> Window+Shift+D

Lowborn answered 16/5 at 12:51 Comment(1)
Welcome to SO! Please take a look at the other answers that were given before. Your approach is mentioned there already. In order to keep the site clear and make it easy to find answers, we try to avoid double answers.Elver

© 2022 - 2024 — McMap. All rights reserved.