1. Browser Console
console.error() functions, respectively. These messages can help you track the flow of your code and identify where bugs might be occurring.
2. Conditional breakpoints
Conditional breakpoints are a powerful debugging tool that allows developers to pause code execution only when a specific condition is met. This is particularly useful when debugging loops or functions that are called multiple times.
For example, suppose we have a loop that's iterating over an array of objects, and we want to pause the code execution only when the value of a specific property is a certain value. By adding a conditional breakpoint that checks the value of the property, we can quickly find the problematic code.
Console.log is any developer's favorite debugger, right? But guess what? We have special "debuggers" too!
A debugger is a powerful tool that allows you to step through your code and inspect its state at different points in time. This can help you identify bugs that might be occurring at specific points in your code, or that might be caused by interactions between different parts of your code.
4. Use a Linter
A profiler is a tool that helps you analyze the performance of your code. It can help you identify slow or resource-intensive functions, identify memory leaks, and optimize your code for better performance. Profilers can also help you identify bugs that might be caused by inefficient algorithms or other performance-related issues.
Most modern web browsers include a built-in profiler that can be accessed through developer tools. To use the profiler, simply open the developer tools, navigate to the "Performance" tab, and start a profiling session. Then, interact with your web page or application as you normally would, and the profiler will record and analyze the performance of your code. Pretty handy, right?
6. Testing frameworks
For example, if you have a function that takes two numbers and returns their sum, you can write a test case to ensure that the function returns the correct result for different input values. If you modify the function and it no longer passes the test, you know that the changes have introduced a bug.
Testing frameworks can also help you catch errors earlier in the development process, making debugging easier and faster. Additionally, these frameworks can help you ensure that your code meets certain quality standards and remains reliable and maintainable over time.
7. Error Tracking Services
By monitoring these logs, you can quickly identify and diagnose errors as they occur, allowing you to fix them before they impact your users. These services can also help you identify recurring errors and track their frequency, making it easier to prioritize and fix the most critical issues.
8. Call Stack Inspection
The call stack is a data structure that keeps track of the execution of a program. It records the sequence of function calls that led to the current execution point. When an error occurs in the code, inspecting the call stack can help identify the source of the error.
console.trace() function, which prints a trace of the function calls that led to the current execution point.
9. Live Editing
Live editing is a debugging technique that allows developers to modify the code while it is running. This can be useful in cases where the problem cannot be reproduced in a development environment or when the developer wants to see the impact of changes in real-time.
Another tool for live editing is the Node.js debugger. This allows developers to debug their code from the command line and make changes to the code while it is running. The debugger can be started with the
--inspect flag and accessed through the Chrome DevTools.
10. Code Review
Code review can take many different forms, but generally involves several people examining a codebase and looking for problems. This can be done through a variety of methods, such as:
Pair programming: Two developers work together on the same codebase, with one developer writing code while the other reviews it in real-time. This allows for immediate feedback and correction of errors.
Manual code review: One or more developers read through the codebase, looking for errors, inconsistencies, and opportunities to improve the code. This can be done manually, using tools like text editors or specialized code review software.
Automated code review: Developers use tools that analyze code for common errors, such as syntax errors, variable misuse, or performance issues. These tools can be integrated into a continuous integration pipeline to automatically catch issues before they reach production.
Some best practices for effective code review include:
Establish clear guidelines: Make sure everyone knows what the code review process entails, including the roles of reviewers and the criteria for success.
Focus on specific issues: Rather than trying to review everything at once, focus on specific issues like performance, security, or maintainability.
Use tools to assist: Utilize code review tools, such as linters, static analyzers, or IDE plugins, to automate the process and improve consistency.
Encourage feedback and communication: Make sure reviewers can communicate with each other and the code author, asking questions and providing suggestions for improvement.
Prioritize code review: Make code review a regular part of the development process, rather than an afterthought, to catch errors early and ensure high-quality code.
Top comments (21)
A very comprehensive list!
I'd add that sometimes conditional debugging can make things run slower, but that only starts to matter when running loops with a large number of iterations.
If that becomes a problem, sometimes it's worth just adding the condition into the code temporarily and putting an unconditional breakpoint into the code. For example, if looping through 1000 items for something called
foobar, you could do
Thank you so much for sharing about this😊🙌
Which code editor do you recommend that is best for debugging?
As far as I know, I don't think there is a code editor just made for "debugging". Just use whatever code editor you normally feel the most comfortable with and use various tools or techniques to debug your code.
Personally speaking, I just use VS Code and it works really well for me.
I would suggest to use browser developer console for debugging.
Just use debugger/breakpoint in your code, which will help you to see your code working step by step.
What do you think of VS code?
Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍
Thanks for featuring my article :)
Thank you for the great summary article. I notice your location is Pakistan and yet your english is impeccable.
Glad that you liked it!
Well, I guess reading novels and watching tv series + movies with English subtitles does help ;)
Sounds good , I meet with you on twitter and happy to see you here ...
I would bet that 50-75% of development time is reduced by fully coding in Typescript and never writing another ".js" file again unless you have legacy code and will do quick fix
So many devs are adopting Typescript now and it sure is useful👀
Not a single word about
Can't possibly fix in everything in just one article :)
There are ofcourse many more amazing methods out there as well! Btw, thanks for this addition.
What are the other amazing methods?