Debugging JavaScript that executes on Ribbon Button clicks

When you click a button in the ribbon, dynamics uses ajax to load the file where the js function is in (only once). Therefore you cannot set a breakpoint on the function, before the button click. Here I will present some solutions to debug such functions anyways:

  1. Set incorrect library in Ribbon definition
  2. Use “debugger;” statement
  3. Throw an error
  4. Use sourceUrl property

Set incorrect library in Ribbon definition

Interestingly dynamics loads the file where the function for the ribbon is in at page load. So the file is there, but won’t be used. By putting an incorrect library in the ribbon definition the ajax call will result in an 401 error. Luckily the function from the already loaded file will be used.
In this solution you can set a breakpoint before clicking on the button. Unfortunately this will also result in an error screen by dynamics.
Works in FF, Chrome. Not tested in IE.

Use “debugger;” statement

When you put

debugger;

into your sourcecode the debugger will pause on this line.
Works in Chrome. Not tested in IE.

Throw an error

You can also throw an catch an error in your code:

        try
        {
            throw new Error('breakpoint');   //debugger will break here
        }
        catch (e)
        {
        };

Then set your debugger to pause on all errors.
Works in Chrome, but not in FF. Not tested in IE.

Use sourceUrl property

By putting a

//@ sourceURL=filename.js

property into your javascript file, it will be listet as file in Chrome debugger, after it has been loaded. As it will be listet after you have clicked the button, you can only set a breakpoint after execution of the js function.
Works in Chrome, but not in FF. Not tested in IE.