Debugger: Displaying request content makes firefox hang if request is a big form-data blob
Categories
(DevTools :: Netmonitor, defect, P2)
Tracking
(Not tracked)
People
(Reporter: bugzilla, Unassigned)
References
(Blocks 1 open bug)
Details
Attachments
(2 files)
hangs.png
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.89 Safari/537.36
Steps to reproduce:
Debugger -> Network, select a request that uploads a big file, look at the request data. E.g.:
-----------------------------159113805628281337302065762341
Content-Disposition: form-data; name="entity"
events
-----------------------------159113805628281337302065762341
Content-Disposition: form-data; name="id"
undefined
-----------------------------159113805628281337302065762341
Content-Disposition: form-data; name="target"
Media/Public/Events/
-----------------------------159113805628281337302065762341
Content-Disposition: form-data; name="filename"
undefined
-----------------------------159113805628281337302065762341
Content-Disposition: form-data; name="file"; filename="test.png"
Content-Type: image/png
PNG
[unabbreviated binary data gibberish!]
Actual results:
Firefox tries to SYNTAX HIGHLIGHT the rest of the binary data of the request data and DIES if the file is a couple megabytes big.
Bug might depend on content-type or something funky like that.
Expected results:
Don't syntax highlight the request data if the file is a giant blob
|
Reporter | |
Updated•4 years ago
|
|
||
Comment 1•4 years ago
|
||
Bugbug thinks this bug should belong to this component, but please revert this change in case of error.
|
||
Updated•4 years ago
|
|
||
Comment 2•4 years ago
|
||
@Firefox.fan thanks for the report!
This seems to be related to the way we render big POST data (or HTTP Response bodies) in the Network panel.
Can you please provide a simple test case we could use to reproduce the issue on our machines? That would be big help, thanks.
|
|
Reporter | |
Comment 3•4 years ago
|
||
It works with any multipart/form-data, independently of file type. My repro code is below. Just upload a picture of, say, 5-10mb size.
I managed to make firefox say "Request has been truncated", but that is not relevant. The "bug" is, Firefox reliably highlights the blob in the "request payload" field in the debugger/devtools in multiple colors and almost chokes while doing so. (And i would strongly suggest it NOT do that).
My repro goes like this: Open a local sinkhole http server where i can POST a multipart form request to, so then i can inspect then it in the debugger. Just upload a picture of, say, 5-10mb size.
form.html:
<!doctype html>
<html>
<body>
<form action="http://localhost:8000" method=POST enctype=multipart/form-data>
<input type="file" id="myFile" name="filename">
<input type="submit">
</form>
</body>
</html>
//node.js
const express = require('express')
const app = express()
const port = 8000
const fs = require("fs")
app.get('/', (req, res) => {
res.send(fs.readFileSync(`form.html`, 'utf8'))
})
app.post('/', (req, res) => {
res.send('got your file')
})
app.listen(port, () => {
console.log(`fake file upload app listening at http://localhost:${port}`)
})
|
|
Reporter | |
Updated•4 years ago
|
|
|
Reporter | |
Updated•4 years ago
|
|
|
||
Comment 4•4 years ago
•
|
||
I can reproduce the problem on my machine. When inspecting the posted data in the Request panel I am experiencing UI freeze and everything is a lot slower when e.g. changing size of the browser window.
The problem seems to be that the CM editor/element is huge it's 548 x 270230 pixels in my case. See the attached screenshot.
This means that CM is rendering the entire content and it isn't utilizing the virtualization.
The CM editor should adjust its size to only fill the available viewport space.
Just like we do it for the Response panel.
Honza
|
|
||
Updated•4 years ago
|
Description
•