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
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.
To change its position, select the three-dots icon in the top right corner of the inspector, then choose an alternative display option. Click any page element to reveal its source in the inspect panel. To modify or delete a page element, select its code in the inspector.
Right-click anywhere on the webpage, and at the very bottom of the menu that pops up, you will see "Inspect." Click that. Click the hamburger menu (the icon with 3 stacked dots) on the far right of your Google Chrome toolbar, click More Tools, then select Developer Tools.
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:
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With