Debug JavaScript faster and more efficiently. Being familiar with tools can make them more useful at work. Despite rumors that JavaScript is hard to debug, if you master a few tricks, you can fix bugs and bugs in a fraction of the time. This article has listed 14 debugging tips that you may not know, but might want to keep in mind for the next time you need to debug JavaScript code!
Besides console.log, debugger is our favorite, fast and dirty debugging tool. After executing the code, Chrome automatically stops while executing. You can even encapsulate it as a condition that runs only when needed.
2. Display objects in a table Sometimes, you have a complex set of objects to view. You can view and scroll through console.log, or use console.table to expand and see what you’re working on!
3. It’s great to have different mobile device emulators on your desktop with different screen sizes, but it’s not practical. How do I resize my window? Chrome provides everything you need. Jump to the console and click the ‘Switch Device Mode’ button. Observe window changes can! If you want to learn about the front end, you can go to the Q group, which is 291 first, 851 in the middle, and 189 last, where you can learn and communicate, and you can download materials.
Mark a DOM element in the Elements panel and use it in the console. The Chrome console keeps the last five elements of the selection history, with the first selected element marked 0, the second selected element 1, and so on. DOM nodes can be accessed from the console if you select the following tags in order of “item-4”, “item-3”, “item-2”, “item-1”, and “item-0”.
5. Use console.time() and console.timeend () test loops to know the execution time of some code, especially when debugging slow loops. You can even set multiple timers by passing different parameters to a method.
Using a JavaScript framework introduces a lot of code. You create the view and fire the event, and finally you want to understand the process of the function call. Because JavaScript is not a very structured language, it’s sometimes hard to know when something is going on. You can easily debug JavaScript using console.trace (which is just tracing in the console).
Sometimes code breaks in production, but your Source Maps are not deployed in production. Don’t be afraid. Chrome formats your JavaScript files. The formatted code isn’t as useful as the real thing, but at least you can see what’s going on. Click the {} button in the source viewer in the Chrome Console.
Assuming you want to break points in a function, the two most common ways to do this are to add a debugger to your code by looking for a line in the console and adding breakpoints. In both solutions, you have to click in the file to debug a particular line. Using console interrupt points may not be common. Use Debug (funcName) in the console to stop the code when the incoming function is reached. This debugging method is quick, but the downside is that it does not work with private or anonymous functions. But with the exception of private and anonymous functions, this is probably the fastest way to find debugging functions. (Note: this function is not the same as the console.debug function.)
These days, it’s common to introduce several libraries or frameworks into an application. Most of them are well tested and relatively bug free. However, the debugger still enters files that are not relevant to the debugging task. The solution is to mask scripts that don’t need debugging. Include your own scripts, of course.
In more complex debugging, we sometimes want to output many lines. What you can do is keep the output structure nice and use more console functions, such as console.log, console.debug, console.warn, console.info, console.error, etc. You can then quickly browse in the console. Sometimes, however, some JavaScrip debugging information is not what you need. Now you can beautify the debugging information yourself. When debugging JavaScript, you can use CSS and customize console information.
In the Chrome console, you can view specific functions. Each time the function is called, the passed arguments are printed out. This is a good way to see the parameters of the function passed in. However, it would have been nice if the console had prompted us for the number of parameters. In the example above, Func1 expects three arguments, but only two are passed in. If you do not handle this parameter in your code, you are likely to make an error.
12. A faster way to access elements in the console than querySelector is to use the dollar sign, which (‘ CSS − Selector ‘) will return the first match of the CSS selector. $(‘ CSS-selector ‘) will return all matches. If you use an element multiple times, you can save it as a variable.
Postman is great (but Firefox is faster) many developers use Postman to view Ajax requests. Postman is really good. But opening a new window, writing request objects, and then testing them is cumbersome.
Sometimes it’s easier to use a browser.
You don’t need to worry about authentication cookies if you request a password authentication page when viewing with your browser. Here’s how to edit and resend a request in Firefox.
Open the console and switch to the Network TAB. Right – click the request you want, then select Edit and resend. Now you can change anything you want. Change the title and edit the parameters, then click Resend.
14. Interrupting nodes to change the DOM is an interesting thing. Sometimes it changes, and you don’t know why. However, when you debug JavaScript, Chrome can pause when a DOM element changes. You can even monitor its properties. In the Chrome console, right – click the element and select Interrupt in Settings.