1605361 - dev tools - network tab not showing requests

Status: NEW

(DevTools :: Netmonitor, defect, P3)

Description

[suskind]

Attachment: Screenshot 2019-12-20 at 12.51.06.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0

Steps to reproduce:

In firefox 71.0, loading a page with the network tab open, it doesn't show the requests

Actual results:

network tab doesn't show the requests

Expected results:

Show the requests

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Comment 2

[:Harald Kirschner :digitarald]

Thank you for the report suskind. Can you check Browser Console for any errors when this happens?

Comment 3

[suskind]

(In reply to :Harald Kirschner :digitarald from comment #2)

Thank you for the report suskind. Can you check Browser Console for any errors when this happens?

Thanks, for sure.

The steps were:

Open google.com - Open the browser console - clear any log - open devtools - switch to network tab - reload page

I'm going to attach a new screenshot

If you need more info, I'll be glad to help you with it.

Comment 4

[suskind]

Attachment: Screenshot 2019-12-20 at 22.43.14.png

screenshot attached to new reply

Comment 5

[:Harald Kirschner :digitarald]

Thank you, this helps us follow up. Does the issue persist on Firefox Nightly or DevEdition (they can be installed side by side with Release)

Comment 6

[suskind]

Can't check it right now, I'll try it tomorrow, but I can give you some more information:

The network dev tools was working well until last weekend (one week ago). I was debugging a site, checking the requests and it stopped working between a refresh.

Today I've compared my dev tools settings with a friend at work, he had the same settings than me and everything is working well.

Comment 7

[BugBot [:suhaib / :marco/ :calixte]]

The priority flag is not set for this bug.
:Honza, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 8

[Jan Honza Odvarko [:Honza] (always need-info? me)]

I can't reproduce that problem on my machine (Win 10, Firefox Nightly)
The Network panel is showing requests for me

What could be different in our configs?

Btw. Please check your filter settings too (it happened to me that I had a filter set and filter all requests out)

Marking as P2 (we should investigate whether recent changes couldn't cause this)

Honza

Comment 9

[suskind]

Hi Honza,

as you can see in my first screenshot, the panel is totally "blank". I can't access to the filters.

I'm using OSX and I also checked with more people with the same preferences and they don't have any problem.

Is it possible to reset something for dev tools in the preferences folder, deleting some file or anything else? Without delete another browser preferences. If so, which one?

Thank you

(In reply to Jan Honza Odvarko [:Honza] (always need-info? me) from comment #8)

I can't reproduce that problem on my machine (Win 10, Firefox Nightly)
The Network panel is showing requests for me

What could be different in our configs?

Btw. Please check your filter settings too (it happened to me that I had a filter set and filter all requests out)

Marking as P2 (we should investigate whether recent changes couldn't cause this)

Honza

Comment 10

[Jan Honza Odvarko [:Honza] (always need-info? me)]

1. You could create a new profile, test whether it works (I suppose yes) and compare the two profile folders e.g. interesting would be to see differences in prefs.js

2. Blank panel indicates an exception in React code that break the entire rendering. Your console already shows an exception (related to wrong index or array size). Debugging the code and figuring out what exactly caused the exception (perhaps starting in Waterfall.js) is also an option.

We have "Browser Toolbox" For debugging DevTools see: https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox

Honza

Comment 11

[suskind]

Honza,

in some way, your comment helped me a lot :)

Checking the code in WaterfallBackground.js in line 66 it is using canvas dimensions.

I always use firefox in my laptop screen. I just moved the browser to an external display and increased the window size. Opened the dev tools in network tab and everything worked :) The exception has gone.

So, something was saved with the dimensions when it crashed for the first time and still saved even after restart firefox. Probably for that nobody can reproduce this issue :\

Thank you for your time.

(In reply to Jan Honza Odvarko [:Honza] (always need-info? me) from comment #10)

1. You could create a new profile, test whether it works (I suppose yes) and compare the two profile folders e.g. interesting would be to see differences in prefs.js

2. Blank panel indicates an exception in React code that break the entire rendering. Your console already shows an exception (related to wrong index or array size). Debugging the code and figuring out what exactly caused the exception (perhaps starting in Waterfall.js) is also an option.

We have "Browser Toolbox" For debugging DevTools see: https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox

Honza

Comment 12

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Thanks for the response!

Just for the record:

1. The exception happened on this line
   https://searchfox.org/mozilla-release/rev/e5778df23bdbe9a69682a84c316caa5408d81596/devtools/client/netmonitor/src/widgets/WaterfallBackground.js#66

const imageData = this.ctx.createImageData(canvasWidth, canvasHeight);

2. It's likely that canvasWidth was a huge number. I tried 999999999 and I experienced the same exception

3. I am unsure how that number was persisted, but it could be devtools.netmonitor.columnsData pref that stores width of all columns and width of the Waterfall column has direct impact on waterfallWidth.
   See this code:
   https://searchfox.org/mozilla-release/rev/e5778df23bdbe9a69682a84c316caa5408d81596/devtools/client/netmonitor/src/components/request-list/RequestListHeader.js#136-148

It would be great if we could figure out why big number was passed into createImageData or verify/sanitize the value before usage. Or sanitize devtools.netmonitor.columnsData.

I am keeping this bug opened but changing the priority.

Honza

Comment 13

[Julien Wajsberg [:julienw]]

I got the same problem today on the profiler page. The STR is that I opened the netmonitor and then republished the opened profile.
I got an exception at the same line as said before.

What I noticed while debugging is the values for canvasWidth and canvasHeight:

• canvasHeight: 1
• canvasWidth: 0

I realized that canvasWidth was 0 probably because the devtools window is docked to the right and isn't wide enough to be able to contain the chart. Actually the bug disappeared once I increased the devtools' window width. (and now I can't reproduce anymore, tada).

Comment 14

[Jan Honza Odvarko [:Honza] (always need-info? me)]

The error message associated with this bug (so I can find this report faster next time)

console.error: (new IndexSizeError("Index or size is negative or greater than the allowed amount", (void 0), 68))
JavaScript error: resource://devtools/client/netmonitor/src/widgets/WaterfallBackground.js, line 68: IndexSizeError: Index or size is negative or greater than the allowed amount

Honza