I'm trying to see a POST request that my browser is making on a certain form.
My problem is that the form is opened in a popup window (js initiated) and when the form is submitted it automatically closes the popup. So when I'm trying to use the developer tools' networking tab I can see the post request but don't have enough time to look into it since the window is closing too fast.
Even if I choose 'preserve log on navigation' it doesn't appear anywhere since the entire window is closing on submit.
Is there a way of opening the developer tools in the context of the entire Chrome application instead of a certain tab?
I don't believe there is. The best two solutions I can think of (that don't actually answer your question but I think achieve your aim) are:
Use another tool like Fiddler - http://fiddler2.com/ It's really good but only available for windows :(
It's a messy workaround but you could just comment out the line that closes the window while you carry out your debugging and then reinstate it once the issue is fixed.
Related
I am trying to build a web app (to learn about WebSockets and adaptive behavior) that polls different social media sites and shows all the latest updates in one place. I want to make the page stop updating while out of focus, and then update again when in focus.
Testing the out of focus behavior has been very difficult, since I have to rely on logs to ensure that my app is working properly, and cannot have the window open in one monitor and work on the code in another monitor.
My question is:
Is there a way to "force" the tab to think that it is in or out of focus, like force element state in DevTools, but for the entire tab.
I am running Chrome on Windows 10. I could not find a way to do this using DevTools, and do not want to setup a whole testing framework just for such a simple thing.
Thank you for your time.
Open the Command Menu.
Run the Emulate a focused page command.
If you create a Live Expression and set the expression to document.hasFocus() you'll see that the page always thinks it's in focus after you run the Emulate a focused page command.
I'm debugging an SSO app and I need to prevent the window from closing so I can inspect the requests and responses. I tried to disable Javascript but the login flow requires Javascript. Network > Preserve Log doesn't work either. Pinning the tab didn't work either. There are several redirects before it closes. I do not have access to the code of the SSO server. How can I prevent a script from closing the window?
I was able to do it by opening the link in an Incognito Window. When it tried to close itself, Chrome gave the warning
Scripts may close only the windows that were opened by it.
I didn't have a script open the window in the first place. Instead I was using target="_blank", but Chrome may have equated that with a script. (window.opener was set.)
See if these links help:
how to block users from closing a window in javascript?
Take a look at onBeforeUnload.
It wont force someone to stay but it will prompt them asking them whether they really want to leave, which is probably the best cross browser solution you can manage. (Similar to this site if you attempt to leave mid-answer.)
<script language="JavaScript">
window.onbeforeunload = confirmExit;
function confirmExit() {
return "You have attempted to leave this page. Are you sure?";
}
</script>
This link might also apply to your specific use case:
Prevent script opened windows from closing them
When a site gets stuck in chrome with the 'loading www.site.com' status, Is there anyway to know which of the elements on the DOM is delaying the load? for example, it can be an external js file or image that is taking long time to load. I tried using the network tab in the DeveloperTools, but it only shows the elements already loaded and the time they took. I couldn't find a way to see which element is stuck.
I found a way that I'm not sure it works in all cases, but it did for me. I used the Timeline tab (now shown in the Performance tab), it's one of the tabs in Chrome Dev Tools.
Open Chrome Developer tools (F12 or CMD + Alt + I in Mac) and click the Performance tab
Make sure you drag the grey timeline bar all the way to the right, you want to see the most recent section of events so you can find what's getting stuck:
Check just down below the records sidebar. If you don't see this like in the capture below, try toggling the icons, there are different view modes. Now, going all the way down I found these. It doesn't look like that's going well. Obviously some kind of infinite loop in some random code:
I couldn't find out if it was an extension itself or some other bit of code. Clicking through I only could find // Copyright 2014 The Chromium Authors. All rights reserved..
Checking in Incognito mode clear of extensions, the website loads just fine.
I'd also advise to check the Console tab to see if there are were any errors that might cause the infinite loading thing. You'll often find clues there.
I am referring to the save feature in the 'Sources' panel of the Chrome Dev Tools. I have been using this feature for a long time in the stable release of Chrome, but after installing the build from the developer channel, I notice that once I have saved the file the first time, Chrome no longer prompts me to save and just does it automatically after every change I make.
This is quite a pain, as I make a lot of changes experimentally in the dev tools whilst debugging which I don't wish to save, I would like Chrome to save the file only when I explicitly tell it to.
Does anyone know if there is a way to disable this automatic CSS saving?
(Apologies for no screenshot, my PrtScn key seemingly won't operate when I am in a context menu)
Update:
I have reverted to the current stable build, 27.0.1453.93, and the behaviour appears to be the same.
I am having the same problem, I can only offer workarounds: use another browser, such as Firefox, for doing tests!
Alternatively you could launch another instance of Chrome with a different profile. You could also launch a Chrome "Incognito Window", it seems to not apply the filesystem mappings.
I normally use an Incognito Window or inline styles to test changes.
Alas, I learned after reading a post by Google's dev relations person
that the automatic save cannot be disabled and it seems that's the way
it's going to stay.
html5rocks.com/en/tutorials/developertools/revolutions2013
– tommypyatt Feb 21 '14 at 14:22
While not solving the issue directly, it is a decent work around:
In Chrome, in the css inspector you can click and hold the + button, then choose to add your changes to the inspector-stylesheet. It's not as convenient as directly editing in your css-selectors, but what you write will all be in inspector-stylesheet.css, so not saved to your project. Then when you are happy with your changes, you can manually put them in to your css.
Is it possible to access a Chrome Extension from outside the browser?
I would like to be able to run a command from my text editor (MacVim) that refreshes the page on which I am working. From reading the Chrome Extension documentation it looks like I could try something really hack-y, like opening a page that uses Chrome message passing to refresh another page, but there does not seem to be a strait-forward way to do this.
I am running Mac OS X. I've tried the shell command:
$ open <url>
But that opens a new tab every time in Chrome, so this doesn't help when I'm using the developer tools
You are right, there is no straight forward solution.
Your hacky approach is the simplest way to go. Only instead of messaging I would put a tab creation listener into background page, and when a tab with some special URL is created (http://example.com/?do=refresh) - close it and refresh the next selected tab. You will see new tab flickering, but that's as good as it gets.
You can also look into using WebSocket API, for which you would need to write a server side app (which you need to call from your editor somehow). Not sure how this all might turn out.