This is a guide on how one might go about troubleshooting problems with a web application, using tools like console.log(), chrome dev tools, the debugger, and other resources.
Break a task down into small chunks. Verify each chunk. As you successfully complete a step and validate that the code works, perform a git commit to provide a historical bread crumb trail. This will narrow the scope of a potential error.
This space can get really confusing fast, there are a lot of opinions.
I would recommend either standard or prettier. Standard provides more code rules help. Prettier formats your code making it easier to spot syntax errors.
Achieve more signal and less noise by keeping your console clean. Remove unnecessary or older calls to console.log(). Make a habit of cleaning up warnings and debug messages before committing your code. When a problem occurs, you will receive a high-quality signal directly relating to the issue.
Errors and bugs are like murder mysteries. To solve them you have to find the clues. Read the error several times and look closely for clues. Some errors provide very clear information of what is wrong, others do not. If you don't recognize the error or don't know what the message is saying, look for a line number in the stack trace for a file you recognize.
Do not leave the error and go to the next step. At the very least, disable the code that is producing the error. If you have committed frequently, you can always revert your current changes and go back to a stable state before moving to the next task.
There's a reason pilots use checklists. They work.
- Run your linter tool via command line.
- Make sure there are no errors showing in your editor
- Look at the code at the line number, are there any typos or common mistakes (if you can't find a line number, use
git diffto look at all the code you have changed) - What is calling this code? Verify the data being passed to this code is actually being passed to this code block.
- Verify that the data as a result of this code is being returned.
- Use
console.log(), react dev tools, chrome dev tools, to find the state before the bug and trace through the steps until the error occurs. *If you are usingconsole.log(), add metadata to provide a higher quality signal:console.log('some metadata: ', data)
If you are still unable to find out what is happening, try to describe the problem.
Using the following structure can help with describing an error:
* Introduction - Short description of the problem
* Background - what was the user doing to create this error
* Situation - what is the expectation
As a User
I want to …..
So that I can do ……
* Assessment - Describe the error message and show a git diff between last commit.
Describing your error in this way provides enough information to those helping you troubleshoot. Also include screenshots and links to your repository as well.
Accurately defining the problem is half the solution.
Seek help. Post in slack. Ask a neighbor. Ask Google.
Provide a resource for your future self. In the future, you will repeat your mistakes and encounter the same errors. Now is the time to keep a record of the errors you encounter.
Github issues is a great place to to document errors. Another option is to create an error log repository by adding a markdown document for each error. This can provide a great resource to your future self. Your future self thanks you.
Here are some resources that you may find helpful.
- https://developers.google.com/web/tools/chrome-devtools/javascript/
- https://medium.com/@DcKesler/debugging-react-with-chrome-871f59229f62
Here are some commercial debugging tools
Learning how to test your code and using unit testing and integration testing can help you troubleshoot as well. Testing is outside the scope of this document, but is a great way to find and prevent bugs.