 Howdy, here's what's new in DevTools in Chrome 74. First up, DevTools now highlights all nodes affected by a CSS property. Here, I've got DevTools open alongside the DevTools homepage. I want to view the styles for this paragraph, so I click Inspect and then I click the paragraph. When I hover over margin, I see orange boxes before and after each paragraph node. This means that the margin property I'm hovering over applies to all these nodes. When I change padding to 10 pixels and then hover over that, I see green boxes around the nodes. The Audits panel has a new tap targets audit as well as a new badging system for the PWA audits. The new tap targets audit checks that interactive nodes like buttons and links are usable for mobile users. For example, if a button and a link are too small and too close together, a mobile user may tap the link by mistake when they actually meant to tap the button. In this report, the audits panel is saying that the file of bug link is overlapping the view source link. To simulate mobile and see this problem myself, I'll click toggle device toolbar and pick an arbitrary mobile device, say Pickle 2. When I scroll to the bottom, I see the file of bug link with the view source link right below it. So it makes sense that these tap targets might be too close on mobile. In general, to pass the audit, I need to make sure that the targets are at least 48 pixels tall and 48 pixels wide with 8 pixels of space between targets. Moving on to the PWA category, when you pass a section, such as fast and reliable, you get a badge, and if you pass all three sections, you get a check mark for the PWA category at large. You can now view binary WebSocket messages from the network panel. To view WebSocket messages, go to the network panel, click the row that represents a WebSocket connection, then open the messages tab. A binary message from the browser to the server has a green up arrow next to it, and a binary message from the server to the browser has a red down arrow next to it. Click a binary message to view its content in the section below the table. Click the format list to convert from the default hex to base 64 or UTF-8, and click copy to copy the message content to your clipboard. The command menu now has a command for capturing area screenshots. Press control shift P or command shift P on Mac to open the command menu, start typing area, then press enter to run the command. Drag your mouse over the section of the viewport that you want to screenshot, then release your mouse to capture the screenshot. You can now filter the network log to only show requests that a service worker caused or intercepted. Type is service worker initiated to view requests that were caused by a service worker, or type is service worker intercepted to view requests that matched a service worker route. The performance panel now marks up long tasks and first paint. Here, I've got a recording of the page load performance of Google Maps. Tasks are now shown at the top of the main thread flame chart. Long tasks have a red triangle in their top right corner. In the timing section, the new first paint marker is shown. Here's a bonus tip on a lesser known feature that's been in DevTools for a long time. By default, the styles pane shows hex color codes. To view RGB or HSL, hold shift, then click the color box. That's all for Chrome 74. Leave me questions and feedback in the comments. Otherwise, I'll see you in six weeks for Chrome 75.