What’s New in DevTools (Summer 2020)
Jan Odvarko
Summer is in full swing and the DevTools team is tirelessly working on its mission to support and empower developers to make the web a better place. Let’s take a look at the list of top things we’ve delivered in the past two months:
Network Panel - slow requests are marked with a turtle icon. Slow = Waiting for the response from the server is > 500 ms (bug). Default value stored in devtools.netmonitor.audits.slow
Console Panel - Blocked requests have a distinct style in the console (bug)
Debugger Panel - highlights errors in code. When JavaScript code throws an error, the debugger will now highlight the relevant line of code and display error details include stack trace. Read more on MDN
Accessibility - Several improvements for a11y contributed by MarcoZ. More parts of the DevTools UI is now accessible to screen readers (bug, bug, bug, bug)
Network Panel - support for Server Side Events (SSE) coming in 81 (Enabled in Nightly). Visualization for text/event-stream content types (bug, test page).
The feature is based on the same user experience as WebSocket Inspector with one improvement - messages are not directly displayed in the Response panel, which improves discoverability and reduces the amount of side panels.
Console Panel - 4XX and 5XX requests are now displayed as error in the console, and don’t need the Request/XHR filter to be enabled (bug)
Remote Debugging Added forward, back, and refresh buttons to improve remote debugging experience. Now you don’t have to touch your device to navigate to different page (bug)
Console - new :block command for blocking requests available in the Console panel (bug, thanks to thelehhman)
:block app.css
