What is a good way to debug a popup window in Chrome? I need to debug some code that is run when the window is opened and I was wondering if there was a better way to debug it than pressing f12 as soon as the window opens. I'm looking for something similar to using Visual Studio where you can open a window, set a breakpoint on some JS, then open the window back up and VS will break on that breakpoint without you having to do anything.
If it can be done some way on Firefox I'd switch to that, as long as I don't have to use IE.
Nowadays there's an option in the Chrome devtools settings. "Auto-open DevTools for popups".
Check that checkbox, then if you have devtools open on the parent window and that opens a popup or new tab devtools will automatically open in that window/tab.
Short Answer:
"Ctrl + click"
Long Answer:
I had the same problem. It seems that it's a bug in Google Chrome and there's nothing we can do about it until it is fixed in future versions. I found a way around it, though, which is not an actual solution but solved my problem.
1) Close the popup window.
2) Open it again using "Ctrl + click" instead of just clicking on the link to the popup window.
3) The window will be opened in a new normal tab.
4) Now you can press F12 and go to debug mode.
Hope this solves someone else's problem too.
Related
I'm developing a system that runs in Edge (school's default browser), the browser launches in Kiosk mode from a desktop shortcut
"C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" --kiosk www.program-name.com --edge-kiosk-type=fullscreen
On the landing page, I can exit the program no problem with a close button using
<input type="button" onClick="window.close();" value="Close">
Once you proceed into the program, next page onwards, window.close no longer works. The only way to quit is by using Alt + F4 or pressing the Start key and right clicking the Edge icon
If you open the Developer Tools console, you'll find this message when the window doesn't close by window.close():
Scripts may close only the windows that were opened by them.
The message is clear. There're some restrictions when using window.close() to close window. In Chromium, window.close() succeeds if the new window/tab has an opener or if the back/forward stack contains fewer than two entries. The limitation of window.close() is for security and user-experience. For more detailed information, you can refer to this blog.
The only way to close the proceed window programmatically is opening the window by window.open(). For example, if you want to open a new window by clicking a link, you can use the code like below:
link
Then on test.html you can use window.close() to close the window.
I am running the chrome extension in browser action. As a developer, I am opening the inspect the popup and running, so it will stay open in the current tab. When I open the other tab, the "inspect the popup" which I open in the developer mode is getting closed. Is there a way to make the "inspect the popup" run continously even if I open the other tabs?
You can't; normally, any sort of focus loss will cause the popup to close.
While inspecting the popup, it's less sensitive to focus loss for ease of debugging, but changing the tab still causes it to close (and therefore, the Dev Tools window attached to it closes as well).
My guess is that some important expectations of the Chrome API are lost if the current tab changes after invoking the popup. For example, "activeTab" permission will break. That, or it may be simply a bug.
Bottom line: this will never actually happen in normal use, so this inability isn't that important. If you need to access multiple tabs, open them in separate window: switch to it won't cause an inspected popup to close.
I'm in the process of writing a Google Chrome extension, and I'm hung up on what should be a very simple task. I have a browser action that opens a popup, "popup.html", which then loads a small Javascript file, "popup.js". As soon as I get the DOMContentLoaded signal from the popup page, my Javascript opens a new tab with a certain URL. This behavioral quirk is by design - in some cases it will display a menu, and in other cases it will just open this URL.
I currently have some very simple code which is supposed to do this, but whenever it opens this tab, Chrome suddenly closes. I'm using a Mac (OS X Mavericks), so it doesn't crash entirely (still running), the window just closes. When I open it up again, the tab it was supposed to open is there, but the "popup.html" menu is awkwardly hanging over the UI still and won't go away.
Here is my complete popup.js file:
function stuff() {
window.open("http://stackoverflow.com/");
}
document.addEventListener('DOMContentLoaded', stuff);
I'm guessing that I may need to gracefully close my popup window before going to this link or something, but that seems like I'm overthinking it. After all, I've seen other extensions that have normal links in their browser action popups, and you can click those to open new tabs without any Javascript magic.
I've also tried using the chrome.tabs.create function, yet the same thing happens. The Chrome developer console doesn't show any errors. Thoughts?
Edit1: Just disabled all extensions and tried again. Still breaking. Going to boot up my Windows 8 box and see what happens on it.
Edit2: Works with a short delay before opening the window now on Mac, see my answer below.
Ok, I think I may have figured this out, but it's still weird. I did this on my Windows 8 PC, and the browser didn't crash, but the browser action popup didn't close the way it's supposed to either.
On a hunch, I altered my code on the Mac to give the browser some time to render the popup window:
function stuff() {
window.open("http://stackoverflow.com/");
}
setTimeout(stuff, 500);
Worked without a problem on the Mac this time. I'm guessing it's an issue with the browser being interrupted while rendering the popup window, but it's still weird. I would still appreciate an explanation from someone who actually knows what's going on here! :-)
I am developing a web-application, and google-chrome started behaving weird. When I make change in a JavaScript file, after I hit refresh on the debugger - I still see the same code in the debugger, and the browser executes this old code. Why is google-chrome behaving like this and how can I solve this?
Open Developer Tools, by right clicking and choosing "Inspect Element" or Ctrl/Cmd + Shift + J
Click the Cog icon in the bottom right of that window.
Choose the General Tab
Tick "Disable cache"
This will disable Chrome from caching (locally storing) a copy of the js file
perhaps is a cache problem. try doing a cache refresh (ctrl-r, ctrl-f5). if you use cache.manifest file then you need to touch it in some way and double refresh your app for the changes to show.
In my page when I click on a link a popup will be opened. In that popup, I have the close button. To close the window I am using simple JavaScript function as window.close().
This is working fine.
Now when I copy the URL of the popup link and open it in new window, I am not able to close the window.
In Firefox when using Firebug the warning given is:
'Scripts may not close windows that were not opened by script.'
Please help me out on any other alternative.
Firefox seems to answer that question: 'Scripts may not close windows that were not opened by script.'
This is a security measure. Imagine every site could close every other page you have open, that wouldn't work very well would it?
That's why only a parent window may close its children windows.
There may be a setting Firefox that allows windows not opened by script to be closed by script, but even if there is, what chance is there that your visitors will all have enabled this setting?
You can't work around this problem, it is how Firefox (and certainly other browsers) works. The only answer is to change your approach.
Why are you using windows as popups anyway? This has not been recommended for some time now and is mostly frowned upon. Popups that are actual windows may be blocked by popup-blockers.
You should probably use a modal popup instead of a window