I have a web app with a chat that opens in a new popup window. Normally, in Chrome I can hit F12 and click the icon of a smart phone to toggle it. But in the popup window this icon does not appear. This is important for me since I need to throttle the connection of the popup in order to simulate a user disconnecting from the chat.
Thanks!
It doesn't seem to be currently possible. I've opened a ticket for you. Meanwhile you have couple of options:
open popup in a regular window (copy paste the url, or modify window.open call to open a new tab instead of a separate window),
create a Chrome extension that uses debugger API to send emulateNetworkConditions message to your popup window
or try hacking DevTools like so:
open DevTools (A) for your popup
focus on DevTools window and open another DevTools (B) for that window using a keyboard shortcut (F12/alt+cmd+J)
in the console of the DevTools B call WebInspector.overridesSupport.setEmulationEnabled(true) (to enable emulation) and then WebInspector.overridesSupport.settings.networkConditions.set({throughput: 1.5 * 1024, latency: 40}); (to enable network throttling)
Perhaps easier way as of today is to install chrome extension which will allow you to open preview in new tab instead of popup. There you can have the same icon to toggle to mobile. Below is the extension:
https://chrome.google.com/webstore/detail/tag-assistant-companion/jmekfmbnaedfebfnmakmokmlfpblbfdm?hl=en
Related
I always use different windows of Chrome during development, and for each window I have to open a devtool window as well.
Every time I have to navigate between those windows, or I have to switch between IDE and devtool, I have to click on the right minimized devtool, and sometimes it's quite difficult because they have the same title.
I know, I could press F12 again on the window I need to maximize the right devtool, or I can maximize once the right one, and then switch between IDE and the devtool with Alt+Tab.
I could use also JavaScript to change the title, but it would last just until the next reload.
I think that give a specific name to the devtool window would speed up my work. In this way, I could identify immediately which devtool I need. For example I could rename a window "mobile" and the second one "desktop".
There is any way to do it?
There's no such feature so you can request it on https://crbug.com.
Meanwhile here's a workaround:
open devtools-on-devtools
run this console command in its window:
document.title = 'whatever'
save this command in devtools snippets to quickly re-run it later.
How to open devtools-on-devtools:
Open devtools first and switch its Dock side in the menu to a detached (floating) window
in the now detached devtools press CtrlShifti or ⌘⌥i on MacOS,
which will open devtools-on-devtools in a new window
I'm trying to debug a Chrome Extension but every time I refresh it, the developer tools window that is associated with the extension closes. Does anyone know if there is a way to keep it open?
Here's what I'm doing: I click the extension button, which opens a popup window. I then right click it and click "Inspect". That opens the Developer Tools. Now if I click the extension button again to refresh it (when I update code), the Developer Tools closes. :(
There are two ways to accomplish this.
Click on the Dev Tools popup so the window is focused and then press F5. This will reload the popup and Dev Tools, and will not cause the Dev Tools window to close.
If that doesn't work for you, go to chrome-extension://extensionid/path/to/popup.html on a separate tab on Chrome. From there, you can inspect element, and refreshing the file will not cause Dev Tools to close.
Dev Tools are closing because hosted page is closing (the popup). The view and it's logic stops working if you close the popup so there's nothing to inspect.
If you'd like to debug background page it will not close with the popup since it is running in background. That's all you can do.
After closing Chrome, certain extensions keep running on the background (like Drive or Hangouts).
Without disabling a extension, can I control which ones can keep running after Chrome is closed?
By default Chrome allows applications/extensions to keep running in the background to provide their services like updates and notifications. This is handy for keeping you updated with notifications on Facebook or a new email in Gmail.
You can stop Chrome from running in the background from the Chrome settings.
Click on Chrome’s main menu and select “Settings.”
Scroll down and click on “Show advanced settings.”
Scroll down to the extreme bottom and uncheck the option “Continue running background apps when Google Chrome is closed” under the “System” heading.
same with images is here https://www.maketecheasier.com/stop-google-chrome-running-background/
Use the chrome task manager to stop the extensions you want.
To open chrome’s task manager, click the “More” button (three dots), hover over “More Tools,” and then click on “Task Manager.” Alternatively, press Shift+Esc on Windows or Search+Esc on Chrome OS to open Task Manager.
Chrome task manager shows the list of open web pages and chrome extensions that are running.
Select the extensions you want to stop and then press End process
But if you only want to disable them from running in the background after closing Chrome:
Windows:
Ctrl + Shift + Esc
Mac:
Hit Command+Spacebar to bring up the Spotlight search field.
Type in “Activity Monitor”
Hit the Return key when “Activity Monitor” populates in the spotlight results.
You are now in Activity Monitor where you can manage and manipulate tasks.
Select the extensions process and press the End task button (Windows) or select the process and press the x button in the upper left.
You can click the 3 bar on the far right side of the chrome; click settings; click extensions right above that; then disable which ever extensions you do not want running. Often times if you have a ton of add-ons/extensions disabling these can speed up browsing. Happy surfing!
I'm developing a chrome app. Whenever I restart the app to test new code (from context menu or chrome://extensions), the developer tools window closes and I have to re-open it manually (right click > inspect element). Previous behaviour was that the developer window would also automatically re-open during this process.
Right now I'm trying to actually debug code that runs on app load, and I can't get to any break points because by the time I can manually re-launch the developer tools they've been missed.
How can I have the developer window automatically re-open when the app is restarted?
No.
You can't programmatically open the Chrome DevTools.
What I suggest is to change onload to a function, and call that from the console.
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.