Giter Site home page Giter Site logo

ibare / backbone-debugger Goto Github PK

View Code? Open in Web Editor NEW

This project forked from maluen/backbone-debugger

0.0 0.0 0.0 1.28 MB

Chrome Developer Tools extension for debugging Backbone.js applications

License: Mozilla Public License 2.0

CSS 0.75% HTML 3.66% JavaScript 95.59%

backbone-debugger's Introduction

Backbone Debugger

Chrome Developer Tools extension for debugging Backbone.js applications.

Features

  • Adds a panel under the Chrome Developer Tools that displays in real-time all your application views, models, collections and routers. Data displayed includes:
    • Views: rendering status, html element, associated model and/or collection, handled page events, events triggered
    • Models: last sync status, attributes, id, cid, url, associated collection, events triggered, sync actions
    • Collections: last sync status, models, url, events triggered, sync actions
    • Routers: events triggered (include routes)
  • Extends the sidebar of the developer tools "Elements" panel to display the Backbone View of the inspected html element.

Install from source

Using Google Chrome:

  • Download the project archive and extract it somewhere.
  • Click on Tools -> Settings -> Extensions.
  • Select "Enable developer mode" in the upper right of the window.
  • Click on "Load unpacked extension".
  • Select the extracted folder.
  • Restart the browser.
  • Enjoy!

Install from Chrome Web Store

Follow this method if you want the latest stable release, it will also update automatically.

  • Go to the extension page and follow the instructions. Leave a review if you can!
  • Restart the browser.

Backbone detection

If you get the message "Waiting for Backbone" indefinitely, then Backbone can't be found, currently the only supported automatic detection is via window.Backbone or via AMD with window.define.

To send the Backbone object to the debugger manually, use the following code just after requiring it in the main file, before creating any application component, like views or models:

var Backbone = require('backbone'); // example: backbone is imported
// Add this!
if (window.__backboneAgent) {
  window.__backboneAgent.handleBackbone(Backbone);
}

In case this isn't enough, please open an issue.

Known Limitations

Support for apps that modify the standard Backbone behavior, e.g. apps that patch core methods like extend or delegateEvents, or that replace part of Backbone functions with custom code, is uncertain. However, constant efforts are taken in this direction to address the most possible use cases, so even if your application falls into this category you may still give it a try, open an issue or wait for newer versions.

Contribute

Want to contribute? You can report bugs, suggest features, write code and write documentation!

Looking for other ways? You can also support this project via Flattr or Gittip

Screenshots

Views:

Views

Models:

Models

Collections:

Collections

Routers:

Routers

Elements sidebar extension:

Elements sidebar extension

backbone-debugger's People

Contributors

amuino avatar fosterdill avatar htulipe avatar jbreeden avatar maluen avatar michaelcarter avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.