The web browser is one of the most sophisticated tools on the planet. Today we look at 21 tricks, tips, and lesser-known features in Chrome Dev Tools that will make your life easier as a web developer. https://fireship.io

#webdev #chrome #tips

🔗 Resources

Chrome Dev Tools Docs https://developer.chrome.com/docs/devtools/

Cool PWA Features Video https://youtu.be/ppwagkhrZJs

Brave https://brave.com/

Visbug Extension https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc?

📚 Chapters

00:00 1. Design Mode
01:04 2. Command Palette
01:20 3. Screenshots
01:29 4. Visual Coverage
02:10 5. Dollar Sign Shortcut
02:37 6. Live Expression
02:53 7. Snippets
03:07 8. Redeclare variables
03:22 9. Copy Elements
03:50 10. Force State
04:12 11. Animation Timeline
04:30 12. Rendering FPS
04:51 13. Grid & Flexbox Editor
05:20 14. VisBug
05:32 15. Responsive Devices
05:49 16. Sensors
06:00 17. Lighthouse
06:21 18. Network Waterfall
06:51 19. Server Timing API
07:13 20. Performance 
08:14 21. Memory Profile
08:51 Be Brave

 🤓 Install the quiz app

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

🔥 Watch more with Fireship PRO

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font
2024-02-04T05:49:21.222Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
a8b46695-e9c8-4e79-b04e-d786af3f54ff
8f50b655ea7753d55cb6fc49aaf046f60314703d8142aa8917926f58d73a0660
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
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 control 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.
1st, 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 And if you use Safari or Internet Explorer, may God help you.
1st, we need to open up the console, which we can do with the control shift j shortcut.
Cut.
What you may not know is that Chrome has a command palette just like Versus Code that you can access with control p.
Type in angle bracket and that will give you a list of every command and 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 web page?
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 wanna 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 a 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 Annoying is that when you're messing around in the console, you might want to re declare 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 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 control 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 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 Of 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 web page 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 just 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 Grid layout, 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 Vysbug 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 Sponsored 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 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 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 as 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 wanna dive really deep into performance, click on the timing panel.
It'll They'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 formation down in the browser dev tools.
For the end user, there are 4 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 3, we'll need to analyze the actual run time 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 heap.
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 in 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 If it's 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 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 if 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 in 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 dev tools are exactly the same.
And the The CEO of the company is none other than Brendan Eich, 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 gonna go ahead and wrap things up there.
Hit the like button and Subscribe if you wanna see more videos like this.
Thanks for watching, and I will see you in the next one.

Speaker 0: 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 control 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. 1st, 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 And if you use Safari or Internet Explorer, may God help you. 1st, we need to open up the console, which we can do with the control shift j shortcut. Cut. What you may not know is that Chrome has a command palette just like Versus Code that you can access with control p.

Type in angle bracket and that will give you a list of every command and 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 web page? 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 wanna 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 a 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 Annoying is that when you're messing around in the console, you might want to re declare 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 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 control 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 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 Of 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 web page 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 just 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 Grid layout, 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 Vysbug 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 Sponsored 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 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 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 as 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 wanna dive really deep into performance, click on the timing panel. It'll They'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 formation down in the browser dev tools. For the end user, there are 4 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 3, we'll need to analyze the actual run time 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 heap. 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 in 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 If it's 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 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 if 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 in 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 dev tools are exactly the same.

And the The CEO of the company is none other than Brendan Eich, 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 gonna go ahead and wrap things up there. Hit the like button and Subscribe if you wanna see more videos like this.

