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.
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.
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
When you click a target='_blank' link, it naturally opens a new tab in Google Chrome. For particular sites, I need to use the Chrome Developer Tools to examine the http requests for any new tabs that are opened.
Whenever you have Chrome Dev Tools open on your current page and then click a link that opens a new tab, Chrome Dev Tools are not opened on the new page by default. Opening Chrome Dev Tools at this point is too late because the tools do not capture the http requests for the page.
Also, in many cases, these new tabs go through a series of redirects before reaching the final page, so I cannot simply reload the page after opening Chrome Dev Tools.
The only workaround I can think of is, in the case that the site I'm working on is on a local development server, I can temporarily change the link from target='_blank' to target='_self', but this is unrealistic for a site with thousands of links or for a site that I have no control over the code.
Is it possible to set Chrome Dev Tools to automatically open with every new tab (opened either manually or via target='_blank'?
I'm not sure as of which Chrome version this changed, but if you click on the Settings wheel on dev tools:
You'll see a Global section with a checkmark for "Auto-Open DevTools for popups", which works for opening target="_blank" links with a devtools window:
It's possible to auto open devtools for all the new tabs instead of just target = _blank. When launching google chrome, pass the flag --auto-open-devtools-for-tabs. It enables launching of devtools for all the windows created automatically.
For linux
google-chrome --auto-open-devtools-for-tabs
For Mac
open -a "Google Chrome" --args --auto-open-devtools-for-tabs
You can only open DevTools window via UI action or keyboard shortcut. There is no way to do this automatically.
Whenever I'm developing in Chrome, I don't have issues until I try executing scripts while the Chrome Developer Toolbar is open. When it's open, and (for instance), I click on an element with an event tied to it, the toolbar will flip over to the Scripts tab and show what I've attached below.
When I close the toolbar, it seems that the execution of the script picks up and runs the actions I was waiting for.
I should note that there are no errors in my JS and when the toolbar is closed it runs perfectly. There must be something in the Chrome settings that pauses javascript execution while the toolbar is open.
I've disabled all extensions and restarted the browser to no effect.