Code Monkey home page Code Monkey logo

sidecardevtools's Introduction

Sidecar Debugger Tool

Copyright 2015 SugarCRM

This is an Google Chrome devtools extension that will help you to be more productive when developing on Sugar 7.x. Based on the backbone devtools project by Tomasz Szczęśniak-Szlagowski.

Installing

  1. Clone this repo
  2. Go to Tools -> Extensions in Google Chrome
  3. Check Developer mode and click Load unpacked extension
  4. Go to the cloned repo directory and choose the 'src' folder.

Using

  1. Once in your SugarCRM instance, open Chrome devtools.
  2. Click on the new tab called SugarDebug.
  3. Check the checkbox "Start Sidecar Debug Mode" in the "Settings tab".
  4. Enjoy!

Developing the Sidecar Dev Tool

Requirement:

You need to have installed: node.js, handlebars and sass

Steps:

  1. Once the extension is installed, navigate to the repo folder (SidecarDevTools) via terminal.
  2. Run 'npm install'
  3. Run 'grunt' to watch templates and scss files and automatically compile them.

Contributing:

See CONTRIBUTING for how you can contribute changes back into this project.

Features

  • $view console variable after inspecting a DOM Element (it points to the closest parent Sidecar Component).
  • In SugarDebug Panel, you will find different several tabs:
    • Application Stream: A timeline of what is happening in the app. It shows the methods that are called and the events that are triggered. For each of them, you have access to the passed arguments and the component object.
    • Structure: A hierarchical tree representing the Sugar components of the current page.
    • Render times: Allows you to measure the render duration of the different fields.
    • Generate records: An easy way to generate records in your SugarCRM instance.

Notes

This extension is based on the backbone-devtools extension.

sidecardevtools's People

Contributors

alias-mac avatar arc-drodriguez avatar ezhdan-sugarcrm avatar jgirault avatar khigakisugar avatar lev-bdekoning avatar mmarum-sugarcrm avatar utalan avatar yvan33 avatar

Watchers

 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.