This article is not about love nor about breaking things, but the methods to debug your code more efficient.
I will list a couple of the most used Chrome DevTool breakpoint references that will stop the running code and let you dive deeper into the evaluation and execution.
Also, considering that you know how to open the DevTools and switch to Source tab.
Event Listener Breakpoints
With event listener breakpoints you can stop the code right after the specific event was triggered. You can find the list of events in the Sources tab, Event Listener Breakpoints pane on the right side. The list consists of all javascript events which can be selected by expanding the particular category.
For example, to pause a code of a registered click event of a button you need to tick the checkbox in the pane Event Listener Breakpoints > Mouse > click and interact with the button.
The downside is that all click events of the document will be paused until it reaches your function, so be cautious and resume the script execution until you'll see what you look for.
Line of code breakpoints
This one is the most popular and used breakpoint. It will pause the code just before the breakpoint line. To use it you have to know where exactly you want to pause in the file and set the point manually.
In the DevTools open the file you want to examine by pressing Command+P (Mac) or Control+P (Windows), enter the name of the file and pick it. On the left side of the file by ticking the line number you will set the breakpoint and next time you execute this file, the code will pause.
Also, you will have access to the scope variables that have been evaluated, just go to the Console tab and fiddle with them.
Conditional breakpoints
Very similar to the line of code except you can enter the condition for the pause. I found it very useful when looping through the list of documents but need to pause and inspect only a particular one.
To set the condition open the file and right-click the line of code. From the presented menu select "Add conditional breakpoint", and set the condition, for example, "row.order === 2". Next time you execute the loop, the code will stop when the condition evaluates to true.
Logpoints
One of my favourite and easiest approach logging information into the console. Forget placing the console.log() lines in your source code and reloading the page. Whether you need to log variables or see if the line of code is executing use the breakpoint menu from the right-click on the file line number and select an "Add logpoint..." option. In the presented input enter a value to print in the browser console (might be a string or evaluated scope variable). Interact with a webpage and see printed information in the browser console when the log point is triggered.
DOM breakpoints
Pause the code when the DOM element is changing. You can set 3 conditions when to pause the code: element children modification, attribute change and node removal.
To set the breakpoint select element from Elements tab in the DevTool, right-click it, hover on "Break on" and select one of the three breakpoint conditions.
The next time the DOM element changes, the code will pause and you be able to identify what actions caused it.
These few breakpoint options are only a little piece of the bigger picture. Chrome DevTools has a lot more to offer for debugging your code and breakpoints is a very good start, to begin with.
Top comments (1)
Nice one 👍😊
Keep up the great work!