APEX 5 introduces some new JavaScript APIs for debugging JavaScript, but JavaScript debugging is already available to users of APEX 4.2. Having noticed that some APEX developers rely on using alert() in order to debug their JS, I thought I would do a quick write up on using debugger;

Consider this example of debugging a custom event using APEX 4.2.

Firstly, I have a button that triggers a custom event via a JavaScript URI using the jQuery trigger method. Notice that I am passing through an item as part of the data object for the 2nd parameter.

Button

This event is caught and handled by a dynamic action...

DynamicAction

which in turn, issues a log entry to the console (preferable to an alert()) and launches the debugger...

DynamicAction2

Now, whilst running the page and clicking the trigger button with dev tools open, the debugger kicks in and pauses at a breakpoint at the point where the debugger; line is encountered.

Debug

Because the debugger is now paused at the point that the event has been handled by my dynamic action, I can do some debugging of the event in the console. The screen capture below shows me

  • Viewing the DOM element that triggered the event (P20_TRIGGER).
  • Viewing the value of the data item passed along with the event.
  • Changing the value of the data item to a new value (just for kicks).
  • Inspecting the event itself.

Console