Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to attach Chrome developer tools to the same window?

Tags:

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

like image 434
Geuis Avatar asked Dec 11 '09 00:12

Geuis


People also ask

How do I open Chrome developer tools in same window?

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).

How do I dock developer tools in Chrome?

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.

How do I open inspect element in same window?

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.

How do you attach DevTools?

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..


1 Answers

Ctrl Shift J to get a developer window and then use the bottom left button.

alt text

To be clear: I do not own a MAC so I can't test this but it does work on Chrome/Linux for sure.

like image 54
jldupont Avatar answered Sep 17 '22 18:09

jldupont