Another post to remind me of something that I often forget after not using it for a while.

JavaScript command:


Triggers a breakpoint when I have a browser developer tool open and debugging enabled.

As I build more complex APEX application it seems I use JavaScript more than ever.  That increased use of JavaScript lends to needing to debug my JavaScript code more often.  Most browser have a developer toolbar built-in or as an extension.  Currently I use the Chrome Developer Tools more often then the Internet Explorer Developer Toolbar or Firebug for Firefox.  The example in this post will be demonstrated using the Chrome Developer Tools.

To show a simple example I created a "Debug Me" button on my page.  The button is defined to not do anything but run a Dynamic Action.  The Dynamic Action is simply set up to run a line of JavaScript code to execute the debugger command as shown below.

When going to my page in a normal browser window if I click on the "Debug Me" button nothing will happen.  The Dynamic Action is firing but it isn't apparent that anything is happening because all I have in my Dynamic Action is the one line of JavaSript code.

If I open my Developer Tools (by pressing F12 or CTRL-SHIFT-I) then click the "Debug Me" button the page will be shadowed and the Developer Tools will jump to the current line in the JavaScript source where I had my debugger statement.  In Internet Explorer and Firebug you will need to have the page loaded in debug mode for this to happen.

If needed I can use the step buttons to step through/over the code or I can go to my Console window and enter my own commands.

I can run APEX JavaScript API commands.

I can run jQuery commands or standard JavaScript commands.  To get back to normal page operations I can hit the resume button.

I use this technique quite often to get on idea of DOM values at certain points in my page execution.  At times it helps me to figure out the jQuery code I will need to write to perform some needed functionality.