Debugging front end JavaScript


A simple and relatively effective way to debug your front end JavaScript code is to add the console.log(var) to parts where you want to check if the output matches the expected value. Similar technique as adding break points to your code.

The console.log output is visible in the browser's console:

For Google Chrome and Mozilla Firefox you can acceess the developer tools by pressing the Control+Shift+I (on Linux and Windows) or Command+Option+I (on Mac), and find the console tab.

Chrome Developer Tools

As a next a bit more advanced step, Chrome browser has by default integrated the developer tools to debug front end code more quickly and efficiently.

Regular expressions

To debug regular expressions on the fly, you can use the online free regex tool and debugger at Regex 101.

See alo

Found a typo? Something wrong with this content?

Just fork and edit it.

Content of this work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license. Code snippets in examples are published under the CC0 1.0 Universal (CC0 1.0). Thanks to all contributors.