Chrome 76 – What’s New in DevTools  Chrome 76 – What’s New in DevTools htmlIMG 5edae99766efb

Chrome 76 – What’s New in DevTools

[Music] hello here's what's new in dev tools in chrome 76 first up autocomplete in the Styles pane now supports keyword values here I want to make this h1 bold I can't remember what property I need but I know the value should be bold in this older version of Chrome when I type bold nothing shows up now in chrome 76 when I type bold the Styles pane autocompletes to font-weight:bold which is exactly what I want in general if you remember what keyword value you want but can't remember the property name try typing the value and the autocomplete should help you finish the declaration there's a new UI for network settings on this older version of Chrome note the throttling menu and offline checkbox here on the right when I make my window narrow I can no longer access those options to fix this usability issue chrome 76 now has a network settings pane this is where you'll now find the options use large request rows show over view route by frame and capture screenshots the network panel now has prominent buttons for importing and exporting our files after logging network activity press the new export button to download the log as JSON and share it with your colleagues your colleagues can view the log in the network panel by clicking the import button and then selecting the HAR file that you provided them our exports now include WebSocket messages first I create a WebSocket connection then send a message which also gets echoed back then click export to save the log as a horror file then open the file and search for WebSocket messages and I can see the messages that I just logged the memory panel now reports total memory usage in real time down here is the total memory usage next to that is the trend over the last two minutes red text with an up arrow means that memory you is increasing green text with a down arrow means that memory usage is decreasing the service worker pane now lists port numbers in its titles back in this older version of Chrome I've developed a few sites on localhost many of them use service workers and it's not easy to see which Service Worker belongs to which port in chrome 76 the port is now listed in the title for easier scanning the application panel now logs background fetch and background sync events to log background fetch events go to the application panel open the background fetch pane then click record after triggering background fetch lifecycle events like background fetch registered or log to the table the background sync pane works the same way the experimental puppeteer for Firefox project was announced at Google i/o 2019 which means you can now automate Firefox and Chrome with the same node API here I've got a sample no script that instantiates Firefox and Chrome and runs an integration test on both browsers when I run node example Jas Firefox launches then the puppeteer documentation site opens then page is inserted into the search bar after that the test is repeated with chrome by the way we're mentioning puppeteer in this dev tools video because you can use it to automate tasks that were previously only possible in dev tools for example you can use page screenshot to take screenshots and coverage dot start J s coverage to extract code coverage data here's a bonus tip Microsoft's accessibility insights extension has a handy feature for visualizing tap stops for example I open the extension go to ad-hoc tools enable tap stops and then as I tap through the page I see a trail of tap stops to share this visualization with colleagues I open dev tools open the command menu from the main menu then run the capture full-size screen shot command thanks for watching we'll be back in six weeks for chrome 77 [Music]

Chrome 76 – What’s New in DevTools pexels photo 4050338

CATEGORIES
TAGS
Share This

COMMENTS

Wordpress (0)
Disqus ( )