JS

REALLY SIMPLE JAVASCRIPT DEBUGGING

SOMETHING IS NOT WORKING... NOW WHAT!?

Press F12 (in most modern browsers) to open the developer's tools.

Click on button, submit form, or reload page to trigger the error again.

Check under the "console" tab - It will show the exact file and line where the error occured.

USEFUL CONSOLE FUNCTIONS TO KNOW

console.log() - Show the value of a variable or message in the console. var foo = "bar"; console.log("The value of foo is "+foo);

console.table() - Output an array or object in a nice table format. var foo = ["first", "second", "third"]; console.table(foo);

USEFUL CONSOLE FUNCTIONS TO KNOW

typeof - What is the data type of a variable? String? Number? Array? var foo = "bar"; console.log(typeof foo);   foo = 123; console.log(typeof foo);

console.trace() - What led to the script at this point? function first () { second(); } function second() { console.trace(); } first();

MORE CONSOLE FUNCTIONS TO KNOW

debugger - Pause at this point, continue only when the developer hits "next" in the developer's tools. var foo = "bar"; debugger;   foo = "par"; debugger;