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"
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 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
The reason - I made a Progressive web app, opened in the browser - all is fine and browser offered me to add it to home screen.
Now, I want to demonstrate this on a presentation, and so - removed the icon from home screen. But for the last whole day I've been playing with the website in chrome a lot, and the banner never appears back.
Is it really a once-in-a-lifetime thing? Or is there something specific I need to do?
The app-install banner prompt is normally presented after you've visited the site at least twice with at least 5 minutes between each visit. Using a Chrome flag, you can bypass these checks so that the banner always appears on every visit:
Open Android Chrome.
Go to chrome://flags/#bypass-app-banner-engagement-checks
Click Enable
Click Relaunch Now
You can also simulate an Add To Homescreen event from Chrome DevTools:
Open Android Chrome on your phone, and navigate to a PWA (e.g., the Paper Planes app from https://paperplanes.world).
Connect to your Android with a USB cable.
From desktop Chrome DevTools, select Menu > More Tools > Remote Devices. OR CTRLSHIFTP (or CMDSHIFTP for macOS), and enter "Remote devices".
Select your phone by name.
Click the Inspect button next to the list item corresponding to your PWA (e.g., Paper Planes).
In the new DevTools pop-up for your PWA, go to the Application panel, and click Add to homescreen. This should cause the app-install banner to appear in Android Chrome. Note the banner won't appear in the Chrome DevTools screen mirror.
(steps above verified with Chrome 55 on macOS Sierra, and Android Chrome 57)
I found another solution - when I go to the settings of chrome mobile and choose History -> Clear browsing data (make sure that the option to clear Cookies is ticked) then click the Clear Data button - after that I get again the app install banner to add the app to the home screen.
Apparently - it clears not only the data itself, but also makes the browser forget everything about this website.
(Strangely - the old icon doesn't go away ... so now I have a few icons on the home screen :D ...)
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.
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