Friday 21 July 2023

Debugging Javascript Within JsFiddle, CodePen etc

As long as a debugger is open (such as Chrome's Debug Dev Tools <F12>), then the Javascript statement "debugger;" can be placed anywhere in your Javascript code to pause execution, when it is encountered you will be able to single step and watch variables as usual.

The debugger statement will have no effect if debugging tools are not already open.

You probably want to turn off any "Auto Run" option first (JsFiddle, Settings, Behavior, Auto-run code) to avoid confusion and frustration.

Here is an example jfiddle you can try.  The example uses "console.log()" to display some messages, which is the ultimate fallback for debugging any language (say, echo etc) and can help supplement a proper debugger by providing more context about the state of the code's execution.

No comments: