🔍 Marionette Inspector - Explore your App
JavaScript PostScript CSS HTML Ruby
Latest commit ca907f5 Aug 29, 2016 1 @jasonLaster jasonLaster committed on GitHub ownership message

README.md

Marionette Inspector

Not Maintained

The inspector is no longer being maintained. I would be happy to mentor somebody who would like to take on the responsibility. Feel free to reach out to me at jasonlaster11@gmail.com if you're inteested.

Functionality

The inspector makes it possible to understand how your App works, without needing to understand how all the code works. This is possible because everything's one click away. You'll be amazed at how quickly this changes everything.

  • Visualize the view hierarchy with the UI tree
  • Visualize application activity with a full history of actions
  • Inspect view ui, events, listeners, properties
  • Inspect model attributes, listeners, properties
  • Explore Radio channel events, requests, commands
  • Explore application with an inspector magnifying glass
  • Jump between the inspector elements and source panel with intelligent links

Try it out on a live app!

Once you've installed the Chrome extension, open the DevTools, click on the "Marionette" tab, and inspect this app!

Marionette Wires


Getting Started

Download it

The inspector should work out of the box with most setups. You can download it from the Chrome Web Store.

Caveats

If you're either using Browserify or Webpack or not exposing Backbone & Marionette as globals, you'll need to add one block to your setup.

if (window.__agent) {
  window.__agent.start(Backbone, Marionette);
}

Note this line should be placed after all underscore, backbone, and marionette REQUIRES, but before Application or View classes are defined.

Frequently Asked Questions

If you have any additional questions, check out our FAQ.

Usage Analytics

The Inspector gathers usage analytics to better report on inspector statistics such as average weekly users and popular features as well as to report on marionette patterns such as library versions in usage and architectural / api patterns. If you would prefer to disable analytics it is easy to do so:

if (window.__agent) {
  window.__agent.disableAnalytics = true;
}

Try it out on a live app!

Once you've installed the Chrome extension, open the DevTools, click on the "Marionette" tab, and inspect this app!

Marionette Wires


Play with it locally

Follows these these steps in the Install Guide and you should be up and running in no time. Read the agent overview to understand how the inspector gathers all the information.

TLDR version

1. Download the Extension

git clone git@github.com:marionettejs/marionette.inspector.git

2. Build the Extension

npm i
npm run bower
grunt build

3. Install in Chrome

1. go to the Extensions tab in chrome > Window
2. check the "Developer Mode" checkbox
3. click the "Load unpacked extension" and select the extension folder in the repo

Open Source (a.k.a. you)

The inspector is built with 100% open source love. That means, we absolutely want your help and your passion. If you want to get involved, stop by and say hello here. We've got tons of help wanted tickets and would be be happy to setup a 30 minute screenhero pairing session to help you get started. Many of our contributions, even some of the best ones like the Activity pane, came from first time contributors.


Special Thanks

Etsy - The Inspector was largely 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.


Screens

UI


Data


Radio


Activity