Recent Edge update broke devtool?

Question

With the recent edge update to 137.0.3296.52, devtools - Network - Preview is very small (300*150). It seems to be the iframe dimensions.

The previous build was working fine. (136.0.3240.104)

I've found a CSS (requestHTMLView.css) that, if I add width and height, it will preview correctly. But this only works until I load another page.

Is there a way to fix this, editing the iframe dimensions permanently?

Answer 1

Good day!

Welcome to Microsoft Community. Thank you for sharing your concern with us today and we hope that all is well. It looks like Edge 137 introduced a change that affects the DevTools Network Preview iframe dimensions, making it much smaller than before. You're not alone others have reported this issue.

Possible Workarounds

1. Modify CSS Temporarily – As you mentioned, editing requestHTMLView.css works, but only until the page reloads.
2. Use Edge Canary or Beta – Microsoft may have addressed this in Edge Insider builds. You can check the Edge DevTools release notes for updates.
3. Report the Issue to Microsoft – If this is a widespread problem, Microsoft may release a fix soon. You can submit feedback via Edge Settings > Help and Feedback > Send feedback.
4. Check for DevTools Updates – Sometimes, Microsoft rolls out fixes in Edge DevTools updates separately from browser updates. Keep an eye on Microsoft’s forums for discussions on this issue.

Regards,

Fritz-Bald

Microsoft Community

Moderator

Answer 2

Ok this works a lot better than my fix. Hope the dev folk fix this though.

Chrome was fixed (had the same problem) but still waiting for Edge.

Thank you very much for this!

Answer 3

Possible Workarounds

1. Modify CSS Temporarily – As you mentioned, editing requestHTMLView.css works, but only until the page reloads.

If you don't want to reapply the changes every time the page reloads / for every single file you inspect, you can override the file with a local copy:

1. Open any page that loads an HTML file
2. Open devtools and navigate to the Network tab
3. Click on the HTML file that the page loaded (reload the page if it isn't displayed here)
4. Rightclick the frame that displays the HTML file and click Inspect as you would on any other website
5. You are now in the devtools element inspector of devtools itself
6. Navigate to the Sources tab and then go to top > devtools > bundled > panels > network
7. There you will find the requestHTMLView.css file
8. Rightclick that file and select Override ContentHint: If you don't have an override folder already, Edge might ask you to create one in order to continue
9. Add some css to the file that suits your needs like so:

div.html.request-view {

width: 100%;

height: 100%;

padding: 20px;

}

.html-preview-frame {

width: 100%;

height: 100%;

box-shadow: var(--drop-shadow);

background: var(--ref-palette-neutral100);

color-scheme: light;

flex-grow: 1;

}

---

Once you've done that, your changes will last for all files you open in that particular devtools window - but only as long as the devtools for that particular devtools window are also opened. If you close them or open devtools for a different page, you'll have to open that page's devtools' devtools again as described in steps 2 - 5 (but you don't have to edit anything anymore - just open the devtools and your CSS will take effect).

It's far from a perfect solution, but still better than to reapply the changes every 30 seconds. If anyone knows how to make the override files for devtools work without having to open the devtools' devtools, let us know.

Answer 4

Tried Canary and Beta but seems to have the same issue.

DevTools updates only go up to Edge 136

Sent an issue reporte to MS, hopeful on that one!

Going to keep editing the css for now.