From the author: If you’re an active developer on the web, chances are you use the Chrome developer tools a lot. When it comes to developing modern web applications, developer tools are absolutely essential. Browsing the Internet without DevTools is like flying an airplane without windows. We can get where we need to, but it will be much more difficult.
Before we start, if you want to follow this tutorial, make sure you have developer tools open in your browser. You can do this by pressing command + option + J on Mac and Control + Shift + J on windows. Without further ado, here are 5 awesome features of Chrome DevTools.
I use it all the time. Often times, you are working with a large file of code and should be able to see what is happening on a particular line.
You can open the Sources panel, find the location of interest, and set a breakpoint. Try this instead of going into your code editor and putting the debugger statement in the scope you want. The debugger statement is functionally identical to a standard breakpoint.
On the next page of execution, the debugger statement will be triggered and execution will stop, allowing you to inspect variables and step through the code.
For example, here I have a page that is part of a React application that does a search. I suspect I have a problem with the onTextChange event handler, so I add a debugger to see what happens.
Debugger makes it easier to interrupt execution
I usually use the debugger statement anywhere I would use console.log (), but I find it faster and easier to work with the debugger. You agree with me?
Black box script
It can work hand in hand with a debugger. Often when debugging and stepping through code, the debugger will jump from your code to some vendor’s code. This can be annoying. Also, it is rather difficult to say that the problem is definitely not related to third-party code. To avoid this interruption, close the vendor code into a black box and the debugger will not jump to it in the future.
Close the vendor code in the black box
If you decide that you no longer want or need to have the vendor code placed in the black box, simply right-click the file in the source pane and select Stop Black Box.
Stop black box
You no longer need to waste time looking at the supplier code!
Event listener breakpoints
Let’s assume you are trying to debug an event related problem. Maybe you need to indicate a mouse click and you want to abort execution whenever this event occurs. You don’t have to search the source to find the handler. Let the developer tools do all the work for you.
Setting an event listener breakpoint
As you can see, we can choose to listen to only the mouse click event or any mouse related event. Also, we are not limited to mouse events only. We can capture any event from any object on the page. Super helpful!
This is another one of those developer tools features that you didn’t know about. Working with modern web applications is not like the old days when the whole world was static. Pages are very often dynamic and constantly changing. By using DOM breakpoints, you can isolate a DOM element and stop execution when that element changes.
Let’s open the Elements panel and set a breakpoint on the DOM node.
Setting a DOM breakpoint to modify a subtree
We can violate several conditions if we need to. This is where we select subtree modifications. With the breakpoint set, let’s try interacting with the UI and triggering a trigger.
Calling the DOM breakpoint
When a breakpoint is triggered, DevTools goes to the Sources panel and highlights the code that modifies the DOM.
When working in DevTools or any development environment, you must keep your hands on the keyboard. Moving your hands away from the keyboard to manipulate the mouse is inefficient and time-consuming. Decision? Command menu!
To open the command menu, after opening DevTools, press control + shift + p on windows or command + shift + p on mac.
Let’s use the command menu to switch between panels without using a mouse:
Changing panels using the command menu
Next, let’s move on to the side DevTools:
Changing the location of developer tools
Let’s take a screenshot for you to share with a colleague.
Take a screenshot
There are many other functions built into the command menu. To see the complete list, simply open the menu and scroll through it.
Lots of cool stuff in the command menu
Using the command menu may slow you down a bit at first, but it’s worth it. Take the time to study it well and you will achieve greater productivity.
And so you have 5 more awesome DevTools features.
Use a debugger statement to stop the execution of your code. Try installing it where you usually use console.log ().
To avoid interfering with the vendor code when debugging, enable a black box script for it.
Use the Event Listener Breakpoints panel to easily set and fire breakpoints for any event on the page.
Use DOM breakpoints to stop execution when the DOM element changes.
Learn to love and use the command menu. This will save you time and make you a more efficient developer.
Author: Alex ritzcovan
A source: //itnext.io
Editorial staff: Webformyself team.
PSD to HTML
Layout of the site in HTML5 and CSS3 from scratch