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.
The logging panel improves Moovweb console messages by adding syntax highlighting and filtering capabilities.
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.
This way you can see exactly how your upstream and downstream headers are being modified by Moovweb.
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.
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.
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.
This feature should dramatically improve your development productivity.
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.
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.
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.
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.
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.