21+ Browser Dev Tools & Tips You Need To Know

on the internet you'll find scammers who show off their massive bank account balances while they try to sell you a course on how you can get there too but there's actually an easier way to grow your bank account open up the browser console with ctrl shift j then execute this line of code to turn the document's design mode on we can now modify any text in the web page itself like the bank account balance as developers we tend to take a lot of technologies for granted one of which is the web browser not only is it one of the most important technologies for all of humanity but modern browsers contain all kinds of awesome developer tools that were unimaginable 10 years ago in today's video we'll look at a ton of features and tricks in your browser's dev tools that you probably didn't know exist and will make your life much easier as a web developer first like and subscribe to keep this content coming then add your own pro tip to the comments and i'll pick one of them to win this free t-shirt next week i'm going to focus on chrome dev tools in this video but firefox also has an awesome suite of dev tools and most of the tricks i'll show you apply to both browsers and if you use edge or brave they're both based on chromium so everything applies there as well and if you use safari or internet explorer may god help you first we need to open up the console which we can do with the ctrl shift j shortcut what you may not know is that chrome has a command palette just like vs code that you can access with control p type an angle bracket and that will give you a list of every command at your disposal in the dev tools a useful one especially if you want to show off your bank account is screenshot which allows you to screenshot an entire page a custom area or an individual dom node but if we go ahead and open up the command palette again you'll notice it provides a big list of files these files are the actual html css javascript and images loaded by this webpage when you click on one it takes you to the sources tab where you can actually edit and inspect the file in production it's likely minified so click the pretty print button to make it look nicer but here's something you didn't know in the bottom right corner you'll see the option for coverage which will bring up the coverage panel and this will tell you exactly how much your javascript or css is contributing to the visual elements on this page red bars indicate unused or dead code that may be making your app slower you might want to go verify that that code is actually required in your production bundle now if you want to execute some javascript code in the browser you can do that from the console you'll likely be using a command like document query selector to grab an element from the dom but web developers have always felt that that's way too much code instead use a dollar sign just like jquery as an alias of document query selector or grab multiple elements with a double dollar sign like query selector all or if you happen to have something selected in the elements tab use dollar sign 0 to grab the current element once you've grabbed an element you may want to see how its value changes over time you could execute the same line of code over and over again but a smarter option is to click on the eye icon to pin it to the console as a live expression where it will automatically update every time the application state changes in some cases though you may want to run more complex code open the command palette and create a new snippet you can write whatever javascript code you'd like here then when you open up the command palette again and type a bang it'll be there ready for you to execute whenever you need it that's pretty cool but one thing that can be kind of annoying is that when you're messing around in the console you might want to redeclare the same variable over and over again using const with the same name twice would normally produce an error but in the chrome console it's no problem because we're just messing around here javascript is one thing but more often than not i'm using the browser dev tools to debug my html and css if i'm illegally scraping a website i might want to go to their html and copy an element into my own project i could just copy the element with ctrl c or i can right click and get a variety of different copy options an especially useful one is copy selector because i can then use it to target an element in my css or javascript or if i really like the way an element looks i can copy its styles and paste them directly in my css when you click on an element in the dom it will show you all of the css styles that apply to it in the styles tab but what if you want to see the styles when an element is hovered or focused you can do that by right-clicking an element or from the styles panel you'll see the hov button to force an element state that'll cause the element to stay frozen in that state making it easier to inspect that css that's useful for simple transitions but you might also have complex animations on a page the animations panel allows you to record any keyframe animations that are happening on the screen you can scrub them back and forth slowly and inspect the actual css properties that they affect and is really useful for understanding how animations work on other impressive web pages however if you go too crazy with your animations it may slow down the rendering of the webpage causing jank and just an uncomfortable user experience the rendering panel is like a heads up display that helps you detect a variety of different issues before they become a problem if we check the box for frame rendering stats it will provide data about the frames per second and the total memory used on the gpu now css is awesome and all but the best kind of code is the code that you don't have to write if you're working with flexbox or gridlayout go to the layout tab and draw visual markers around those elements by checking the boxes that you want to see back in the styles tab if you go to the display property and its value is flexbox or grid you'll see an icon that you can click on that brings up a dialog where you can modify the layout without having to memorize a bunch of confusing css properties and there's also a similar tool for box shadows which are notoriously difficult to code by hand but if you'd rather modify your website with something more like an actual design tool check out the viz bug extension it allows you to interact with the web page itself and modify its appearance without knowing or understanding css whatsoever now your design may look good on your machine but how do you know it's responsive to different screen sizes you can find out by clicking on the device toolbar it provides a bunch of common screen sizes to choose from or you can use the responsive option to resize it yourself manually and you can even throttle the network speed here to simulate low end devices but the fun doesn't stop there if you're targeting mobile devices that use geolocation or motion you can simulate things like gps coordinates and device acceleration and motion from the sensors panel if you're targeting mobile users then you're likely building a progressive web app the lighthouse tool will analyze your website for performance search engine optimization and progressive web app features if you pass the audit it means your website can be installed on a mobile device just like a native app and if you fail the audit it will tell you exactly what you need to address in order to make the experience for mobile users better one of the most common issues is that a website is slow to paint the initial content and that's usually because it tries to load too much javascript and css you can inspect exactly how the browser loads all of your assets by going to the network tab it creates a waterfall graphic that shows every request the browser makes and how long it takes to fetch each one of those assets if you're worried about performance turn on screenshots to see how your website loads after each request is completed clicking on an individual item will provide a breakdown of the response body and headers and if you want to dive really deep into performance click on the timing panel it'll show you exactly how long it took to fetch something breaking down the timing all the way to the dns level what you didn't know though is that there's actually a server timing api that allows you to pass more detailed information from your server to the browser when the server timing header is present on a response chrome will automatically break that information down in the browser dev tools for the end user there are four main issues when it comes to performance response animation idle and load lighthouse and the network panel can help you debug loading issues but for the other three we'll need to analyze the actual runtime performance of our code which we can do in the performance panel hit the record button then start using your site like an end user when you end the recording it'll give you a breakdown of the cpu usage frames per second and the amount of memory allocated to the heat if you notice a spike in cpu usage a drop in frames per second or a jump in memory usage it might indicate an area of code that needs to be optimized to investigate further chrome has generated a flame chart that breaks down everything that happens on the browser's main thread in other words this is how the browser executes your javascript step by step the x-axis represents time and the y-axis is the call stack if the chart is really tall it's not much of a problem you might just be calling deeply nested functions but if a frame is really wide it means that something is taking a long time in which case you should click on it to investigate why your code sucks in more detail now in some cases the main thread might be fine but your code might create a memory leak by allocating memory to objects that you no longer need you can tell you have a memory leak when this blue line gets bigger and bigger but to investigate it further let's head over to the memory tab select the option for allocation instrumentation then hit the record button when it's done the blue bars indicate memory that is still in use while the gray bars indicate memory that was garbage collected at any point in time you can see every object that's currently allocated to the heap it can be sorted by size allowing you to figure out exactly which objects are clogging up your memory and there you have 21 techniques to try out and chrome dev tools but here's one more bonus tip to leave you with if you like chrome dev tools then you'll also like brave browser they don't pay me to say that it's just the browser that i use for most of my personal work it's based on chromium so all of the devtools are exactly the same and the ceo of the company is none other than brendan eick the inventor of javascript but most importantly it's privacy focused with built-in ad blocking capabilities and when it does show ads you actually get paid to see them that's pretty awesome but i'm going to go ahead and wrap things up there hit the like button and subscribe if you want to see more videos like this thanks for watching and i will see you in the next one

Channel: Fireship

Views: 167,646

Keywords: webdev, app development, lesson, tutorial

Id: TcTSqhpm80Y

Length: 9min 26sec (566 seconds)

Published: Mon Jul 12 2021