NOTE: You are viewing documentation for the MoovJS/Adapt version of the Moovweb SDK
View documentation for next-gen Moovweb XDN & PWA framework
Moovweb | Develop Locally: Logging and Debugging
Menu Developer Moovweb University

Develop Locally: Logging and Debugging

The Moovweb Dashboard provides tools that will accelerate your productivity when implementing, modifying, and troubleshooting mobile experiences created with Moovweb.

You can use the Moovweb Dashboard to access and execute Moovweb projects. It also provides direct access to the local server log via the Logging Panel. Replay Mode allows you to replay a previous server response without going back upstream.

Logging Panel

The Logging panel provides a browser-base terminal-like window to access the Local SDK server messages when running Moovweb SDK Local projects. The Logging panel adds features such as syntax highlighting and filtering capabilities. It allows you to quickly see which files from your project are being imported during each request, along with relevant error and log messages.

Logger Panel

Launching the Logging Panel

To launch the Logging Panel you first need to run your Local SDK project in the Moovweb SDK Dashboard, then click on the Logs button. This will open the Logging panel on a separate tab or browser window.

Logger Panel

After that you can launch the local experience either from the Moovweb SDK Dashboard or by opening a new window or tab and accessing the URL directly.

While in the Logging panel, you can filter the different types of messages that are coming from the Local SDK server to find messages faster.

Logger Panel

Developers can also view color-coded differences between request and response headers.

Logger Panel

This way you can see exactly how your upstream and downstream headers are being modified by Moovweb.

Debugger Panel

The Debugger Panel allows you to set breakpoints directly in the JavaScript code of your Local SDK project, examine variables, and inspect the HTML document at any point in the transformation process.

Logger Panel

Installing the Debugger

The Debugger Panel uses the standard node tool node-inspector to inspect and debug transformation code. Before opening the Debugger Panel install node-inspector with the following command:

npm install -g node-inspector

node-inspector only supports Chrome and Opera web browsers.

Refer to the node-inspector README for details and support.

As of October 2015, node-inspector has stability issues on Windows and Linux. Moovweb is working with the node-inspector team to resolve these issues.

Launching the Debugger Panel

To launch the Debugger Panel you first need to to run your Local SDK project in the Moovweb SDK Dashboard, then click on the Debugger button. This will open the Debugger Panel on a separate tab in your browser.

Logger Panel

After that you can launch the local experience either from the Moovweb SDK Dashboard or by opening a new window or tab and accessing the URL directly. Next time your code doesn’t work as expected, just open this panel and pinpoint the problem.

Setting a breakpoint

Use the Moovweb function


in your JavaScript code to set breakpoints in the transformations. Alternatively you can add ?moov_debug=true to the URL to break at the first line of the transformation.

Once you are at a breakpoint in the debugger you can use the debugger UI to step through your code, inspect variables and set additional breakpoints.

Replay Mode

Replay mode was introduced in Moovweb 4.7 as part of the Moovweb chrome-extension called Moovweb Toolkit. Starting in Moovweb 5 you can make use of Replay Mode functionality directly from the Moovweb SDK Dashboard.

Any subsequent request to URL paths in the project will be looked up in the cache map and if its response is found, it will be served from a cached version. Otherwise its response will be captured and and the request key is added to the cache map as visited.

With Replay Mode you can implement and debug mobile experiences faster against workflows that require multiple steps to reproduce. For example, a complex flow like a mobile checkout often requires going through a multi-page, multi-form flow and filling in data in order to cover an end-to-end scenario. When iterating on such flow, instead of filling out the form and going through the entire flow manually every time, you can use Replay Mode!

Enabling Replay Mode

To enable Replay Mode, first run your local SDK project, then use the toggle to turn Replay Mode on.

Logger Panel

Once enabled, the server response of any page that you visit will be stored locally. A cached copy of the response will be served whenever you visit or refresh a given page that was recorded with Reply Mode.

When Replay Mode is enabled, you can use the Logging Panel to see all responses served by Replay Mode.

Logger Panel

Saving Replays

You can save replays once you have gone through a complete multi-page flow (i.e. a checkout flow) with Replay Mode enabled; Replay Mode will keep a copy of the upstream responses for later development and can be shared with other developers from your development team.

To save a replay mode, click the Save button right next to the Replay Mode toggle:

Logger Panel

This will open a dropdown containing information about the first URL that was visited after replay was turned on. There you can also give a name to the save replay file and include notes that are relevant to the replay flow.

The replay name must include the name of the project.

Logger Panel

Checking the Include Project Code check box will include a copy of your local project code in addition to the replay requests. This is useful if you want to include any local changes that you made without necessarily having to commit them to your version control system.

All saved replays are located under the project root folder in a folder named replays. This folder may be committed to a version control system in order to make it accessible to other members of your development team.

Accessing Saved Replays

Once you have saved replays, you can access them using the Saved Replays button:

Logger Panel

This will open the Moovweb SDK Project Replay Dashboard in a different tab:

Logger Panel

There, you can see the name of the replay and all the associated information that was saved with the replay file, including the starting path, additional notes, and whether or not the replay was saved using the current project’s code.

The SDK Project Replay Dashboard

The Moovweb SDK Project Replay Dashboard allows you to manage all the replays associated with a single project. You can examine, execute, import, and remove existing replays.

Examining Replays

You can view all the URLs that were captured in the flow by clicking on the “expand” button.

Logger Panel

Running Replays

Clicking Run triggers a couple of actions: it turns Replay Mode on for the project (if it is not already on), and it also opens the first request URL of the flow in a new tab. Visiting any of the URLs in the flow will then replay the saved requests from that flow.

Logger Panel

Managing Replays

You can access your replay files directly from the Moovweb SDK Project Replay Dashboard and manage them using any Operating System’s file manager. The Moovweb SDK Project Reply Dashboard will get updated automatically when any of these operations are executed.

Logger Panel

Importing Replays

You can import Replays by using the Load a Replay button on the Saved Replays page. This will add the replay to the Moovweb SDK Project Replay Dashboard.

Logger Panel

If you want to load the entire project code with its replays, then you should use the Load Project from Zip button from the Moovweb Local SDK Dashboard and then access the Moovweb SDK Project Replay Dashboard from there.