Sidecar Debugger Tools now in Beta!

Matthew Marum —  October 12, 2015

Sugar Engineering is proud to announce the Beta release of the open source Sidecar Debugger Tools project!

Sidecar Debugger Tools

This project was developed as part of the recent Partner hack week where it was a crowd favorite.  Not only is this a great developer tool for debugging and building Sugar Sidecar components, it is also useful as a learning tool for understanding the components on each page and how views, fields, and layouts work together.

It is a Chrome Developer Tools extension that adds a SugarDebug tab into your Developer Tools panel.  And it’s loaded with features that will help you build Sidecar components faster and make debugging issues easier!

It’s easy to install!  Just follow the steps on the project README.

Features

Application Stream

Capturing specific interesting events within the Application Stream

Capturing specific interesting events within the 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.  This is great for debugging interactions between Sidecar components.

Structure

Hover over component in structure to highlight it on the page

Hover over component in structure to highlight it on the page

A hierarchical tree representing the Sugar components of the current page.  A great way to get a visual summary of the relationships between different Sidecar Layouts, Views, and Fields.

Render times

Capturing average render times of Lead module's fields

Capturing average render times of Lead module’s fields

Allows you to measure the render duration of the different fields.  Render performance is key to a snappy Sugar user interface.

Generate records

Generating records into Account's module

Generating records into Account’s module

An easy way to generate records in your Sugar instance for testing purposes.  Super convenient when working with a fresh Sugar database.

Developer Tooltips

Dev tooltip for a dropdown in the Account module's record view

Dev tooltip for a dropdown in the Account module’s record view

You don’t need to be restricted to working with the SugarDebug tab open when you enable the developer tooltips.  Access to loads of detailed field information is always at your fingertips!

Seeking More Collaborators

This project is open sourced under the Apache 2.0 License.  We are also actively seeking contributions from the Sugar Developer community!  The great thing about these tools is they’re all written in JavaScript/HTML using Backbone.js, Handlebars, and jQuery.  Sounds familiar, right?  Any Sugar Developer should have no problems customizing these tools.

We welcome new Pull Requests that meet the project’s contributing guidelines.  We are also tracking all bugs and feature requests using the built-in Github project issue tracker.

Fork this project today!

Matthew Marum

Posts

Matt is the Director of Developer Advocacy for SugarCRM. Previously he was an Engineer on Sugar 7 and a Solutions Architect for the OEM program. He is also an avid trail runner, Boston Marathon qualifier and a karaoke aficionado.