Register for this year’s #ChromeDevSummit happening on Nov. 11-12 in San Francisco to learn about the latest features and tools coming to the Web. Request an invite on the Chrome Dev Summit 2019 website

WebSocket binary message viewer

Click WS to filter out all resources that aren't WebSocket connections.

Figure 5. After clicking WS only WebSockety connections are shown

Click the Name of a WebSocket connection to inspect it.

Figure 6. Inspecting a WebSocket connection

Click the Messages tab.

Figure 7. The Messages tab

Click one of the Binary Message entries to inspect it.

Figure 8. Inspecting a binary message

Use the dropdown menu at the bottom of the viewer to convert the message into
Base64 or UTF-8. Click Copy to clipboard
to copy the binary message to your clipboard.

Figure 9. Viewing a binary message as Base64

Capture area screenshot in the Command Menu

Area screenshots let you capture a screenshot of a portion of the viewport. This feature
has been around for a while, but the workflow for accessing it was quite hidden. Area
screenshots are now available from the Command Menu.

Focus DevTools and then press Control+Shift+P or
Command+Shift+P (Mac) to open the Command Menu.

Figure 10. The Command Menu

Start typing area, select Capture area screenshots, then press Enter.

Drag your mouse over the section of the viewport that you want to screenshot.

Figure 11. Selecting the portion of viewport to screenshot

Service worker filters in the Network panel

Type is:service-worker-initiated or is:service-worker-intercepted in the Network panel filter text box
to view requests that were caused (initiated) or potentially modified (intercepted) by a service worker.

Consider Canary

If you're on Mac or Windows, consider using Chrome Canary as your default
development browser. Canary gives you access to the latest DevTools features.

Note: Canary is released as soon as its built, without testing. This means that Canary
breaks about once-a-month. It's usually fixed within a day. You can go back to using Chrome
Stable while Canary is broken.

Discover other DevTools features

Below is a list of everything that's been covered in the What's New In DevTools series.