Debugging
Knowing what common problems are in code and what typical symtpons of them are, can help you find and fix them. Depending on the type of problem, you may also use a different strategy for finding the root cause. Sometimes, multiple problems can be observed in combination. For example, a variable is undefined due to wrong handling of asynchronicity.
- Syntax problems. Symptoms: Errors messages in consoles. Compiler errors.
- Asynchronicity problems: Symptoms: Unexpected behaviour. Data not showing up on UI.
- Layout problems: Symptoms: Visual output not as expected.
- Network problems: Symptoms: Unexpected behaviour. Data not showing up on UI.
- Type problems: Symptoms: Unexpected behaviour.
- Off by one problems: Symptoms: Error messages in console, e.g. "Undefined is not a function". Unexpected behaviour.
- Undefined variables: Symptoms: Error messages in console, e.g. "Undefined is not a function". Unexpected behaviour.
- Logical problems: Unexpected behaviour.
If your code is not behaving as expected, your mental model and the actual state of the application are not aligned. The goal of debugging is to learn enough about the state of the application to align your mental model and fix the bug. Depending on the kind of problem, different stratgies can be helpful. Sometimes you have to apply one after the other, if you don't succeed.
-
Inspect the console for error messages (on the server, in the browser). Do you understand what the message is telling you? Not all error messages are helpful. Often googling them can help or asking someone more experienced. Can you tell what part of the code is producing the error message? The browser console will show you the line number, where it is produced. You can click on it, to navigate to the code.
-
Check for compiler errors: Some syntax errors are caught by the Vue compiler. In that case you will get an output in your terminal and in the browser, if you're using the dev server. Note in the example below, the problem is on line 16 ("." instead of ";"), but the compiler detects it on line 17. If you get an error from the Vue compiler, it is almost always a syntax error. Check your code carefully, especially around the lines that the compiler prints out.
-
Use the debugger: With the help of the debugger, you can inspect the code at specific points. You can set breakpoints, step through the code line by line and observe variables. You can do this both on the front-end in the browser and on the back-end in VS Code. This technique is particularly helpful for logical problems, type problems or undefined variables.
-
Printing to the console: With console logs, you can easily figure out the content of a variable or mark places in the code that are or are not reached. When combined with the Vue dev server that live reloads your code on any changes, console logs can be an easy and quick technique to master to find problems.
-
Using browser tools: Apart from the console, browser have tools for inspecting the DOM, applied CSS rules and network communication. Learn the use these tools to get an acurate picture of your application state.
-
Higlighting an element with a border: For some CSS problems, it can be helpful the add a border to an element that you want to track to highlight it in the UI.
-
Back tracking: Undo your latest changes until you get to a state that behaves as expected. From there, work in very small increments up to your desired state and note where it fails.
-
Stackoverflow: If you can isolate the problem and still don't understand why it happens, try asking on Stackoverflow.
-
Explain the problem to someone else: Explaining the problem to someone else can often be enough for you to understand it, if not possibly the other person can help you. The someone else doesn't have to be a person, but could also just be a rubber duck
-
Change of scenery: Sometimes it helps to get away from the code and come back with fresh eyes. Go for a walk, have lunch ...
- Debugger
- Breakpoint
- Stepping into functions and out of functions
- Call stack
- Inspecting variables
- DOM Viewer
- Search
- CSS tools
- Vue Chrome plugin
- Network tab