Firefox 122.0.1 x64
Windows 10 Home x64 22H2

I wanted to see the network performance of a web page, because it is
very slow to initially load, but quick thereafter to update. I load a
login page, hit F12 to open the Dev Console, click on the Network tab,
click the stopwatch icon to start monitoring, and enter my login
credentials in the web page to get the next web page. I wait until the
next web page which initially takes about 50 seconds. The Network tab
shows circle graphs and a list of resource types to indicate how long
all those types are taking to load. There is no Pause button in the
graph display to pause/stop recording further network traffic. I have
to hit the Back button to switch from the graph display to a grid
display of every resource, so there is a Pause button to stop monitoring
traffic. However, once I switch into the grid view to pause, I cannot
get back to the graph view showing aggregate timings by resource type.

In Dev Console, Network tab, clicking the stopwatch icon starts the
network monitoring and shows graphs, but no pause button to stop the
monitoring. Hit the Back button to see the grid view to get a Pause
button, but no way to redisplay the graph view.

Maybe I'm missing where there is a Pause function in the graph view when
monitoring network traffic, or missing how to switch from grid view to
graph view.

VanguardLH wrote:

> I load a login page, hit F12 to open the Dev Console, click on the
> Network tab, click the stopwatch icon to start monitoring, and enter
> my login credentials in the web page to get the next web page. I
> wait until the next web page which initially takes about 50 seconds.
> The Network tab shows circle graphs and a list of resource types to
> indicate how long all those types are taking to load. There is no
> Pause button in the graph display to pause/stop recording further
> network traffic.

Do it in a different order?

load dev tools, go to network tab, reload your target page, enter logon
creds, wait until it finishes, press pause, then click on the *other*
stopwatch in the bottom/left of status bar ...

On 2/16/24 01:06 PM, VanguardLH wrote:
> In Dev Console, Network tab, clicking the stopwatch icon starts the
> network monitoring and shows graphs, but no pause button to stop the
> monitoring. Hit the Back button to see the grid view to get a Pause
> button

No bearing on your question but hey, that's cool. My home page loads in fractions of a second, but
I saw a huge bottleneck when downloading my background image 1920x1080. It's nothing more than a
gradient, and I just changed it in body (css) to do linear-gradient rather than image.

Cool. Not that anyone is going to know and saving 100ms is reallllly big huh!! LOL
--
Linux Mint 21.3 Cinnamon 6.0.4
Al

Andy Burns <usenet@andyburns.uk> wrote:

> VanguardLH wrote:
>
>> I load a login page, hit F12 to open the Dev Console, click on the
>> Network tab, click the stopwatch icon to start monitoring, and enter
>> my login credentials in the web page to get the next web page. I
>> wait until the next web page which initially takes about 50 seconds.
>> The Network tab shows circle graphs and a list of resource types to
>> indicate how long all those types are taking to load. There is no
>> Pause button in the graph display to pause/stop recording further
>> network traffic.
>
> Do it in a different order?
>
> load dev tools, go to network tab, reload your target page, enter logon
> creds, wait until it finishes, press pause, then click on the *other*
> stopwatch in the bottom/left of status bar ...

Alas, the stopwatch icon, no matter if shown when the Network tab is
selected, or after clicking on Reload, pausing, and clicking on the
stopwatch icon in the grid view results in starting monitoring anew. In
grid view, the stopwatch icon's highlight says "Start performance
analysis", and that's what it does: start analysis from that point
onward, not the traffic that was monitored up to the pause. You get
switched to the graph view, but the pause is removed, and traffic is
monitored again ... from that point forward.

The stopwatch icon in both places *starts* recording network traffic at
that point. In grid view, I can click the Pause button, but clicking
the stopwatch icon in grid view /starts/ monitoring from that point. I
do not get the graph view of what was monitored up to the pause point.