Thanks for watching, and I will see you in the next one.
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 control shift j, then execute this line of code to turn the document's design mode on.
banking
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. 1st, 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.
internet
websites
google
youtube
technology
software
computer science
software development
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.
software
video gaming
And And if you use Safari or Internet Explorer, may God help you. 1st, we need to open up the console, which we can do with the control shift j shortcut. Cut. What you may not know is that Chrome has a command palette just like Versus Code that you can access with control p.
Type in angle bracket and that will give you a list of every command and 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.
visualization
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 web page?
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.
publishing
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 wanna 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 a 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.
programming
That's pretty cool, but one thing that can be kind Annoying is that when you're messing around in the console, you might want to re declare 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 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 control 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 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 Of 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 web page 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 just on the GPU.
animation
graphic design
visualization
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 Grid layout, 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.
graphic design
But if you'd rather modify your website with something more like an actual design tool, check out the Vysbug 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 Sponsored 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 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.
electronics
technology
graphic design
phones
telecommunications
robotics
computers
internet
architecture
websites
And if you fail the audit, it 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 as 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 wanna dive really deep into performance, click on the timing panel. It'll They'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 formation down in the browser dev tools. For the end user, there are 4 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 3, we'll need to analyze the actual run time 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 heap.
networking
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 in 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 If it's 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 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 if 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 in 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 dev tools are exactly the same. And the The CEO of the company is none other than Brendan Eich, 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 gonna go ahead and wrap things up there. Hit the like button and Subscribe if you wanna see more videos like this. Thanks for watching, and I will see you in the next one.
youtube
advertising
google
microsoft
software
social media
streaming
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 control 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. 1st, 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 And if you use Safari or Internet Explorer, may God help you. 1st, we need to open up the console, which we can do with the control shift j shortcut. Cut. What you may not know is that Chrome has a command palette just like Versus Code that you can access with control p. Type in angle bracket and that will give you a list of every command and 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 web page? 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 wanna 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 a 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 Annoying is that when you're messing around in the console, you might want to re declare 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 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 control 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 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 Of 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 web page 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 just 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 Grid layout, 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 Vysbug 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 Sponsored 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 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 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 as 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 wanna dive really deep into performance, click on the timing panel. It'll They'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 formation down in the browser dev tools. For the end user, there are 4 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 3, we'll need to analyze the actual run time 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 heap. 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 in 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 If it's 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 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 if 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 in 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 dev tools are exactly the same. And the The CEO of the company is none other than Brendan Eich, 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 gonna go ahead and wrap things up there. Hit the like button and Subscribe if you wanna see more videos like this. Thanks for watching, and I will see you in the next one.
On
on
the
the
Internet,
internet
you'll
you'll
find
find
scammers
scammers
who
who
show
show
off
off
their
their
massive
massive
bank
bank
account
account
balances
balances
while
while
they
they
try
try
to
to
sell
sell
you
you
a
a
course
course
on
on
how
how
you
you
can
can
get
get
there
there
too.
too
But
but
there's
there's
actually
actually
an
an
easier
easier
way
way
to
to
grow
grow
your
your
bank
bank
account.
account
Open
open
up
up
the
the
browser
browser
console
console
with
with
control
control
shift
shift
j,
j
then
then
execute
execute
this
this
line
line
of
of
code
code
to
to
turn
turn
the
the
document's
document's
design
design
mode
mode
on.
on
We
we
can
can
now
now
modify
modify
any
any
text
text
in
in
the
the
web
web
page
page
itself
itself
like
like
the
the
bank
bank
account
account
balance.
balance
As
as
developers,
developers
we
we
tend
tend
to
to
take
take
a
a
lot
lot
of
of
technologies
technologies
for
for
granted.
granted
One
one
of
of
which
which
is
is
the
the
web
web
browser.
browser
Not
not
only
only
is
is
it
it
one
one
of
of
the
the
most
most
important
important
technologies
technologies
for
for
all
all
of
of
humanity,
humanity
but
but
modern
modern
browsers
browsers
contain
contain
all
all
kinds
kinds
of
of
awesome
awesome
developer
developer
tools
tools
that
that
were
were
unimaginable
unimaginable
10
10
years
years
ago.
ago
In
in
today's
today's
video,
video
we'll
we'll
look
look
at
at
A
a
ton
ton
of
of
features
features
and
and
tricks
tricks
in
in
your
your
browser's
browser's
dev
dev
tools
tools
that
that
you
you
probably
probably
didn't
didn't
know
know
exist
exist
and
and
will
will
make
make
your
your
life
life
much
much
easier
easier
as
as
a
a
web
web
developer.
developer
1st,
1st
like
like
and
and
subscribe
subscribe
to
to
keep
keep
this
this
content
content
coming,
coming
then
then
Add
add
your
your
own
own
pro
pro
tip
tip
to
to
the
the
comments
comments
and
and
I'll
i'll
pick
pick
one
one
of
of
them
them
to
to
win
win
this
this
free
free
t
t
shirt
shirt
next
next
week.
week
I'm
i'm
going
going
to
to
focus
focus
on
on
Chrome
chrome
Dev
dev
Tools
tools
in
in
this
this
video,
video
but
but
Firefox
firefox
Also
also
has
has
an
an
awesome
awesome
suite
suite
of
of
dev
dev
tools
tools
and
and
most
most
of
of
the
the
tricks
tricks
I'll
i'll
show
show
you
you
apply
apply
to
to
both
both
browsers.
browsers
And
and
if
if
you
you
use
use
Edge
edge
or
or
Brave,
brave
they're
they're
both
both
based
based
on
on
Chromium,
chromium
so
so
everything
everything
applies
applies
there
there
as
as
well.
well
And
and
And
and
if
if
you
you
use
use
Safari
safari
or
or
Internet
internet
Explorer,
explorer
may
may
God
god
help
help
you.
you
1st,
1st
we
we
need
need
to
to
open
open
up
up
the
the
console,
console
which
which
we
we
can
can
do
do
with
with
the
the
control
control
shift
shift
j
j
shortcut.
shortcut
Cut.
cut
What
what
you
you
may
may
not
not
know
know
is
is
that
that
Chrome
chrome
has
has
a
a
command
command
palette
palette
just
just
like
like
Versus
versus
Code
code
that
that
you
you
can
can
access
access
with
with
control
control
p.
p
Type
type
in
in
angle
angle
bracket
bracket
and
and
that
that
will
will
give
give
you
you
a
a
list
list
of
of
every
every
command
command
and
and
at
at
your
your
disposal
disposal
in
in
the
the
dev
dev
tools.
tools
A
a
useful
useful
one,
one
especially
especially
if
if
you
you
want
want
to
to
show
show
off
off
your
your
bank
bank
account,
account
is
is
screenshot,
screenshot
which
which
allows
allows
you
you
to
to
screenshot
screenshot
an
an
entire
entire
page,
page
a
a
custom
custom
area,
area
or
or
an
an
individual
individual
DOM
dom
node.
node
But
but
if
if
we
we
go
go
ahead
ahead
and
and
open
open
up
up
the
the
command
command
palette
palette
again,
again
you'll
you'll
notice
notice
it
it
provides
provides
a
a
big
big
list
list
of
of
files.
files
These
these
files
files
Are
are
the
the
actual
actual
HTML,
html
CSS,
css
JavaScript,
javascript
and
and
images
images
loaded
loaded
by
by
this
this
web
web
page?
page
When
when
you
you
click
click
on
on
one,
one
it
it
takes
takes
you
you
to
to
the
the
sources
sources
tab
tab
where
where
you
you
can
can
actually
actually
edit
edit
and
and
inspect
inspect
the
the
file.
file
In
in
production,
production
it's
it's
likely
likely
minified,
minified
so
so
click
click
the
the
pretty
pretty
print
print
button
button
to
to
make
make
it
it
look
look
nicer.
nicer
But
but
here's
here's
something
something
you
you
didn't
didn't
know.
know
In
in
the
the
bottom
bottom
right
right
corner,
corner
you'll
you'll
see
see
the
the
option
option
for
for
coverage,
coverage
which
which
will
will
bring
bring
up
up
the
the
coverage
coverage
panel.
panel
And
and
this
this
will
will
tell
tell
you
you
exactly
exactly
how
how
much
much
your
your
JavaScript
javascript
or
or
CSS
css
is
is
contributing
contributing
to
to
the
the
visual
visual
elements
elements
on
on
This
this
page,
page
red
red
bars
bars
indicate
indicate
unused
unused
or
or
dead
dead
code
code
that
that
may
may
be
be
making
making
your
your
app
app
slower.
slower
You
you
might
might
wanna
wanna
go
go
verify
verify
that
that
that
that
code
code
is
is
actually
actually
required
required
in
in
your
your
production
production
bundle.
bundle
Now
now
if
if
you
you
want
want
to
to
execute
execute
some
some
JavaScript
javascript
code
code
in
in
the
the
browser,
browser
you
you
can
can
do
do
that
that
from
from
the
the
console.
console
You'll
you'll
likely
likely
be
be
using
using
a
a
command
command
like
like
document
document
query
query
selector
selector
to
to
grab
grab
an
an
element
element
from
from
the
the
DOM.
dom
But
but
web
web
developers
developers
have
have
always
always
felt
felt
that
that
that's
that's
way
way
too
too
much
much
code.
code
Instead,
instead
use
use
a
a
dollar
dollar
sign
sign
just
just
like
like
jquery
jquery
as
as
an
an
alias
alias
a
a
document
document
query
query
selector,
selector
or
or
grab
grab
multiple
multiple
elements
elements
with
with
a
a
double
double
dollar
dollar
sign
sign
like
like
query
query
selector
selector
all.
all
Or
or
if
if
you
you
happen
happen
to
to
have
have
something
something
selected
selected
in
in
the
the
elements
elements
tab,
tab
use
use
dollar
dollar
sign
sign
0
0
to
to
grab
grab
the
the
current
current
element.
element
Once
once
you've
you've
grabbed
grabbed
an
an
element,
element
you
you
may
may
want
want
to
to
see
see
how
how
its
its
value
value
changes
changes
over
over
time.
time
You
you
could
could
execute
execute
the
the
same
same
line
line
of
of
code
code
over
over
and
and
over
over
again.
again
But
but
a
a
smarter
smarter
option
option
is
is
to
to
click
click
on
on
the
the
eye
eye
icon
icon
to
to
pin
pin
it
it
to
to
the
the
console
console
as
as
a
a
live
live
expression,
expression
where
where
it
it
will
will
automatically
automatically
update
update
every
every
time
time
the
the
application
application
state
state
changes.
changes
In
in
some
some
cases
cases
though,
though
you
you
may
may
want
want
to
to
run
run
more
more
complex
complex
code.
code
Open
open
the
the
command
command
palette
palette
and
and
create
create
a
a
new
new
snippet.
snippet
You
you
can
can
write
write
whatever
whatever
JavaScript
javascript
code
code
you'd
you'd
like
like
here,
here
then
then
when
when
you
you
open
open
up
up
the
the
command
command
palette
palette
again
again
and
and
type
type
a
a
bang,
bang
it'll
it'll
be
be
there
there
ready
ready
for
for
you
you
to
to
execute
execute
whenever
whenever
you
you
need
need
it.
it
That's
that's
pretty
pretty
cool,
cool
but
but
one
one
thing
thing
that
that
can
can
be
be
kind
kind
Annoying
annoying
is
is
that
that
when
when
you're
you're
messing
messing
around
around
in
in
the
the
console,
console
you
you
might
might
want
want
to
to
re
re
declare
declare
the
the
same
same
variable
variable
over
over
and
and
over
over
again.
again
Using
using
const
const
with
with
the
the
same
same
name
name
twice
twice
would
would
normally
normally
produce
produce
an
an
error,
error
but
but
in
in
the
the
Chrome
chrome
console,
console
it's
it's
no
no
problem
problem
because
because
we're
we're
just
just
messing
messing
around
around
here.
here
JavaScript
javascript
is
is
one
one
thing,
thing
but
but
more
more
often
often
than
than
not,
not
I'm
i'm
using
using
the
the
browser
browser
dev
dev
tools
tools
to
to
debug
debug
my
my
HTML
html
and
and
CSS.
css
If
if
If
if
I'm
i'm
illegally
illegally
scraping
scraping
a
a
website,
website
I
i
might
might
want
want
to
to
go
go
to
to
their
their
HTML
html
and
and
copy
copy
an
an
element
element
into
into
my
my
own
own
project.
project
I
i
could
could
just
just
copy
copy
the
the
element
element
with
with
control
control
c,
c
or
or
I
i
can
can
right
right
click
click
and
and
get
get
a
a
variety
variety
of
of
different
different
copy
copy
options.
options
An
an
especially
especially
useful
useful
one
one
is
is
copy
copy
selector
selector
because
because
I
i
can
can
then
then
use
use
it
it
to
to
target
target
an
an
element
element
in
in
my
my
CSS
css
or
or
JavaScript.
javascript
Or
or
if
if
I
i
really
really
like
like
the
the
way
way
an
an
element
element
looks,
looks
I
i
can
can
copy
copy
its
its
styles
styles
and
and
paste
paste
them
them
directly
directly
in
in
my
my
CSS.
css
When
when
you
you
click
click
on
on
an
an
element
element
In
in
the
the
DOM,
dom
it
it
will
will
show
show
you
you
all
all
of
of
the
the
CSS
css
styles
styles
that
that
apply
apply
to
to
it
it
in
in
the
the
styles
styles
tab.
tab
But
but
what
what
if
if
you
you
want
want
to
to
see
see
the
the
styles
styles
when
when
an
an
is
is
hovered
hovered
or
or
focused.
focused
You
you
can
can
do
do
that
that
by
by
right
right
clicking
clicking
an
an
element,
element
or
or
from
from
the
the
styles
styles
panel,
panel
you'll
you'll
see
see
the
the
HOV
hov
button
button
to
to
force
force
an
an
element
element
state.
state
That'll
that'll
cause
cause
the
the
element
element
to
to
stay
stay
frozen
frozen
in
in
that
that
state,
state
making
making
it
it
easier
easier
to
to
inspect
inspect
that
that
CSS.
css
That's
that's
useful
useful
for
for
simple
simple
transitions,
transitions
but
but
you
you
might
might
also
also
have
have
Of
of
complex
complex
animations
animations
on
on
a
a
page,
page
the
the
animations
animations
panel
panel
allows
allows
you
you
to
to
record
record
any
any
keyframe
keyframe
animations
animations
that
that
are
are
happening
happening
on
on
the
the
screen.
screen
You
you
can
can
scrub
scrub
them
them
back
back
and
and
forth
forth
slowly
slowly
and
and
inspect
inspect
the
the
actual
actual
CSS
css
properties
properties
that
that
they
they
affect,
affect
and
and
is
is
really
really
useful
useful
for
for
understanding
understanding
how
how
animations
animations
work
work
on
on
other
other
impressive
impressive
web
web
pages.
pages
However,
however
If
if
you
you
go
go
too
too
crazy
crazy
with
with
your
your
animations,
animations
it
it
may
may
slow
slow
down
down
the
the
rendering
rendering
of
of
the
the
web
web
page
page
causing
causing
jank
jank
and
and
just
just
an
an
uncomfortable
uncomfortable
user
user
experience.
experience
The
the
rendering
rendering
panel
panel
is
is
like
like
a
a
heads
heads
up
up
display
display
that
that
helps
helps
you
you
Detect
detect
a
a
variety
variety
of
of
different
different
issues
issues
before
before
they
they
become
become
a
a
problem.
problem
If
if
we
we
check
check
the
the
box
box
for
for
frame
frame
rendering
rendering
stats,
stats
it
it
will
will
provide
provide
data
data
about
about
the
the
frames
frames
per
per
second
second
and
and
the
the
total
total
memory
memory
used
used
just
just
on
on
the
the
GPU.
gpu
Now,
now
CSS
css
is
is
awesome
awesome
and
and
all,
all
but
but
the
the
best
best
kind
kind
of
of
code
code
is
is
the
the
code
code
that
that
you
you
don't
don't
have
have
to
to
write.
write
If
if
you're
you're
working
working
with
with
Flexbox
flexbox
or
or
Grid
grid
layout,
layout
Go
go
to
to
the
the
layout
layout
tab
tab
and
and
draw
draw
visual
visual
markers
markers
around
around
those
those
elements
elements
by
by
checking
checking
the
the
boxes
boxes
that
that
you
you
want
want
to
to
see.
see
Back
back
in
in
the
the
styles
styles
tab,
tab
if
if
you
you
go
go
to
to
the
the
display
display
property
property
and
and
its
its
value
value
is
is
Flexbox
flexbox
or
or
Grid,
grid
you'll
you'll
see
see
an
an
icon
icon
that
that
you
you
can
can
click
click
on.
on
That
that
brings
brings
up
up
a
a
dialog
dialog
where
where
you
you
can
can
modify
modify
the
the
layout
layout
without
without
having
having
to
to
memorize
memorize
a
a
bunch
bunch
of
of
confusing
confusing
CSS
css
properties.
properties
And
and
there's
there's
also
also
a
a
similar
similar
tool
tool
for
for
box
box
shadows,
shadows
which
which
are
are
notoriously
notoriously
difficult
difficult
to
to
code
code
by
by
hand.
hand
But
but
if
if
you'd
you'd
rather
rather
modify
modify
your
your
website
website
with
with
something
something
more
more
like
like
an
an
actual
actual
design
design
tool,
tool
check
check
out
out
the
the
Vysbug
vysbug
extension.
extension
It
it
Allows
allows
you
you
to
to
interact
interact
with
with
the
the
web
web
page
page
itself
itself
and
and
modify
modify
its
its
appearance
appearance
without
without
knowing
knowing
or
or
understanding
understanding
CSS
css
whatsoever.
whatsoever
Now
now
your
your
design
design
may
may
look
look
good
good
on
on
your
your
machine,
machine
but
but
how
how
do
do
You
you
know
know
it's
it's
responsive
responsive
to
to
different
different
screen
screen
sizes.
sizes
You
you
can
can
find
find
out
out
by
by
clicking
clicking
on
on
the
the
device
device
toolbar.
toolbar
It
it
provides
provides
a
a
bunch
bunch
of
of
common
common
screen
screen
sizes
sizes
to
to
choose
choose
from,
from
or
or
you
you
can
can
use
use
the
the
Sponsored
sponsored
option
option
to
to
resize
resize
it
it
yourself
yourself
manually,
manually
and
and
you
you
can
can
even
even
throttle
throttle
the
the
network
network
speed
speed
here
here
to
to
simulate
simulate
low
low
end
end
devices.
devices
But
but
the
the
fun
fun
doesn't
doesn't
stop
stop
there.
there
If
if
you're
you're
targeting
targeting
mobile
mobile
devices
devices
that
that
use
use
geolocation
geolocation
or
or
motion,
motion
you
you
can
can
simulate
simulate
things
things
like
like
GPS
gps
coordinates
coordinates
and
and
device
device
acceleration
acceleration
and
and
motion
motion
from
from
the
the
sensors
sensors
panel.
panel
If
if
you're
you're
You're
you're
targeting
targeting
mobile
mobile
users,
users
then
then
you're
you're
likely
likely
building
building
a
a
progressive
progressive
web
web
app.
app
The
the
Lighthouse
lighthouse
tool
tool
will
will
analyze
analyze
your
your
website
website
for
for
performance,
performance
search
search
engine
engine
optimization,
optimization
and
and
progressive
progressive
web
web
app
app
features.
features
If
if
you
you
pass
pass
the
the
audit,
audit
it
it
means
means
your
your
website
website
can
can
be
be
installed
installed
on
on
a
a
mobile
mobile
device
device
just
just
like
like
a
a
native
native
app.
app
And
and
if
if
you
you
fail
fail
the
the
audit,
audit
it
it
It
it
will
will
tell
tell
you
you
exactly
exactly
what
what
you
you
need
need
to
to
address
address
in
in
order
order
to
to
make
make
the
the
experience
experience
for
for
mobile
mobile
users
users
better.
better
One
one
of
of
the
the
most
most
common
common
issues
issues
is
is
that
that
a
a
website
website
is
is
slow
slow
to
to
paint
paint
the
the
initial
initial
content,
content
and
and
that's
that's
usually
usually
because
because
as
as
it
it
tries
tries
to
to
load
load
too
too
much
much
JavaScript
javascript
and
and
CSS.
css
You
you
can
can
inspect
inspect
exactly
exactly
how
how
the
the
browser
browser
loads
loads
all
all
of
of
your
your
assets
assets
by
by
going
going
to
to
the
the
network
network
tab.
tab
It
it
creates
creates
a
a
waterfall
waterfall
graphic
graphic
That
that
shows
shows
every
every
request
request
the
the
browser
browser
makes
makes
and
and
how
how
long
long
it
it
takes
takes
to
to
fetch
fetch
each
each
one
one
of
of
those
those
assets.
assets
If
if
you're
you're
worried
worried
about
about
performance,
performance
turn
turn
on
on
screenshots
screenshots
to
to
see
see
how
how
your
your
website
website
loads
loads
after
after
Each
each
request
request
is
is
completed.
completed
Clicking
clicking
on
on
an
an
individual
individual
item
item
will
will
provide
provide
a
a
breakdown
breakdown
of
of
the
the
response
response
body
body
and
and
headers.
headers
And
and
if
if
you
you
wanna
wanna
dive
dive
really
really
deep
deep
into
into
performance,
performance
click
click
on
on
the
the
timing
timing
panel.
panel
It'll
it'll
They'll
they'll
show
show
you
you
exactly
exactly
how
how
long
long
it
it
took
took
to
to
fetch
fetch
something,
something
breaking
breaking
down
down
the
the
timing
timing
all
all
the
the
way
way
to
to
the
the
DNS
dns
level.
level
What
what
you
you
didn't
didn't
know
know
though
though
is
is
that
that
there's
there's
actually
actually
a
a
server
server
timing
timing
API
api
that
that
allows
allows
you
you
to
to
pass
pass
more
more
detailed
detailed
information
information
from
from
your
your
server
server
to
to
the
the
browser.
browser
When
when
the
the
server
server
timing
timing
header
header
is
is
present
present
on
on
a
a
response,
response
Chrome
chrome
will
will
automatically
automatically
break
break
that
that
formation
formation
down
down
in
in
the
the
browser
browser
dev
dev
tools.
tools
For
for
the
the
end
end
user,
user
there
there
are
are
4
4
main
main
issues
issues
when
when
it
it
comes
comes
to
to
performance,
performance
response,
response
animation,
animation
idle,
idle
and
and
load.
load
Lighthouse
lighthouse
and
and
the
the
network
network
panel
panel
can
can
help
help
you
you
debug
debug
loading
loading
issues,
issues
but
but
for
for
the
the
other
other
3,
3
we'll
we'll
need
need
to
to
analyze
analyze
the
the
actual
actual
run
run
time
time
performance
performance
of
of
our
our
code,
code
which
which
we
we
can
can
do
do
in
in
the
the
Performance
performance
panel.
panel
Hit
hit
the
the
record
record
button,
button
then
then
start
start
using
using
your
your
site
site
like
like
an
an
end
end
user.
user
When
when
you
you
end
end
the
the
recording,
recording
it'll
it'll
give
give
you
you
a
a
breakdown
breakdown
of
of
the
the
CPU
cpu
usage,
usage
frames
frames
per
per
second,
second
and
and
the
the
amount
amount
of
of
memory
memory
allocated
allocated
to
to
the
the
heap.
heap
If
if
you
you
notice
notice
a
a
spike
spike
in
in
CPU
cpu
usage,
usage
a
a
drop
drop
in
in
frames
frames
per
per
second,
second
or
or
a
a
jump
jump
in
in
memory
memory
usage,
usage
it
it
might
might
Indicate
indicate
an
an
area
area
of
of
code
code
that
that
needs
needs
to
to
be
be
optimized.
optimized
To
to
investigate
investigate
further,
further
Chrome
chrome
has
has
generated
generated
a
a
flame
flame
chart
chart
that
that
breaks
breaks
down
down
everything
everything
that
that
happens
happens
on
on
the
the
browser's
browser's
main
main
in
in
Thread.
thread
In
in
other
other
words,
words
this
this
is
is
how
how
the
the
browser
browser
executes
executes
your
your
JavaScript
javascript
step
step
by
by
step.
step
The
the
x
x
axis
axis
represents
represents
time
time
and
and
the
the
y
y
axis
axis
is
is
the
the
call
call
stack.
stack
If
if
the
the
If
if
it's
it's
really
really
tall,
tall
it's
it's
not
not
much
much
of
of
a
a
problem.
problem
You
you
might
might
just
just
be
be
calling
calling
deeply
deeply
nested
nested
functions.
functions
But
but
if
if
a
a
frame
frame
is
is
really
really
wide,
wide
it
it
means
means
that
that
something
something
is
is
taking
taking
a
a
long
long
time,
time
in
in
which
which
case
case
you
you
should
should
Click
click
on
on
it
it
to
to
investigate
investigate
why
why
your
your
code
code
sucks
sucks
in
in
more
more
detail.
detail
Now
now
in
in
some
some
cases,
cases
the
the
main
main
thread
thread
might
might
be
be
fine,
fine
but
but
your
your
code
code
might
might
create
create
a
a
memory
memory
leak
leak
by
by
allocating
allocating
memory
memory
to
to
objects
objects
that
that
you
you
No
no
longer
longer
need.
need
You
you
can
can
tell
tell
you
you
have
have
a
a
memory
memory
leak
leak
when
when
this
this
blue
blue
line
line
gets
gets
bigger
bigger
and
and
bigger.
bigger
But
but
to
to
investigate
investigate
it
it
further,
further
let's
let's
head
head
over
over
to
to
the
the
memory
memory
Select
select
the
the
option
option
for
for
allocation
allocation
instrumentation,
instrumentation
then
then
hit
hit
the
the
record
record
button.
button
When
when
it's
it's
done,
done
the
the
blue
blue
bars
bars
indicate
indicate
memory
memory
that
that
is
is
still
still
in
in
use,
use
while
while
the
the
gray
gray
bars
bars
indicate
indicate
if
if
memory
memory
that
that
was
was
garbage
garbage
collected.
collected
At
at
any
any
point
point
in
in
time,
time
you
you
can
can
see
see
every
every
object
object
that's
that's
currently
currently
allocated
allocated
to
to
the
the
heap.
heap
It
it
can
can
be
be
sorted
sorted
by
by
size,
size
allowing
allowing
you
you
to
to
figure
figure
out
out
exactly
exactly
which
which
Objects
objects
are
are
clogging
clogging
up
up
your
your
memory.
memory
And
and
there
there
you
you
have
have
21
21
techniques
techniques
to
to
try
try
out
out
in
in
Chrome
chrome
Dev
dev
Tools.
tools
But
but
here's
here's
one
one
more
more
bonus
bonus
tip
tip
to
to
leave
leave
you
you
with.
with
If
if
you
you
like
like
Chrome
chrome
Dev
dev
Tools,
tools
then
then
you'll
you'll
also
also
like
like
Brave
brave
Browser.
browser
They
they
don't
don't
pay
pay
me
me
to
to
say
say
that.
that
It's
it's
just
just
the
the
browser
browser
that
that
I
i
use
use
for
for
most
most
of
of
my
my
personal
personal
work.
work
It's
it's
based
based
on
on
Chromium,
chromium
so
so
all
all
of
of
the
the
dev
dev
tools
tools
are
are
exactly
exactly
the
the
same.
same
And
and
the
the
The
the
CEO
ceo
of
of
the
the
company
company
is
is
none
none
other
other
than
than
Brendan
brendan
Eich,
eich
the
the
inventor
inventor
of
of
JavaScript.
javascript
But
but
most
most
importantly,
importantly
it's
it's
privacy
privacy
focused
focused
with
with
built
built
in
in
ad
ad
blocking
blocking
capabilities.
capabilities
And
and
when
when
it
it
does
does
show
show
ads,
ads
you
you
actually
actually
get
get
paid
paid
to
to
see
see
them.
them
That's
that's
pretty
pretty
awesome,
awesome
but
but
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
Hit
hit
the
the
like
like
button
button
and
and
Subscribe
subscribe
if
if
you
you
wanna
wanna
see
see
more
more
videos
videos
like
like
this.
this
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The speaker explains how to open a web browser console, modify design mode, use screenshot and screenshot to screenshot an entire page, update the HTML, CSS, and JavaScript files, and use copy privilege to copy elements and run code specific to the browser. They also discuss optimizing websites and troubleshoot issues such as CPU usage and memory allocation, as well as privacy-focused framework for ad blocking and subscribe to YouTube. They provide tips on navigating computer and memory usage, as well as troubleshooting issues such as CPU usage and memory allocation.
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 control 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. 1st, 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 And if you use Safari or Internet Explorer, may God help you. 1st, we need to open up the console, which we can do with the control shift j shortcut. Cut. What you may not know is that Chrome has a command palette just like Versus Code that you can access with control p. Type in angle bracket and that will give you a list of every command and 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 web page? 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 wanna 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 a 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 Annoying is that when you're messing around in the console, you might want to re declare 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 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 control 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 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 Of 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 web page 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 just 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 Grid layout, 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 Vysbug 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 Sponsored 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 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 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 as 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 wanna dive really deep into performance, click on the timing panel. It'll They'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 formation down in the browser dev tools. For the end user, there are 4 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 3, we'll need to analyze the actual run time 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 heap. 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 in 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 If it's 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 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 if 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 in 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 dev tools are exactly the same. And the The CEO of the company is none other than Brendan Eich, 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 gonna go ahead and wrap things up there. Hit the like button and Subscribe if you wanna see more videos like this. Thanks for watching, and I will see you in the next one.
The speaker explains how to open a web browser console, modify design mode, use screenshot and screenshot to screenshot an entire page, update the HTML, CSS, and JavaScript files, and use copy privilege to copy elements and run code specific to the browser. They also discuss optimizing websites and troubleshoot issues such as CPU usage and memory allocation, as well as privacy-focused framework for ad blocking and subscribe to YouTube. They provide tips on navigating computer and memory usage, as well as troubleshooting issues such as CPU usage and memory allocation.