Starcounter Debug Aid is now Starcounter DevTools

One of the tools that helped you debug Starcounter apps was starcounter-debug-aid. It was embedded inside each Starcounter App and could be opened using CTRL + ` key combination. It is easy to reach, useful and simple.

However, having it embedded meant an extra 1.2MB downloaded whenever you visited a Starcounter app! On slow 3G this added 6.3 seconds to the first meaningful paint time.

Starcounter DevTools

To overcome that, we’ve created a WebExtension that has the same features and a little more! Starcounter DevTools. You download those 1.2MB once as a Browser Extension and use them whenever you need without bloating your Starcounter apps.

You can get it for Chrome and Firefox.

If you’re worried about debugging on Edge and other browsers that are not supported by the addon, don’t worry, you can use this bookmarklet to inject it and run anywhere:

Copy this URI:

javascript:(function(){var script = document.createElement('script');script.src = 'https://rawgit.com/Starcounter/DevTools/master/build/webextension/injected_script.js';document.body.appendChild(script);script.onload=()=>window.dispatchEvent(new CustomEvent('sc-debug-show-overlay'))})()

And paste it as a bookmarklet.

Contributing

If you have any feature suggestions, bug reports, or simply questions to ask. Please feel free to file an issue in the extension’s repo here. PRs are also welcome!

Preview video

Categorised in: Development

This post was written by Omar Alshaker