When I pause which requires selecting the grid view, I don't see a way
to show me the graph view of the traffic BEFORE the pause point. The
grid view is handy to see timings for individual resources, but the
graph view is handy for seeing timings for aggregates of resource types,
like js, xhr, css, fonts, images, and html. For example, the graph view
may show xhr is taking longest. I click Back to show the grid view, and
deselect all the resources types except XHR. As I suspected, the vast
majority of those resources are coming from res.cdn.office.net which is
also what I see repeatedly in the status bar showing Firefox is waiting
for each of those CDN (Content Delivery Network) resources, and
apparently one at a time instead of in parallel. Some of the XHR
resource types are .js, but most are for .json.

XHR resources are taking long to retrieve from res.cdn.office.net.
There are 16 errors reporting content-security-policy violations,
cross-origin requests getting blocked, and downloadable (remote) Aptos
fonts fail to retrieve or have flaws.

Content-Security-Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). content-fontface.js:50:26
None of the “sha256” hashes in the integrity attribute match the content of the subresource. The computed hash is “47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=”. 14 0
Content-Security-Policy: The page’s settings blocked the loading of a resource at https://js.monitor.azure.com/scripts/c/ms.shared.analytics.mectrl-3.gbl.min.js (“script-src”). me:1:13081
Content-Security-Policy: The page’s settings blocked the loading of a resource at https://js.monitor.azure.com/scripts/c/ms.shared.analytics.mectrl-3.gbl.min.js (“script-src”). me:1:13081
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at data:text/plain;base64,Cg==. (Reason: CORS request not http).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.taboola.com/2.0/json/msn-outlookcom-us/user.sync?app.type=desktop&app.apikey=5b8cb6ece5c7b124b55d084f3a6ee7520d2f0966&gdpr.applies=no&consent.daisybit=. (Reason: CORS request did not succeed). Status code: (null).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at data:text/plain;base64,Cg==. (Reason: CORS request not http).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.taboola.com/2.0/json/msn-outlookcom-us/recommendations.get. (Reason: CORS request did not succeed). Status code: (null).
downloadable font: kern: Too large subtable (font-family: "Aptos" style:normal weight:400 stretch:100 src index:0) source: https://res.cdn.office.net/assets/mail/fonts/aptos/v1.93.230727224051/aptos/Aptos.woff2
downloadable font: Table discarded (font-family: "Aptos" style:normal weight:400 stretch:100 src index:0) source: https://res.cdn.office.net/assets/mail/fonts/aptos/v1.93.230727224051/aptos/Aptos.woff2
downloadable font: kern: Too large subtable (font-family: "Aptos" style:normal weight:700 stretch:100 src index:0) source: https://res.cdn.office.net/assets/mail/fonts/aptos/v1.93.230727224051/aptos/Aptos-Bold.woff2
downloadable font: Table discarded (font-family: "Aptos" style:normal weight:700 stretch:100 src index:0) source: https://res.cdn.office.net/assets/mail/fonts/aptos/v1.93.230727224051/aptos/Aptos-Bold.woff2
downloadable font: kern: Too large subtable (font-family: "Aptos Display" style:normal weight:400 stretch:100 src index:0) source: https://res.cdn.office.net/assets/mail/fonts/aptos/v1.93.230727224051/aptos-display/Aptos-Display.woff2
downloadable font: Table discarded (font-family: "Aptos Display" style:normal weight:400 stretch:100 src index:0) source: https://res.cdn.office.net/assets/mail/fonts/aptos/v1.93.230727224051/aptos-display/Aptos-Display.woff2
downloadable font: kern: Too large subtable (font-family: "Aptos Narrow" style:normal weight:400 stretch:100 src index:0) source: https://res.cdn.office.net/assets/mail/fonts/aptos/v1.93.230727224051/aptos-narrow/Aptos-Narrow.woff2
downloadable font: Table discarded (font-family: "Aptos Narrow" style:normal weight:400 stretch:100 src index:0) source: https://res.cdn.office.net/assets/mail/fonts/aptos/v1.93.230727224051/aptos-narrow/Aptos-Narrow.woff2

