• Fri. Feb 26th, 2021

[Music] hello here's what's new in depth tools in chrome 80 the console now supports three declarations of let and class statements to make it easier to experiment with new code in this older version of Chrome when I declare a local variable called X with a let statement and then try to read eclair that variable with another let statement I get an error in chrome 80 when I read Eclair the local variable it works now to be very clear the read declarations only work in the console it's just a convenience feature to make it easier to experiment it won't work in your JavaScript files moving on dev tools has started to support the dwarf debugging standard which means better web assembly debugging support check out the article called improved web assembly debugging support and chrome dev tools for the full story next up the network panel has a bunch of updates after logging network activity when I select a resource now the resource now gets highlighted with a blue border in the overview the initiator tab shows you the network activity that caused a resource to be requested as well as any network activity that the resource itself cost to show the initiator tab first I select a resource such as fire based performance j/s and then I click initiator in the request initiator chain the resource that I selected is bold which is firebase performance j/s in this example the resource above it is what caused firebase performance js2 get requested so in this case it looks like there is a script tag in the HTML document the resources below fire based performance TAS were requested probably because of fetch or xhr calls within the script you can now show the absolute path or a full URL of resources in the network log right-click the table header and enable the path option to show the path column and then right-click the table header again and enable the URL option to enable the URL column and you'll see new columns in your log you can now set custom user agent strings in the network conditions tab doing this will change the user age HTTP header that Kromah attaches to network requests as well as the value of navigator.useragent press escape to show the drawer click more tools and then select network conditions to show the tab disabled select automatically then enter your custom string in the text box the oddest panel has a couple of updates after you click audits to open the panel you'll see that there's a new configuration UI and you'll also notice this new community plug-in section which will eventually be a way to install extra audits through the Chrome extension store check out the lighthouse evolution post on web dev for more information about plugins the coverage tab also has a couple of updates check out this find unused JavaScript and CSS code guide if you're not familiar with the coverage tab the tab has a new drop-down that lets you specify whether coverage should be covered per function or per block per block gives you more granular data but has more overhead another new change is that code coverage must now be initiated with the page reload you used to be able to turn it on without a reload but that feature has been removed because the data it generated was unreliable here's a bonus tip let's go deep into the matrix and use dev tools to hack on dev tools itself first we've got to press ctrl shift P or command shift P on Mac to open the command menu then type undock then run the undock into separate window command now we've got to focus that dev tools window and press ctrl shift C or command option C on Mac and then oh my what is going on here why do we have a second dev tools window well dev tools is itself a web application that we can inspect so in the second window we're using dev tools to inspect dev tools like any other web page let's try logging out all the URLs of the network resources using the new URL column when we inspect one of the cells we see that it's a TD element with the class URL column and the URL is the text content so that should be pretty easy to log out we'll press escape to open the drawer and then run this code to get the list of element and then loop through the array and log each URL and there we have it welcome to the matrix that's all we got thanks for watching [Music]

Leave a Reply

Your email address will not be published. Required fields are marked *