As a developer you will often want to debug code. You might have already used console.log in some of the challenges, which is the simplest way to debug.

In this article we will tell you some of the coolest tricks, to debug using the native debug-tools of the browsers.

A brief insight into the FreeCodeCamp Code Editor:

Before jumping into debugging lets leak out some secret facts about that awesome code checking engine at FCC.

We use a customized CodeMirror, as the code editor. A eval() function is used to evaluate the JavaScript code represented as a string from the editor. When eval() is called, browsers will natively execute your code. We will learn more why this secret is important in later sections of this article.

1 : Basics of DevTools

Launching the Chrome DevTools

on Mac, or If you just love your mouse go to Menu > More Tools > Developer Tools.

Getting to know the Sources and the console tabs.

These two tabs are the perhaps going to be your best friends while debugging. The Sources tab can be used to visualize all the scripts that’s on the webpage you are visiting. This tab has sections for the code window, file tree, call stack & watch windows, etc.

The console tab is where all of the log output goes. Additionally you can use the console tab’s prompt to execute JavaScript code. Its kind of synonymous to the command prompt on Windows, or terminal on Linux.

Tip : Toggle the console anytime in the DevTools using Esc key.

2 : Common Shortcuts and features

Feature Windows, Linux Mac
Search for a keyword, regex is supported. Ctrl+FCmd+F
Search and Open a file Ctrl+PCmd+P
Jump to line Ctrl+G+:line_noCmd+G+:line_no
Add a breakpoint Ctrl+B, or click on the line no. Cmd+B, or click on the line no.
Pause / resume script execution F8F8
Step over next function call F10F10
Step into next function call F11F11

3 : Using a Source Map for our Code

Every script can be visualized in the Source tab of the DevTools. The source tab has all the JavaScript source files. But the code from the code editor is executed via eval()in a container simply called a virtual machine(VM) within the browser process.

As you might have guessed by now is that our code is actually a script that doesn’t have a file name. So we don’t see that in the Source tab.

Here comes the hack!

We must leverage Source Maps to assign a name to the JavaScript from our editor. Its pretty simple:

Lets say we are on the Factorialize challenge, and our code looks like this:

function factorialize(num) {
if(num <= 1){
...
}
factorialize(5);

All we need to do is add //# sourceURL=factorialize.js to the top of the code, i.e the first line: