chrome developer tools, what's loading? - debugging

When I open a site the loading spinner keeps spinning in the favicon area and I see the 'waiting for site.com' message.
It seems to me like the site has already fully loaded, but evidently not.
How do I check what's still loading?
I'm happy to use Firebug as well if it's easier to see there.
Edit:
Network tab doesn't indicate anything is still loading.
Edit: is there any way to filter network tab to see what's still incomplete vs already completed requests

You can use developer tools (Network tab) for this analysis.

To check what's still loading, first open the Developer Tools (press F12) and switch to the Network tab. Then load the site; you'll see all the requests the page makes. From there, you'll be able to see which aren't yet done.

Related

Firefox always show development tools

Is there a way to always show developer tools when opening a new tab in Firefox?
In the past I always used Firebug, where I used to just detach a window, and it just automatically targetted whichever tab I was on.
However since it's now discontinued, I'm using Firefox's built in developer tools and am having an issue where every time I open a tab, I have to manually enable developer tools, then refresh the page every time.
This is fine most of the time (if not a little inconvenient), however if you are posting data, the extra refresh of the page can cause duplicate submission problems etc.

Which tab is "Google Chrome Helper" running on?

In MacOS in the Activity Monitor Google Chrome extensions show as "Google Chrome Helper". These often take up much of the CPU time. Is it possible to determine which tab a given Google Chrome Helper process is running on?
Other people have suggested setting the plug-ins run mode to "Click to play". It seems that this doesn't cover all instances of the helper, since I already have it set to click to play. As you can see from the image below, there are MANY instances of this helper running. Anyway this doesn't get to the heart of the question- which tab is the process running on.
Chrome's built-in Task Manager (accessible from Menu > More tools > Task manager) will show you a per-tab resource utilization.
If case the culprit is extension code or a plug-in running in a normal tab, you won't be able to identify it with only that; extension entries in the Task Manager are only for background pages of extensions.
You may be able to investigate further with Dev Tools profiler.
I have quite a good experience with this "Google Chrome Helper" and how to debug the notorious problems on Mac.
1. CHROME EXTENSION
In this case go to the 3 dots you find on the right upper side of your browser and then More Tools > Extensions, here you can have an overview of all your extensions.
Deactivate all of them and relaunch Chrome.
If the issue is resolved we can now point out that the issue was related to one of your Extension. But what extension? You can now reactivate one by one while you have your Activity Monitor open and see when the "Google Chrome Helper" is trigged.
2. CHROME EXTENSION OR CHROME SYNC
Sometimes you can find the Chrome extension that is draining your CPU but you have to work and keep that Chrome Extension available. Or maybe that Extension is managed by your Company and you cannot disable it.
In this case you have to click on your Chrome account on your browser and sigh out from all of your Accounts.
Now close your browser, reopen it and "Google Chrome Helper" shouldn't bother you at all. Well, this is normal, because you are not signed in. Now Sign in into Gmail but don't never ever click on the "Turn on sync..." button
Now you can also install the Chrome Extension that was giving you pain and you shouldn't experience any problem. Just don't touch that "Turn on sync..." button.
3. I STILL HAVE PROBLEMS
Well, in this case you are facing something I haven't faced myself. The only suggest you I can give you is to debug the issue by yourself. When the CPU is spiking high open the Activity Monitor and target the "Google Chrome Helper", look at that line and take the PID number (in the picture that you can see in the question is 29048).
Now open a terminal and run:
killall -9 29048
This way you have now killed the process itself. Try to spot what has changed in your Chrome: maybe an Extension has been deactivated, maybe a tab was closed, maybe a webpage has become unresponsive. Dig and you will find the solution.

Google developer console not loading in Chromium on Debian 7

I am using Debian 7 and Chromium browser.
I'm setting up OAuth authentication via google developer console, but for some reason when I enter https://console.developers.google.com, browser starts loading the page, saying "Waiting for console.developers.google.com" and is stuck forever.
Once in ~7 times it eventually loads the page, but then when I click on any tab, it freezes again.
Anyone experienced something like that?
P.S. On Windows everything's fine.
P.P.S The problem is specific for Chromium browser. Chromium also glitches with google+ notifications - they won't load.
you can try loading Google developer console in privacy mode, meaning opening the console from https://cloud.google.com/ in an incognito window.
"If it works there, it means one of your extensions is causing the security problem and you should remove it." as it explained on the Google Chome Help page :'Fix connection errors.' (Your connection is not private > Tip 2: Try opening the page in incognito mode.)

In Firefox Developers Tools, in the Network Monitor, the tab Preview is always empty

I'm using "Firefox Developers Tools" to debug my webapps. The tab Network Monitor show all request, and in each one I can see Headers, Cookies, Responses, Timing but the Preview tab not show the content, it's always empty, else even when the Response (from server) is an html.
Who ever happened something similar?
Apparently only HTTPS sourced pages are rendered in preview. I am figuring out how to resolve this for local development for one week now. Dont want to port back to Chrome couse it is really slow but if i cant resolve this ... will have to.

Debugging in IE

I've got this weird bug. The progress bar in IE's bottom-window status bar keeps incrementing very slowly after an Ajax POST. At least that's where I think the problem is.
How can I tell what the hell IE is doing that's causing the progress bar to keep going? In FireFox, I would just look at the Console tab in FireBug and see what's up.
I turned Fiddler on but it doesn't pick up any HTTP requests or responses being sent.
What can I do in IE?
I'm not very experienced in Web debugging but you might try the Developer Tools that come in Internet Explorer 8. It's under the Tools menu, or just hit F12. I think the Profiler tab may be helpful. I had heard somewhere that the IE8 Tools were created to mimic Firebug's feature set as closely as possible.
An another tool for checking HTTP requests is the Debugbar
This might not help if Fiddler isn't picking anything up, but HttpWatch is a great http request debugging tool for IE.
I don't think there is a problem here, earnestly. IE has a bug where it shows that a request has not yet been completed when it has. This has been around for a while now, and I have tested my own applications against it. There is nothing happening and there are no connections waiting for a response, yet the browser still thinks there is an open connection.
i recently discovered this tool for earlier IE versions which can be used in combination with the IE debugger for network profiling and more behind the scenes debugging
http://www.ieinspector.com/httpanalyzer/
open IE ...thn press F12 ...here you will get many menus..to debug script choose "SCRIPT" option..and start debug...and if there is any error on page...thn u will get on Console option..also see on attach image...

Resources