Check the performance of Chrome Extension - performance

I want to check the performance of Google Chrome extensions of Chrome (like the loading time of backscripts), its loading time, and memory requirements. This means I've added an add-on and want to check after adding it their is a decrease in the performance of Chrome or is same. I there any tool for that.

Chrome provides useful tools to monitor your extension through the built-in Chrome DevTools.
If your extension is a popup, right click in it and choose Inspect element.
If your extension runs in background, go to the extensions page and click on the link background page of your extension.
In there you can:
evaluate network performance
profile the application Timeline
profile the JavaScript execution
Google Developers' ressources are the best way to learn more about these tools.

Related

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.

chrome developer tools, what's loading?

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.

Google chrome frame - how does it work?

I'm looking into chrome frame and I'm wondering how it works.... http://scriptsrc.net shows that it's a javascript that can be embedded on the page....
http://code.google.com/chrome/chromeframe/ shows it as an install file... does the JS prompt for an installation or something?
Google chrome frame is a plugin (think Adobe Flash) for Internet Explorer, that replaces core modules of IE (unlike Flash), like layout/rendering and javascript. But the UI remains. Then there is some javascript that can detect if this is real IE or IE+Chrome, and also offer an install option to the user. Also there is a HTTP-header and a meta-tag that are required to switch IE to chrome mode, when available.
The JavaScript is to detect it and enable it if it's there. (scriptsrc is just giving you the link to the file, which is on the Google CDN.) The end user does have to do a one-time install of it, it's a plug-in (like Flash or Java). Quoting from this page in the Google documentation:
In Internet Explorer, check() determines if Chrome Frame is installed. If not, the user is prompted to install it.

Simulate Offline Mode for HTML5 Cache Testing

I have an HTML5 application that requires offline support. For running the application, I use a local Apache server. I am trying to figure out what the best way is to simulate offline mode.
Currently, in Firefox I disable my Air-Port to simulate offline mode, but this is a pain.
Any suggestions? I am open to using other browsers, if a method exists that doesn't require turning off my Internet.
For Firefox
☰ (hamburger menu)->More->Work Offline
Google Chrome doesn't appear to have this feature
Edit:
Also, another alternative is slightly more time-consuming to setup in the beginning but might be worth it. For Firefox/Chrome there should be proxy plugins, set up a fake/bad profile for each so that you proxy to something that doesn't exist... like 127.0.0.20:8080. After that you can switch the proxy setting on and off to emulate a full-stack test.
The other answers are out of date. The only place this appears in Firefox v92 is under
File > Work Offline
The File menu can be accessed in the top left of Firefox by pressing the ALT key.
Be warned that this does not prevent traffic from "localhost" loop-back itself, unless you additionally turn on
network.disable-localhost-when-offline
preference in about:config.
Bugzilla issue: Add option to disallow connections to localhost while in offline mode.
In Chrome you can open developer tools switch to the network tab and set throttling to offline
For Firefox, from the ☰ (hamburger menu), choose Web Developer > Work Offline.
For Chrome, open DevTools and select the Network panel. Throttling is set to Online (Disabled) by default. From the dropdown menu, you can choose presets Fast 3G and Slow 3G, but to simulate Offline Mode, you want to choose Offline.

How to know the real size of a web page?

I wan't to know the real size of a web page (HTML + CSS + Javascript + Images + etc.) but from the browser side, maybe with a software, Firefox Add-On or similar?
Use firefox, and get FireBug.
Then get the YSlow addon for firefox.
For IE, you can get the DebugBar which comes pretty close to giving the same information.
YSlow is a FireBug plugin (Firebug is a FireFox plugin), and it works great.
If you meant the entire website, you could get HTTrack (Software) and download the entire site... just be careful.. people don't like it when you do that!
I think the Firefox Plugin Extended Statusbar can do that for you.
It will give detailed information about what has been downloaded, including the size of the downloaded data.
If you can't or don't want to use firefox and its plugins, you can use Pingdom Tools.
Firefox now embedded developper tools (in the tools menu, or Ctrl+Shift+S) has a "Network" tab which allows for detailed monitoring of size and load time of a webpage. The context menu (right click) allows to save data in HTTP archive format (HAR).

Resources