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.
Related
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
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.
Unfortunately, I can't reproduce the issue in jsfiddle, but this test file reproduces the issue: github file
Basically, I have a standard popup and a close button inside that popup. I can open the popup. I can close the popup. I can do this over and over again without a problem.
However, when I bind the "popupafterclose" event to the popup, which reopens the popup after receiving that event. Now something weird happens.
On my iPhone 5S's Chrome (v38.0.2125.67), after the second close, the page goes back beyond the popup and to the previous page, as if it was hitting "back" twice.
This only happens on my phone's chrome. The test page works fine on my phone's safari. it also works fine on my mac's chrome (v38.0.2125.104).
I suspect this may be some sort of bug prevention mechanism (like preventing too many popups or infinite loops), but wanted to confirm. I'm hoping I'm just doing something wrong in my code.
If you comment out the "popupafterclose" event, you'll see that you can open/close the popup again and again in every browser including mobile chrome. But automatically re-opening the popup and closing it leads to backing out twice.
You may be wondering why I would want to immediately open the popup after I just closed it. My app has a "play" function that initiates the popup. Upon closing it, I want it to continue to "play" after the popup closes, and some time later, the popup may initiate the popup again. After closing that second instance of the popup, my app backs out of itself.
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.