Debugging client-side human services in the web Inspector

If errors occur while the client-side human service is running, you can debug the client-side human service by using the Inspector in the Process Designer. The debugging feature of the Inspector enables you to examine how the client-side human service operates in each step of its execution.

About this task

Using the Inspector, you can incrementally step through the activities in your client-side human service so that you can observe how the client-side human service behaves as it runs. The Inspector pauses the execution of the service before running each step and displays the variable values at each point.

If your client-side human service does not behave as you expected, you can use the debugging capability to identify which step is at fault. The error message is displayed in the playback window and on the sidebar in the Inspector.

Important: Because the playback window opens as a pop-up window, you might receive an error message if your web browser is configured to block pop-ups. Before proceeding with the debugging session, configure your browser to allow pop-ups from the host that your Workflow Center is installed on.
You can perform the following actions from the sidebar in the Inspector to debug the client-side human service:
Table 1. Actions in the Inspector
Icon Action Description
Step over Step over Move the service execution to the next activity in the flow
Step into Step into Stop the service execution on a breakpoint before a coach is run and debug the coach
Show window Show window Bring forward or reopen the playback window
Refresh Refresh Refresh the content of the service with the latest updates
Terminate Terminate Cancel the current debugging session before the client-side human service reaches the end
To debug a client-side human service:

Procedure

  1. Open the client-side human service that you want to debug.
  2. Click Debug Debug in the upper-right corner.
    The Inspector opens in the browser window, pausing on the first step after the Start event.
  3. Examine the variable values to determine whether they are expected. When you are ready to move on to the next activity in the client-side human service, click Step Over Step Over.
  4. If this activity is a coach, the playback window shows the rendering of the coach. Complete the coach and trigger the boundary event to transition out of the coach. The Inspector moves to the next step in the flow.
    As the execution progresses, the followed path is highlighted and color-coded indicators are added to the client-side human service diagram to mark the progress in the execution.
  5. If errors occur while running the coach, use the Step into action to debug the coach:
    1. Ensure that the playback window is open. Click Show window Show window to open it if it is not already open.
    2. Open the debugging window or the developer tools that are associated with the playback window. For information about how to open and use the browser debugger or developer tools, consult the documentation for your browser.
    3. Click Step into Step into to pause the execution flow before the coach is run. Use your browser debugger or developer tools to set breakpoints in the source code for the coach.
    4. Go step by step through the code to observe how it behaves and identify any errors.
    When the coach completes successfully, the execution moves to the next step in the flow.
  6. Repeat steps 3 to 5 until you complete the client-side human service. Alternatively, you can click Terminate Terminate to cancel the debugging session before the client-side human service reaches the end.
  7. When you are ready to return to the Designer perspective, click Designer in the upper-left corner of the browser window.