Decoding the Chrome Developer Tool!!
As a developer, we use the developer tool a lot, either to debug the code or to execute a Javascript function or while preparing for an interview to answer How do you use the developer tool effectively?
There are a few amazing things that you should know.
Let’s learn a few of these powers of chrome developer tool that helps you program easily, debug your code faster and do more than just debug.
Did you know you can take a screenshot in chrome dev tool !!!? Keep reading if you want to learn.
To open a chrome developer tool you can do: On Mac — ⌘ + Shift + C. On Windows / Linux — Ctrl + Shift + C OR F12.
Let’s get started…
Snippet
If you find yourself running the same code in the Console repeatedly, consider saving the code as a Snippet in your developer tool.
It’s really useful when you want to run a big independent function and debug it. you can watch the execution and learn how your function works. And it’s very handy if you are aiming for a job in a company that has mandatory whiteboard rounds in their interview process. Rather than using IDE you can directly code in the snippet and execute it. You can also manipulate the DOM with your JS skills like by using document.body.innerHTML for instance.
Click on Source tab in your developer tool and select >> towards the top left in the panel and select Snippets
Once you create a new snippet, it’s just like your IDE. Write any function or method with any complexity and it becomes really easy to execute, debug and learn about that function in the same view.
Let’s see an example
As shown in the example above, you can add debug points wherever you want by selecting the line number in the file, right-click on your snippet and select run to execute the function and execution stops at the debug point, observe that you can see the current value and all the values in the scope variables by hovering your cursor on the variable. Isn’t it simple? Let me know if this helps in the comment section below :)
Take a screenshot of a particular div/section
Do you know you can take a screenshot of any section from the chrome dev tool? This is an amazing feature that any UI developer should appreciate, and it’s really easy.
Click on the Element tab in your developer tool, type ⌘ + shift + P in mac and ctrl + shift + P in windows (just like you do in your visual code IDE) and type screenshot and select Screenshot Capture node structure in the search panel. That’s it, this will take a screenshot of the selected div.
Understand the performance of your website
We build our website to give the best user experience and we always want users to visit our website and get their work done effortlessly. In order to achieve this, it is really important to consider the performance of the website. Chrome dev tools have such ability where we can see the performance of the website and learn where should we focus on, to make it a performant website.
Click on the Performance tab in your developer tool and select start profiling and reload page, this gives you all the information you need.
Inspect animations
Inspecting an animation is made easy with dev tools, Click on the Element tab in your developer tool, type ⌘ + shift + P in mac and ctrl + shift + P in windows and search for Show Animation (Drawer, Show Animation) in the search panel.
The Animation Inspector automatically detects animations and sorts them into groups. You can inspect animations by slowing them down, replaying them, or viewing their source code. Modify animations by changing their timing, delay, duration, or keyframe offsets.
The Animation Inspector supports CSS animations, CSS transitions, and web animations.
Let’s see an example
In the above example, you can observe how we can control the animation by changing its speed or by updating its keyframe duration, you can also replay the animation until you make it perfect for your website.
Format minified JS or CSS files
It is definitely difficult to read minified JS or CSS code on a website, but it’s pretty simple to format that in the developer tool to make it readable.
Click on Source tab in your developer tool and select >> towards the top left in the panel and select page, select the minified JS or CSS file and click on {} at the bottom to prettify the minified file.
Do your CSS in dev tools
We often write CSS in IDE, wait till updated styles loads in the application, and then fix them by changing in the code again, isn’t it hectic to do that way?
Want to know a faster way to do it? Just update styles on the dev tools and make your website pixel perfect then use that CSS code in your project.
Click on the Element tab in your developer tool and select the styles tab.
That’s a few tips and tricks to make better use of the chrome developer tool, Let me know if this was helpful in the comment section below.
Want to learn more about me?