Clicking the stopwatch icon in the grid view starts monitoring anew.
The web page isn't slow after the initial load, so those stats are of no
value. The web page isn't slow if a cached copy is used out of
Firefox's page cache. The web page is slow to finalize painting when
there is no cached copy. I have Firefox configured to purge all locally
cached data on its exit, so no cookies, and no web cache. A visit to
the site is new everytime. No caching to let the site pretend it is
faster than it really is.

So far, in graph view (click the stopwatch icon), there is no Pause.
Switching to grid view has a Pause button, but I cannot get back to
graph view to show its summary of the network traffic already monitored
/before/ the pause.

Wasn't there an add-on to Firefox (which also used and communicated to a
separate local proxy through which the traffic got routed) to get stats
on network traffic? I think it started with an "f". It let you profile
the performance of a web site. As I recall, a later version of it
dubbed f-something 2 incorporated the use of a local proxy supposedly
because it could better monitor the web traffic than did Firefox's own
network monitoring, but perhaps that was before some point when network
monitoring was missing or lackluster in Firefox, so later when FF's
network monitoring got better then this performance metrics add-on was
superfluous. I found the Performance Analyser add-on
(https://addons.mozilla.org/en-US/firefox/addon/performance-analyser/),
but that's not the one I remember using before.

I'm new at trying to use Firefox's performance monitoring. I don't
design web sites, and the web docs I create are very basic. Hell, I'm
still using the deprecated HTML tags instead of wasting time on CSS.
Because my FF purges all locally cached data on its exit, every visit to
a web site is like a new or first visit, so no caching in the web
browser to make a web site pretend it is faster.

I thought maybe I could look at FF's performance profiling to see if
something was obvious in causing long lags in retrieving resources, or
painting the web doc. I started with Mozilla's article at:

https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/performance_analysis/index.html

but it also lacks mention of how to change from grid view (network
requests list) back to the graph view (pie charts), and WITHOUT
unpausing the capture since I want to see analysis up to the pause
point, not afterward. This is like setting a breakpoint in your code:
you want execution to pause at that point, not keep running thereafter.

VanguardLH wrote:

> So far, in graph view (click the stopwatch icon), there is no Pause.
> Switching to grid view has a Pause button, but I cannot get back to
> graph view to show its summary of the network traffic already monitored
> before the pause.

I'm not clear why you need to pause it, can't you just leave it running?

Or maybe look at Fiddler instead? unfortunately it looks like there's no
longer a permanently free version, only a free trial ...

Andy Burns <usenet@andyburns.uk> wrote:

> VanguardLH wrote:
>
>> So far, in graph view (click the stopwatch icon), there is no Pause.
>> Switching to grid view has a Pause button, but I cannot get back to
>> graph view to show its summary of the network traffic already monitored
>> before the pause.
>
> I'm not clear why you need to pause it, can't you just leave it running?

Because something after the pause point could change the aggregate
resource type timings shown in the pie charts. I want to look at
timings up to the pause point, not afterward. If you've done coding,
you know the purpose of using breakpoints in trying to isolate problems.
Also, if the monitoring continues, I have a lot more entries in the grid
view to contend with that are not relevant to the problem.

> Or maybe look at Fiddler instead? unfortunately it looks like there's no
> longer a permanently free version, only a free trial ...

That's the one I was trying to remember (f-something 2 tool). Looks
like they changed from 2 to classic in the naming. There is the Classic
and Everywhere editions, but unclear is it if they are free. They
mention registration is required to unlock all features. "Try for free"
suspiciously makes it look like trialware. When I click on Pricing at
https://www.telerik.com/fiddler, the Classic edition isn't listed nor in
their https://www.telerik.com/purchase/fiddler purchase page. Their
Everywhere edition is subscriptionware. Their Classic edition only runs
on Windows probably because that's where they started. I'll have to
look some more if anything more (money) is needed than registration to
use their fully-featured Classic edition.

Thanks for the reminder. I couldn't remember this product's name, only
that it might start with "f".

https://learn.microsoft.com/en-us/gaming/gdk/_content/gc/networking/overviews/tools/fiddler-pc
(dated 3/15/2023)
Says Fiddler Classic is free. Their link shows "fiddler2" which is what
I remember, but the link redirects to the Classic edition web page.
Looks like they dropped the "2" and changed to "Classic" in the product
name when they went to their more robust Everywhere edition.

The only reason I'm looking into alternative web analysis tools is just
because there is no Pause button in the pie chart (graph) view in
Firefox's Dev Console Network tab, only in the grid view, and to get
back to the pie charts requires resuming monitoring by clicking on the
stopwatch icon in grid view. Otherwise, the Network tab gives me lots
of info to start looking at which resource types take how long in graph
view and which resources individually are taking long to retrieve in
grid view. Both views are handy, but I want a Pause in graph view, too.
With web docs so highly scripted (dynamic) these days, I'm not trying to
analysis an entire visit to a web site, but just what are the problems
up to a point, especially since the problems disappear after that point.

Without a breakpoint (pause) in monitoring, looks like I'm forced to
export the current monitoring data to a .har file and then delve into
the JSON-formatted crap inside.

https://en.wikipedia.org/wiki/HAR_(file_format)
The specification for this format is produced by the Web Performance
Working Group of the World Wide Web Consortium. This document was
never published by the Web Performance Working Group and has been
abandoned.

In Firefox, when I "Copy as HAR", what's in the clipboard is just too
much shit to look at with eyes. If I "Save as HAR", I tried using
Peazip to look inside the 78 KB .har file, it found nothing inside, so
HAR is not a recognized archive format. When I "Save as HAR" and then
"Import HAR" thinking I could take a snapshot to view later or
statically, like saving state at a breakpoint, the grid list in FF's
Network tab is empty.

So, I'm still floudering with FF's network monitoring not letting me
pause its monitoring to let me focus on a problem, and without
conflating the trace with tons of later traffic not relevant to the
problem, or which doesn't exhibit the problem. If I try Fiddler
Classic, I'll have to spend time reading their help articles at
https://www.telerik.com/support/fiddler-classic, and maybe lurk in their
forums for awhile. However, missing in Fiddler Classic are the nice pie
charts that show timings for aggregate resource types, like js, xhr,
css, images, etc. The individual entries in the grid list let you drill
down to which are slow to retrieve or execute, but the pie charts are
handy to get an overall view of how the different types of resources are
performing.

I have to wonder if the time learning Fiddler Classic wouldn't be better
spent in learning Wireshark. However, I'm analyzing other folks' web
sites, not my own, and I really have more fun things to do in my life
than tell others what's wrong with their web sites. FF's Network tab
gave me some insight due to curiousity, but it's not my job to analyze
and fix web sites of others. Did take long, though, to realize "Just me
a damn Pause button in graph view", or a means to Pause in grid view,
and go back to graph view.

VanguardLH wrote:

> I'm still floudering with FF's network monitoring not letting me
> pause its monitoring to let me focus on a problem, and without
> conflating the trace with tons of later traffic not relevant to the
> problem, or which doesn't exhibit the problem. If I try Fiddler
> Classic, I'll have to spend time reading their help articles

I must dig through the download folders on my old machines, see if I've
got an installer for the free version of Fiddler.

Andy Burns <usenet@andyburns.uk> wrote:

> VanguardLH wrote:
>
>> I'm still floudering with FF's network monitoring not letting me
>> pause its monitoring to let me focus on a problem, and without
>> conflating the trace with tons of later traffic not relevant to the
>> problem, or which doesn't exhibit the problem. If I try Fiddler
>> Classic, I'll have to spend time reading their help articles
>
> I must dig through the download folders on my old machines, see if I've
> got an installer for the free version of Fiddler.

Thanks, but I think I'll go with Wireshark when I get some more free
time that I just must expend on analyzing web sites. The original
Fiddler was an add-on. Then came Fiddler2 that incorporated a proxy.
The add-on communicated with the proxy. Now it looks like they just
went with their proxy much how Wireshark works.