The Step into button is similar to the previous one, but instead of executing the current line, it will execute the function call and pause on the first line of the function. If the current line is a function call, it will execute the function and pause on the next line after the function call. This will execute the current line and then pause again on the next one. ![]() On the second podium for usage you’ll probably find the Step over button. You will find yourself using it quite often, for example if you have just one breakpoint to peek at the current state, or if the breakpoint was mostly to validate that the code was executed at all. If there are no more breakpoints, it will just run until the end. This will resume the execution of the code until the next breakpoint. Ok maybe the title is a bit too much, but you can do some cool stuff with the debugger to control the execution of the code. On the call stack you can exactly see that, all the previous functions that led the execution to the current one. This is useful to understand how you got to the current point in the code.įor example, you have a function that is called from many different places and you want to know which one is calling it at the moment. The Call Stack tab shows you the current stack of function calls. Last example, you can write a boolean expression like players.name = 'Leonardo' and it will show you if the condition is true or false while you step through the code. for ( let i = 0 i p.name) and it will show you the names of all the players. The name is self-explanatory, but I’ll explain it with an example. Last call, you can watch it on video! Conditional breakpoints On Chrome, the browser will pause and from there you’ll be able to manually control the execution of the code… and do some more cool stuff I’ll explain in a moment. In short, you tell the debugger that you want your code execution to pause when it reaches a specific line… and that’s it! If you’re not too familiar with debuggers, I already mentioned breakpoints without explaining what they are… but it’s not much more complicated than what I already said. This can be useful if you want to debug a specific part of your code and you want a quick shortcut to add a breakpoint from your editor, but please don’t forget to remove it before committing and pushing your code. However, if you have the developer tools open, you’ll see that the debugger will pause the execution of the code on that line. When you switch to the browser and you use your app, you will see that nothing happens. ![]() Using the debugger statementĪlternatively, you can add a debugger statement in your code. A smart way is with the command palette (Cmd + P on Mac, which should be Ctrl + P on Windows) and then type the name of the file you want to debug.įrom here you can click on the line number to add a breakpoint and the code will pause when it reaches that line. To access the debugger, you can click on the “Sources” tab and then on the left, you’ll see all the files that compose your application.įrom here you can either navigate to the file you want to debug or you can use the search bar to find it. You already know this, but most often you use the Console or the Network tab, but there’s much more than that. On Chrome, you can press F12 or right-click on the page and select “Inspect” to open the developer tools. Today, let’s see together the Chrome Debugger. ![]() I’m Leonardo and I talk every week about Web Development and Open Source. ![]() If you never used a debugger, imagine being able to run the code line by line, where you can see all values of your variables at any given time, you can run some extra code to validate your assumptions, you can pause the code only if a condition is met and much more! Or if you prefer reading, here’s a summary of what the video is about (but let me recommend you watch the demo in the video).
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |