Javascript debugger

Before writing more complex code, let’s talk about debugging.

Debugging is the process of finding and fixing errors within a script.

Chrome debug android

Chrome debug android

How to open debugger in chrome

Chrome debugger extension

How to debug javascript in visual studio code

Chrome debugger breakpoint

All modern browsers and most other environments support debugging tools – a special UI in developer tools that makes debugging much easier. It also allows to trace the code step by step to see what exactly is going on.

We’ll be using Chrome here, because it has enough features, most other browsers have a similar process.

The “Sources” panel

Your Chrome version may look a little bit different, but it still should be obvious what’s there.

• Open the example page in Chrome.
• Turn on developer tools with (Mac: ).
• Select the panel.

Here’s what you should see if you are doing it for the first time:

The toggler button opens the tab with files.

Let’s click it and select in the tree view.

Here’s what should show up:

The Sources panel has 3 parts:

1. The File NavigatorChrome extensions may appear here too.
2. The Code Editor pane shows the source code.
3. The pane is for debugging, we’ll explore it soon.

Now you could cl

what is javascript console in google chrome

how to debug js in browser