I'm trying out the developer tools on Chrome for Mac OS and I'm finding a huge annoyance. I don't see an obvious method to make the tools window attach to the bottom of the page I'm inspecting like in Firebug and Safari
To open the developer console in Google Chrome, open the Chrome Menu in the upper-right-hand corner of the browser window and select More Tools > Developer Tools. You can also use Option + ⌘ + J (on macOS), or Shift + CTRL + J (on Windows/Linux).
Change where DevTools is docked by using the Command Menu Or, press Shift + Ctrl + P on Windows/Linux or Command + Shift + P on macOS. Type dock, and then select a dock command: Dock to bottom.
Right-click any part of the page and choose Inspect Element. Right-clicking a specific page element will open that element in the inspector view. Select Tools > Web Developer > Inspector from the top menu bar. Use the shortcut control-shift-C in Windows or command-option-C in macOS.
In the developer Tool Window, On the top right corner you'll see three vertical dots. click it, and on the top you'll see "Dock Side" option. From this option you can change the setting.. i.e. to open the developer tool in the same webpage..
Ctrl Shift J to get a developer window and then use the bottom left button.
To be clear: I do not own a MAC so I can't test this but it does work on Chrome/Linux for sure.
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