JavaScript (Reference)

Debugging

What are the issues when debugging Javascript that runs in the web browser?

The issue: Show errors/debug info without messing up the page.
- Debugging often involves writing out debug data to see what is going on. Where do you write debug info to? Don't want to mess up the page.
- Code errors may also generate JS error messages, but do not want these on the page.
Q. Does the client want to see Javascript errors?
The answer: The JS console
- JS error messages are written to the console.
- Write debug info to console with console.log
Doing your own error-handling:
- try and catch in Javascript

Chrome
- Chrome DevTools - View source and inspect elements in yours or other people's pages.
- Chrome - Tools - Developer tools (or Ctrl-Shift-I, or "Inspect element")
- JavaScript Console (Ctrl-Shift-J)
- Ctrl-Shift-F to search
- Can search for Javascript function name to view the source.
Firefox
- Error Message Console (Ctrl-Shift-J)
- Firefox Developer Tools
- Firefox Browser Developer Edition
Edge / IE
- Developer Tools (F12) - Console

On Chrome you can filter console.log messages by error/warning/informational.
A subtle bug:
1. Chrome stopped displaying console.log output from my program.
2. I thought my program was at fault. Spent some time trying to debug program.
3. Eventually I discovered the console.log filter level had somehow been changed, so informational messages were hidden.
4. Return filter to default and my program output was visible again.

Just type name of object in console to see its structure.
May need to type: console.dir(object)
Printing out a complex object:
- How can I print a JavaScript object?
- Print content of JavaScript object?
- Dump complex object to console: JSON.stringify
  console.log ( JSON.stringify ( theobject, null, ' ' ) );

Often, "View source" is not enough, because that shows the page before JS executes and changes the page.
To view the page right now, after JS has executed, type this in console:
```
document.querySelector("body").innerHTML
```

"Beyond Console Log", by the Fireship channel.
The "console" object has many features to support debugging.
See all console functions.