Chrome developer tools includes a "show console drawer" setting. The console tab in the drawer does not show any content. When I click on another tab like search, it expands to see the content.
Why is the console tab not showing content like the search tab (and others)?
Nothing shows when console is clicked:
Content is displayed with search is clicked:
Today when I opened my browser, I have the following behavior:
Clicking the console tab in the top section, the drawer console is collapsed.
Clicking any other tab in the top section, the drawer console is expanded.
It appears as if the console will only appear in one location.
Regardless, I can see both console and network simultaneously which is what I needed. Thanks to all who responded.
Related
I would like to save my Chrome's DevTools console history.
I know I can right-click "Save log as", but this only goes to up to the last clear.
I could just never clear console, but then I'm annoyingly stuck working off the bottom of the screen.
Is there anyway to scroll the console screen?
You can't but there is a filter field top of the console, just put some random text in it, and it is hide all the logs for you.
I often have many (many!) browser tabs open in Chrome. Often times I'll have a developer tools window open but lose track of the associated browser tab.
Is there a keyboard shortcut or menu or button somewhere that will bring the associated tab (and browser window) to the forefront?
UPDATE: Just noticed that the shortcut key is F12. It's listed against a "Focus debuggee" menu option under the vertical ellipsis. (Chrome 66.)
Original answer:
I was just looking for a similar shortcut.
I haven't found one, but if you go to the console in your developer tools window and run a quick
window.alert()
then it looks like the associated main window+tab is brought to the front to display the popup, and it remains there when the popup is dismissed.
(That's what I'm seeing as of Chrome 60.)
In devtools click the top right cogwheel to open Settings
Click Shortcuts in the left navigation menu, and scroll down until you see Focus debugee. You'll see the shortcut key that is assigned with an option to modify it, or an option to set the shortcut if not defined.
I have "set a homepage" in the browser. But i want to hide that tab when the browser starts up.
Is there any way we can hide the homepage tab at the startup and let the "tab run in the background".
I frequently use the overrides tab in Chrome Developer tools to emulate other device such IPhone and IPad, but after upgrading to last version (32.0.1700.76 m) everything in the overrides tab is gone and replaced by a checkbox saying "Show 'Emulation' view in console drawer".
Checking this checkbox does not enable a 'Emulation' view in the Console drawer. The "Show Console" button seems to be disabled.
See here for more information.
Before starting open the dev tools console (on a Mac cmd-option-i)
Open the Settings panel within the dev tools console (click gear icon on right side)
Check "Show 'Emulation' view in console drawer (looks like you have already done this step) and close screen
Switch to the sources tab of the dev tools console
Press Esc to bring up a screen that slides in from the bottom
Select the Emulation tab on that second screen
There is also a note in the link above stating:
Note: Emulation tools within DevTools were previously contained within
an Overrides pane inside the Settings panel. The Emulation panel is
the new Overrides pane.
After installing Chrome (or the bleeding edge version Chrome Canary) you should be able to do proper mobile emulation within Chrome's Developer Tools. I usually activate them by Right Clicking > Inspect Element
For visual learners like myself, I just included a full screenshot.
I'm running Google Chrome version 58.0.3029.110, where the Emulation is no longer available, but all of the features are still available:
Device & Screen
Press Ctl + shift + m or click on Toggle device toolbar, you'll find these in the upper middle of your browser tab. (You'll find more options in the More option section.)
User Agent & Sensors
User Agent is now renamed as Network Conditions and can be found in the Customise and control DevTools > More tools > Network conditions. Sensors can also be found in the same location (ie. Customise and control DevTools > More tools > Sensors).
"Show Emulation view in console drawer" message confusing.
Generally our chrome dev tool bar tab selected as a console tab or we try to find out in console tab.
Problem is , Console drawer will not opened when your console tab selected.
I seem to have solved it. When I upgraded to Chrome Canary (Version 34.0.1789.0 canary) the problem was solved.
http://www.google.co.uk/intl/en/chrome/browser/canary.html
I run into this problem, and it took me a while to figure it out, despite the answers here. I am on Version 37.0.2062.103 m. First, in this version, there is no Override pane, neither "Show 'Emulation' view in console drawer either. It is turned on by default (I guess), but a little bit hidden. The key is to first press ESC key in dev mode (now I'm not sure if it's on by default). You should see a pane with 4 "tabs" including "Emulation" at the bottom. I quoted tabs because it appeared more like a status bar to me and I keep clicking it and nothing happens, until I accidentally resized the pane.
Sweet... This behaviour (running device emulation and debug mode) works in Chromium on Linux Ubuntu by hitting F12 and then the drawer icon. :)
More info:
Some more info, including screenshots
Is there a way to view multiple Chrome devtools panels at the same time? A split window, like this mockup, would be nice:
Or in separate windows.
It would be extremely useful to be able to view the Sources panel and Network panel at the same time, to see exactly when network requests are fired while stepping through code.
The console can be pulled up while inside any other panel by clicking or pressing esc, so why not the other panels?
I haven't found much by searching, but maybe this is possible with a devtools extension.
Does this exist already? If not, is it possible?
I find this limitation frustrating too, all those other monitors are wasted! Here is poor man's solution:
launch your chrome with --remote-debugging-port=9999 command line parameter
right click on your page to debug and select 'Inspect Element' - this is your debug window #1
open a separate chrome window and navigate to chrome://inspect
click 'Configure...' and add localhost:9999
within a couple of seconds under 'Remote Targets' you should see tabs you can inspect from your other chrome instance
click on the tab, and now this is your debug window #2
Unrelated tip: system wide nightmode experience: http://danielsokolowski.blogspot.com/2018/11/windows-10-8-7-night-mode.html
As of Chrome Canary 33.0.1732.0, there's a "Show editor in Drawer" experiment. The editor shows up whenever you hit any anchor to the source code in DevTools.