The Inspector complements the console, elements, and sources tab as a trusty companion as you build out your Marionette Apps.
You can use the Inspector to see what's going on under the hood with your ui, data, messages, and network.
Of course, there's also a helpful 🔍 as well.
The inspector should work out of the box with most setups.
If you're using webpack you have to expose the modules Backbone and Marionette to the global context (so they are available in window):
- Install expose loader for webpack
npm install expose-loader- Change your
requirecalls to
require('expose?Backbone!backbone');and
require('expose?Marionette!marionette');If you're not setting Backbone and Marionette on the window or using define, you'll need to start the inspector manually.
Add this line before your Marionette Application is instantiated.
__agent.start(Backbone, Marionette);Etsy - The Inspector has largely been built as an open-source project at Etsy.
Backbone-Debugger - The Inspector is built on top of the Backbone Debugger core, written in large part by @Maluen.