Moovweb Toolkit

The Moovweb Toolkit is a Google Chrome browser extension that will accelerate your productivity as a front-end developer.

With the Toolkit, you get fully-featured logging and debugging tools for the Moovweb platform right in your browser.

Download Moovweb Toolkit

Outline


Logging Panel

The logging panel improves Moovweb console messages by adding syntax highlighting and filtering capabilities.

Moovweb Toolkit Logger

This allows you to quickly see what files are being imported, relevant error messages, and generally useful log messages.

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

Moovweb Toolkit Headers

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 in your Tritium code, examine variables, and inspect the HTML document at any point in the transformation process.

Moovweb Toolkit Debugger

Next time your code doesn’t work as expected, just open this tab and pinpoint the problem.

Hit the “Current Doc” button to see exactly where your document is in the transformation.

Live Reload

The Live Reload feature enables your changes to happen instantly in the browser as soon as you save the files you’re working on.

You can enable Live Reload for both CSS and Tritium by right-clicking in the browser and selecting the options under the Moovweb Toolkit menu.

Moovweb Toolkit enable reload button

This feature should dramatically improve your development productivity.

Selector Info

The Selector Info setting will allow you to see how elements are being transformed by your Tritium. This can be very useful for debugging purposes.

You can enable Selector Info by right-clicking in the browser and selecting the option under the Moovweb Toolkit menu.

Moovweb Toolkit selector info

In this example, the <body> is selected and in the “Tritium Transformations” panel you can see which selectors are transforming the <body> and exactly where they are in your project folder.

In the “Zero-Match Selectors” panel, you can see which selectors are not finding any matches in the current HTML document.

Moovweb Toolkit zero match

Replay Mode

Replay Mode allows you to replay a previous response without going back upstream.

For example, if you submit a form and you just want to see the exact same HTML response but you don’t want to have to fill out the form again or go through the flow to get there, you can use Replay Mode!

To enable Replay Mode, simply right-click and select the option under the Moovweb Toolkit menu.

Moovweb Toolkit enable replay button

Once you have enabled that, any new link you visit (or any time you refresh the current page), a cached copy of the response will be delivered (if available). In the logger, you will see a message telling you a previous response is being used.

Moovweb Toolkit playing previous response

If you want to clear the current cache (for example, you want to update a cart), you can hit the “Clear Replay Session” button to clear the cache. Any requests will then be made to the site before being cached again until you disable Replay Mode.

Moovweb Toolkit clear replay button