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.
- Download it from the Chrome Web Store
- Clone this repo
- Go to Tools -> Extensions in Google Chrome
- Check Developer mode and click Load unpacked extension
- Go to the cloned repo directory and choose the 'src' folder.
- When you make changes to the code, you just need to close the devtools on you Sugar instance, refresh the 'Extensions' page in Chrome and reopen the Sidecar devtools.
- Once in your SugarCRM instance, click on the
Sidecar Developer Toolicon. - Open Chrome Developer Tools and select the new tab called
SugarDebug. - Enjoy!
You need to have installed: node.js, handlebars and sass
- Once the extension is installed, navigate to the repo folder (SidecarDevTools) via terminal.
- Run 'npm install'
- Run 'grunt' to watch templates and scss files and automatically compile them.
See CONTRIBUTING for how you can contribute changes back into this project.
- $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.
- Perf reports: A table showing the rendered components on the current page, with the average render times.
- Generate records: An easy way to generate records in your SugarCRM instance.
This extension is based on the backbone-devtools extension.