In Chrome (version 32.0.1677.0 canary Aura), I can't find the overrides tab/page in the Developer Tools settings. (It used to be placed between the "General" and "Workspace" tabs. Did they move it, or did I forget to enable something?
Hit Esc to open the console drawer, then you can open the Sensors tab via the drawer menu on the left.
Sensors provides geolocation and accelerometer settings.
Additionally, the newer Device Mode captures the basics of mobile device emulation.
Seems like the "Emulation" button only is available from Console, when Console is opened from one of the other tool tabs. Ex. "Source" or "Elements".
Go to "Elements" , click on the "Show console" icon. The "console drawer" will open in bottom part of the window with Console, Search, Emulation tabs. If this is a bug or not is hard to say.
This thread is quite old and everything is now changed with the new "device mode". You cannot use any of this anymore.
As stated here by #paul-irish (from the Chrome DevTools team) on twitter :
one should just activate the device mode, and then use the shift key + drag the mouse around to emulate pinch zoom, with no particular setup.
this pinch to zoom emulation doesn't seem to work very good with JS libs like Hammer.
For now, it is better to test pinch to zoom on actual devices, or with http://browserstack.com
Related
VS Code was docking devtools pane within the window before. Now, It opens a new window that increases back and forth. Is there any way to dock it back? I tried a few settings they did not work. Also, there is no dock icon as in Chrome.
This started with vscode v1.74 and is an electron bug. See The developer tools become a floating window.
There is a fix reported there. Disable the setting
Windows > Experimental > Windows Control Overlay: Enabled
You will be prompted to restart vscode and then opening the Dev Tools will be docked as before. Apparently, the Electron bug has been fixed.
In the devtools panel, click the vertically-aligned three dots at the top right. That will open up a context menu. You will see a "Dock side" entry with different icons signifying option values for that setting. You probably accidentally clicked the one that makes it pop the devtools out into its own window. Select whichever option you actually want there.
I'm not sure if this is the right location to ask...
I am frequently using Chrome DevTools for debugging. Now I saw that there was a new tab "Lighthouse" and I started to generate a report.
It turned my Webpage into a mobile view. When I close DevTools it resets but every time I restart my Chrome DevTools it automatically turns the Webpage into mobile view.
How do I stop this lighthouse report while still using DevTools?
Although this is about using software (so should probably be on superuser.com) it is an easy one to answer so I will answer then vote to close the question.
In the very top left of the developer tools window you will see two icons. The second icon is for mobile emulation, the one located right next to the "Elements" tab.
On your screen this will be blue as you have it activated, simply click this to remove mobile device emulation.
On Lighthouse itself if you want to test the Desktop version of the site you will see some options before you run the report, you will see "Device" and two radio buttons, just change it to "Desktop"
I am using Android Emulator (LDPlayer 4.0.23).
The "Show Taps" option from Developer Options (Setting-> Developer Options-> Show Taps), doesn't work. It's activated/ON.
Normally when it's activated you will see simple transparent circle when you tap your screen. But it doesn't show in LDPlayer.
Anyone know how to make it work? Or is there any other apps that can be use as replacement?
FYI, I want to create some video tutorial, thus I need to show where I taps on it.
you can try [NoxPlayer] (also an Android Emulator)to show taps and meet your needs. Here is a guide:
First, click Setting in the tool
Second, click About tablet and slide the page to find the Build Number
2
Third, Tap the Build Number 7 times to open the developer option
Fourth, Open the developer option, and then open the Show Touch
I have the developer tools floated to be a separate window.
It nows takes the entire screen.
I did lots of research to see how to close it, but found nothing related.
Most of the posts are about how to open it.
(I tried CMD + option + i / F12, neither one works).
Also, I wonder how to dock it back into the page. I do not see such
an option under the "..." on top right corner.
Command+Shift+D (Mac) or Control+Shift+D (Windows, Linux) restores the DevTools window back to whatever position you had it in before you undocked it.
You can also change the docking position by opening the Command Menu, typing Dock, and selecting the option you want.
You can also access these options from DevTools's Main Menu. Note: It sounds like you were looking for the options in Chrome's main menu. You won't find any DevTools options there, other than the option to open DevTools.
Anyone know of a way to open Chrome Dev tools to a new window upon open?
I know that I can click F12 and then click the 'customize' button and change orientation or pop out the dev tools window. But that's an extra step, and often a window resize is necessary, and when you do it 50 times a day, it gets to be tedious.
Also, sometimes, on pages I'm testing, pressing F12 will change the layout of the elements on the page and even popping out the dev tools leaves the page layout different than before I opened dev tools. This can make it hard to tell if an element is visible or not, which makes troubleshooting Webdriver more difficult.
Ideally, CTRL+F12 or something to open dev tools as a separate window would be super handy. (to any Chromium devs that might be listening ;) But if anyone has another solution, I'd love to hear it.
If you have your DevTools un-docked, the dock mode, size and position of your DevTools window will remain the same as you previously set it. For example, I just set mine to be maximised on my other monitor. Every time I open up DevTools, it's an un-docked, maximised window, and there's no change to the layout of the inspected window other than the fact it's no longer in focus.
You could alternatively launch Chrome using the --auto-open-devtools-for-tabs flag, which will automatically open DevTools in the dock mode, size and position you had it previously. You can use:
Mac:/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --auto-open-devtools-for-tabs
Windows: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --auto-open-devtools-for-tabs
In WebDriver, you can set flags for how Chrome opens. However, after looking into this further, it turns out Chrome currently do not support multiple clients connected to the protocol simultaneously.
As for speeding things up, you can switch between dock positions with Cmd+Shift+D (Mac) or Ctrl+Shift+D (Windows). This toggles between the last two modes you have used, so say you have it docked at the bottom, you then pop it out, using the shortcut now will toggle between the two.
Here's how you do it. On opening the developer tools, with the developer tools window in focus, press F1. This will open a settings page. Check the "Auto-open DevTools for popups".
Originally documented here -- https://newbedev.com/automatically-open-chrome-developer-tools-when-new-tab-new-window-is-opened.