Browser Tools

If you're running a program through your browser most modern browsers (i.e. Chrome, or FireFox) have built in debugging tools you can use!

Step 1: Accessing the Dev Tools

In Chrome:

In FireFox:

Step 2a: Add Breakpoints in Chrome

Note: If you're unsure where your error is coming from you can add a break point at the top of your code and step through your whole program line by line

Step 2a breakdown

chrome debugger example

Step 2b: Add Breakpoints in FireFox

Step 2b breakdown

firefox debugger example

Step 3: Run your Code

Once you've added a breakpoint run your code, and step through the section by clicking the step over button or pressing f10.

If you've stepped through your code, and are still having issues finding where the errors are coming, or you find yourself traversing through previously unknown code there are several things you may want to try:

Note: If your code runs on page load, you will need to refresh the page before the debugger takes effect.

 Previous Next