Website debugging checklist

6 Step process to debug efficiently and effectively

1️⃣ Verification - Before initiating a debugger or inspecting the code, ensure that you can reproduce the issue. Verify that the "issue" is indeed a problem, and once it has been established as a bug, you can then investigate further.
2️⃣ Dev tools - Modern web browsers come with built-in developer tools (Often disabled by default). To enable them, refer to the instructions below depending on the browser you are using: Chrome (Mac): CMD + OPT + i; Chrome (Windows): CTRL + SHIFT + i (or F12). If neither of these open the developer tools, then you need to enable them in the main browser settings (Here's how you do that). Open the dev tools, go to the Console tab to view any errors/exceptions (often red), read the error, and identify the possible cause of the problem. The error might include a stack trace and file/line number of the exception.
3️⃣ Breakpoints - Using the console info to find the section of the code that could be causing the issue. Alternatively find an area of the code that is executed prior to the occurrence of the issue. This helps you to get as close to the problem as possible. In the developer tools, go to the 'Sources' tab. The left pane allows you to browse through the code files and locate the file you would like to debug (tip: If you know the filename, use CTRL/CMD + O and search for it). Once you have identified the correct file and area of code, you can create a breakpoint by clicking on the line number(s) in the middle pane.
4️⃣ Step through the code - Restart/Refresh your app/website and run through the flow until your breakpoint is reached, at which point the debugger will pause.
5️⃣ Inspect Variables - Use your mouse to hover over the variables and inspect their values, make sure the value matches what you expect. Add and remove additional breakpoints as you eliminate sections of code.
6️⃣ Code Flow - Follow the order of execution. If you expect function one to be called before function two, step through the code to make sure the expected flow is correct.

Built using Interact List