When I open an new incognito window and open the developer tools its always docked to the bottom :S
Is there any way I can set the default dock to the right? Or is there some hotkey I can use to change the dock position?
The chromium ticket today was marked as won't fix https://code.google.com/p/chromium/issues/detail?id=376788
So it is very unlikely we will get this behavior. Personally I hate the default behavior being dock to right.
The original argument for it being changed to dock to right was because lots of people were upvoting these questions about how to dock it to right.
Chrome >=24 - how to dock devtools to the right?
How to reposition chrome developer tools
Maybe if we get enough people to upvote how to make it go back to the bottom they will change it back :)
EDIT: On second thought it looks like it is now picking up some traction, and they are working on implementing this. See comment https://code.google.com/p/chromium/issues/detail?id=376788#c45
EDIT #2: Chrome 44 was just released and now the position is carried over when you open a new incognito window
When the dev tools open right next to the x to close them you see the option to undock it and open it in a separate window... if you click and hold it, it will show you an option to dock it in the right panel.
Also, as a note... this is not specific to incognito.
There used to be a setting in the inspector settings (you can open them by pressing "?" while the inspector is open), but it was removed in favor of "position priorities", these being:
Right Dock
Bottom Dock
Undock
If you change its position it is persistent as long as you have a session, this means the position won't be remembered in incognito.
EDIT: Also, you can long-press the dock selection button (top right corner of the inspector) to select directly an option.
Discussion about it.
Related
I'm trying to view the emulation panel but I can't find it anywhere. Everywhere I've looked it says to open an overrides panel to find it but that's missing too. I also can't find any helpful or new answers to my question. Pressing esc only opens up console and there's nothing in settings that seems to help. Can someone please tell me how to reach it?
Instead of emulation in the drawer Device Mode is now offered for emulating other devices. It provides many benefits over the old emulation mode, such as taking into account the meta viewport tag on render. So what you see is much closer to what you'd get in real life.
I'm using 51.0.2704.103 (64-bit) on a Mac.
Cmd-Opt-i to open console.
Click the button with three vertical dots and the very top right of the Developer Tools window.
Select: more tools > sensors:
If the console draw is not already open it will open. Either way there should now be a sensors tab next to the console tab on the console draw. Click this tab and follow your nose from there.
Note that this tab had an x by it. Hitting this will hide the sensors tab and next time you use it you will need to follow the steps above again to reinstate it.
For some reason in the latest versions of Canary (and I reinstalled it a couple times) no longer allows you to change elements in dev tools by clicking on them. The only way I can go through the DOM in the elements tab is with the up and down arrow keys which takes forever.
I can use the magnifying glass to select things, but then can't go further into their children elements without using the arrow key. Clicking on elements does nothing at all.
How to fix?
I was seeing this too... seems devtools can get in a funky state. The solution is to:
open devtools
click the traffic light icon and click Settings
scroll down and click Restore defaults and reload button
This fixed it for me...
I had this issue too. I noticed that although you can't click on the element itself, you can on the white space on the left of it, with the same effect.
How could I show Chrome DevTools in a tab?
I've looked through the docs and made a search on Chrome Store, but it looks like there's nothing like this. It could be that DevTools are shown in their own window to counter some security issues, of which I'm not aware yet.
This isn't possible. The only options are:
Dock them horizontally below
Dock them vertically on the right
Dock them in a separate window.
More information can be found on their documentation at https://developers.google.com/chrome-developer-tools/docs/authoring-development-workflow#dock-to-right
Press Ctrl + Shift + C , then click on the small icon on bottom left of devTool which is used them to dock dev tool to a separate tab.
I don't know what I've switched on (by accident) but every time I have the Inspect Element area open and then try to click anything on the webpage not within the Inspect Element area (especially something jQuery related like a slideshow for example) it greys the page, shows a message saying 'Paused in debugger' and then opens a jQuery file within the Sources section of Inspect Element.
Within the 'Call Stack' area, it shows a message saying 'Paused on a "click" Event Listener'.
I don't remember switching this feature on but I'm keen for it to be switched off.
I know this question has been asked before - I thought I'd found the answer when everyone suggested we look to see if the 'Pause' option is switched on (blue). However, it's not switched on, it's grey not blue or any other colour and when I hover over it, it says "Don't pause on exceptions. Click to Pause on all exceptions".
You might also check the Source tab, check under the Event Listener Breakpoints panel if you've set any breakpoints under 'Mouse'.
This can also cause the issue
Break Point icon at top left should be blue like this(For Deactivate BreakPoints)
Should not grey like this
Found solution here, if the little octagonal stop/pause sign (at lower left of Chrome "Sources") is colored (blue or purple), you need to click on it until it's black again.
It did drive me nuts for a short while.....scroll all the way to the bottom of breakpoint window and you'll find XHR Breakpoints & under it there is the Any XHR checkbox...
Goto the sources tab and check all breakpoints.
Go to Elements tab and remove all breakpoints from right pane under DOM Breakpoints
One possible cause, it that you've enabled the "pause on exceptions" (the little stop-sign shaped icon with the pause (||) symbol with in in the lower left of the window). Try clicking that back to the off/grey state (not red nor blue states) and reload the page.
For me, I resolved it by temporarily disabling the Chrome Bitwarden extension.
You could check to see in the Sources tab in the devtools panel to see what is causing this error, it could be an extension.
To open the devtools panel on Chrome, press the F12 key.
For Visual Studio Users, just go Tools>Options>Debugging and make disabled it
The tools are opened on the bottom of the chrome window per default. This is a rather bad choice for a wide screen display since there is plenty of empty space to the right but not much vertical space to spare. Unfortunately, I have found no way to reposition the tools. I would like to have them on the side, similar to firebug.
The only option similar to what I want is to detach the dev tools and place chrome and the tools window side-by-side. This is not very convenient for quickly alt-tabbing from the IDE to the browser and back though, so an "integrated" solution would be nice.
Chrome 46 or newer
Click the vertical ellipsis button ( ⋮ ) then choose the desired docking option.
Chrome 45 or older
Long-hold the dock icon in the top right. It pops up an option to change the docking
To change the split between the HTML and CSS panels, go in DevTools to Settings (F1) > General > Appearance > Panel Layout.
Place your pointer on the dock button and long click it (some seconds) or right & left mouse click depending on the browser version.
Keyboard shortcut to toggle the docking position (side/bottom)
CTRL+SHIFT+D
And there are many shortcuts you can see them by going to
Settings » Shortcuts, as displayed here:
Alternatively, use CTRL + ? to go to the settings, from there one can reach the "Shortcuts" sub-item on the left or use the Official reference.
Looks like this is on the bottom left now as an icon with overlapping windows and the "Undock into separate window." tooltip.
After I have placed my dock to the right (see older answers), I still found the panels split vertically.
To split the panels horizontally - and even got more from your screen width - go to Settings (bottom right corner), and remove the check on 'Split panels vertically when docked to right'.
Now, you have all panels from left to right :p
As of october 2014, Version 39.0.2171.27 beta (64-bit)
I needed to go in the Chrome Web Developper pan into "Settings" and uncheck Split panels vertically when docked to right
If you use Windows, there some shortcuts, while devtools are opened:
Pressing Ctrl+Shift+D will dock all devtools to left, right, bottom in turn.
Press Ctrl+Shift+F if your JS console disappeared, and you want it docked back to bottom within dev tools.
The Version 56.0.2924.87 which I am in now, Undocks the DevTools automatically if you are NOT in a desktop. Otherwise Open a NEW new Chrome tab and Inspect to Dock the DevTools back into the window.
In addition, if you want to see Sources and Console on one window, go to:
"Customize and control DevTools -> "Show console drawer"
You can also see it here at the right corner: