Microsoft Dynamics CRM Team Blog: Debugging custom JavaScript code in CRM using browser developer tools

[Blog bot]

Источник: http://blogs.msdn.com/b/crm/archive/...per-tools.aspx
==============

You can use JavaScript in Microsoft Dynamics CRM to perform actions in form scripts, command bar (ribbon) commands, and web resources. More information: Use JavaScript with Microsoft Dynamics CRM

Each browser provides you with a debugging tool to help you debug your custom JavaScript code natively in the browser. Typically, you activate debugging in your browser by pressing the F12 key to display the native developer tool used for debugging.

In This Post

Debugging your JavaScript code for CRM web client

Debugging your JavaScript code for Interactive Service Hub client

Debugging your JavaScript code for CRM mobile clients

Browser Developer Tools Reference

Debugging your JavaScript code for CRM web client

When you use a custom JavaScript library with the CRM web client, the library is loaded with the page, and you can view it in the browser developer tools to set break points, and examine the variables as the code executes to debug your JavaScript code.

For example, on Microsoft Edge, the custom JavaScript library becomes available in the Debugger tab.



On Google Chrome, the custom JavaScript library is available in the Sources tab.



For more information, see Debugging JavaScript in Microsoft Dynamics CRM.

Debugging your code for Interactive Service Hub client

When you use a custom JavaScript file or library with the new Interactive Service Hub client (introduced in CRM 2016), instead of loading your custom JavaScript library with the web page, CRM dynamically injects the contents of the custom JavaScript library in a dynamic library in the app. Developers cannot set break points on their custom code because every time the page is reloaded, the custom JavaScript code is injected into one of the dynamic libraries which will prevent the specified break point to be hit.

In this case, you could use any of the following techniques to debug your dynamic JavaScript code. Please be aware that this is not a comprehensive list, but provides some of the ways that can be helpful in debugging your dynamic JavaScript code. All the methods listed below might not work the same across all the browsers supported by CRM, and you must research around to see what suits best as per your requirement.

• Test your JavaScript code using the CRM web client. As the code is not dynamically injected on the CRM web client, it is convenient to locate the script and set break points for easy debugging as explained earlier.
• Set your debugger in the browser developer tool to break/pause even on handled or caught exceptions because CRM catches exception in the custom JavaScript library. For example:
  • On Microsoft Edge, select Break on All Exceptions in the Debugger tab:
    
  • On Google Chrome, select the Pause on Caught Exceptions check box in the Sources tab.
    
• Use try and catch statements in your code to test and execute a block of code and handle the error, if any. In the catch statement, you can output the exception details using the console.log() statement. For example, in the following sample code, ‘adddlert’ is undefined, and the resulting error details (message, description, stack trace) will be displayed in the console: try {
   adddlert("Hello world!");
  }
  catch(err) {
   console.log(err);
  }
  
  
• You can use the Breakpoints in Dynamic JavaScript capability in Google Chrome for debugging dynamic script by providing a name for your dynamic script, so that the script becomes available in the Sources tab allowing you to set break points to easily debug the code.
  
  For this to work, you need to provide the following comment at the end of your script:
  
  //# sourceURL=dynamicScript.js
  
  For example, here is a sample JavaScript code:
  
  function test() {
   console.log("test");
  }
  
  //# sourceURL=dynamicScript.js
  
  This will result in the dynamic file showing up in the Sources tab with the following name: dynamicScript.js.
  
  You’ll need to navigate once to the page to set the break point. The break point is hit even when you hit the refresh command or when you navigate in or out of the page.
  
  NOTE: This method only works with Google Chrome.
  
  
  
• Copy and run your code directly in the Console tab of the browser developer tool to test and make changes to your code as required. You might have to switch to the multi-line mode in the Console tab of your browser dev tools to run your code if it does not support multiple lines of code by default.
  For more information about the multi-line mode in Microsoft Edge, see the The multiline command line section in Console Tool.
  
  
• Add a debugger statement at the beginning of your script and dynamically add break points once the debugger statement is hit. You’ll however need to add the break points every time you load the page (via navigation or refresh command). This works best if you are trying to debug onChange handlers since the debug points persist so long as you are on the page. For more information, see JavaScript debugger Statement.
  
  NOTE: Remember to remove the debugger statement after you have tested and fixed all the issues in your JavaScript code, and are ready to publish your library in CRM.
  
  
  

Debugging your JavaScript code for CRM mobile clients

As with the Interactive Service Hub client, CRM injects your custom JavaScript code into one of the dynamic libraries, so you face the same challenge in debugging your code. However, the instructions to debug code for CRM mobile clients are different than the Interactive Service Hub client. For more information, see Debugging scripts for CRM for tablets.

Browser Developer Tools Reference

Developer Tools in Microsoft Edge

Developer Tools in Microsoft Internet Explorer

Developer Tools in Google Chrome

Developer Tool in Mozilla Firefox

Developer Tools in Apple Safari (Web Inspector)



Microsoft Dynamics CRM SDK Documentation Team




Источник: http://blogs.msdn.com/b/crm/archive/...per-tools.aspx