Tips for debugging coach view lifecycle method inside client-side human services

To debug your coach views inside a client-side human service, you need to use the debugging features of your browser along with the debugging features of the Inspector view in web Process Designer.

  1. Open the client-side human service that contains the coach that uses the coach views you want to debug.
  2. Click Debug Debug in the upper-right corner. The Inspector opens, pausing on the first step of the client-side human service after the Start event.
  3. When the client-side human service playback window launches, follow the browser-specific tips to add breakpoints and debug the lifecycle method for your coach views.

Internet Explorer 11

  1. Open the Developer tools from the tool bar or by pressing F12 and go to the Debugger tool.
  2. In the Inspector, click Step Over Step Over to move to the coach that you want to test, then click Step Into Step Into begin debugging the coach.
  3. The Internet Explorer Debugger tool stops at a debugger statement at the beginning of the coach initialization. You can see the generated page for the coach.
  4. Locate the coach view lifecycle method code and set breakpoints as required.
  5. Continue normal JavaScript debugging in the Internet Explorer Debugger tool.

Internet Explorer 9 (deprecated) and 10 (deprecated)

  1. Open the Developer tools from the tool bar or by pressing F12 and go to the Script tool.
  2. Click Start debugging.
    Note: Internet Explorer will refresh the window which might generate an error in the client-side human service that reads "SCRIPT5022:This deferred has already been resolved." You can ignore this error. To resume debugging, click Debug again in the Inspector.
  3. In the Inspector, click Step Over Step Over to move to the coach that you want to test, then click Step Into Step Into begin debugging the coach.
  4. The Internet Explorer Debugger tool stops at a debugger statement at the beginning of the coach initialization. You can see the generated page for the coach.
  5. Locate the coach view lifecycle method code and set breakpoints as required.
  6. Continue normal JavaScript debugging in the Internet Explorer Debugger tool.

Google Chrome

  1. Open the Google Chrome Developer tools.
  2. In the Inspector, click Step Over Step Over to move to the coach that you want to test, then click Step Into Step Into begin debugging the coach.
  3. The Google Chrome Debugger tool stops at a debugger statement at the beginning of the coach initialization. You can see the generated page for the coach.
    Note: You might encounter an issue where Chrome Debugger does not display the generated page for the first coach in a client-side human service. If this occurs, click Resume script execution in the Sources tab, wait until the coach is loaded, then close and re-open the browser debugger. Next, click Debug again in the Inspector to restart the debugging process. If the browser debugger is closed, re-open it. This causes the Chrome debugger to refresh and properly display the generated page for the first coach.
  4. Locate the coach view lifecycle method code and set breakpoints as required.
  5. Continue normal JavaScript debugging in the Chrome Debugger tool.

Mozilla Firefox

  1. Open the Firefox Debugger.
  2. In the Inspector, click Step Over Step Over to move to the coach that you want to test, then click Step Into Step Into begin debugging the coach.
  3. The Firefox Debugger tool stops at a debugger statement at the beginning of the coach initialization. You can see the generated page for the coach.
    Note: You might encounter an issue where Firefox Debugger does not display the generated page for your coach. If this occurs, click Click to resume in the Firefox Debugger tab, then right-click on the playback window and select This Frame > Reload Frame to reload the coach iFrame.
  4. Locate the coach view lifecycle method code and set breakpoints as required.
  5. Continue normal JavaScript debugging in the Firefox Debugger tool.