1899149 - HTTP header exceeding a length of 9999 is not displayed and cannot be copied

Status: NEW

(DevTools :: Netmonitor, defect, P3)

Description

[tautedorus]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:126.0) Gecko/20100101 Firefox/126.0

Steps to reproduce:

Open Developer Tools and inside the web console send an HTTP request that has an "Authorization" header exceeding a length of 9999 characters, e.g.:

const headers = new Headers({
'Authorization': Array.from(
{ length: 10_000 },
() => Math.random().toString(36)[2]
).join(''),
});
fetch('https://dummyjson.com/todos', { headers })
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.error(error));

Actual results:

Open the network monitor and inspect the request. Notice that the value of the "Authorization" request header is not being displayed.

Right-click the header entry and click "Copy Value". Notice that "[object Object]" is copied to the clipboard.

Right-click the header entry again and click "Copy All". Notice that the "Authorization" header value in the clipboard is an object with a property "type": "longString" and only the first 1000 characters of the actual header value were copied.

Expected results:

The HTTP request header value should be displayed even if it is longer than 9999 characters. It can be displayed truncated but copying its value should copy the entirety of it represented as string and not an object.

Comment 1

[Julian Descottes [:jdescottes]]

Thanks for filing!

The DevTools server is returning long string actors when strings are 10000 chars or longer, and the netmonitor UI is not handling this properly. We should still display the header in the UI (even with an ellipsis), and the copy feature should work 100%.