Skip to main content

Motivation

Aside was born out of frustration with the current state of developer tooling in the Javascript ecosystem. For years, the status quo has been that library developers need to build dedicated browser extensions for each library to provide tools for debugging, inspecting state and tracking user actions. This has worked fine, a lot of very good extensions have been created this way: React developer tools, Preact developer tools, Redux devTools, Reactotron, vConsole, Vue.js devtools, Apollo Client Devtools, and many more.

As your application grows in complexity, so does the number of libraries you use. With each application needing its own developer tools, you end up with multiple extensions that reimplement the same features with their own UI components. Often, those tools will start lacking behind others because library developers different priorities and not the same velocity. As you replace dependencies in your application or refactor parts of your application, a piece of state might move from a context to a Redux store or into an atom or signal, causing it to move to a completely different tab.

Unifying extensions​

The first goal of Aside is to unify multiple developer tools into a single extension. This removes the burden for library developers to have to think about the Chrome Webstore, the publishing process and some of the quirks around extension development. It aims at lowering the barrier for developers to extend their devtools.

Unifying the UI​

Aside aims to provide a developer experience that feels native to the Chrome browser. Aside's components replicates the look and feel of the Chrome devtools components and each integration built on top of aside will remain consistent with the rest of the tools developers are familiar with. This also makes it easier for developers to extend their tools since it provides ready to use UI components.

note

In the current alpha release, the components available are still minimal, but we will strive to provide components to be able to replicate any of the existing Chrome interface in future releases.

Focus on extensibility​

Aside was build with an extensible-first mindset. The interface of the extension is 100% powered by what your application renders. This allows you to customize fully your developer experience with what your app needs.

  • If you prefer to combine all your application state from multiple sources into a single tab, you can.
  • If you prefer having dedicated tabs based on your business logic, you can.
  • If you have first party libraries that you want to integrate into your developer tools, you can.

Aside is built to make it easier to leverage Chrome extension APIs that are normally not available to webpages (ie the network API, the storage API, etc).

Combine functionality​

Another flaw of having multiple dedicated devtools is that it's impossible to combine functionality from multiple tools. For example, you might want to see how a user action happened in your application, triggered a network request, updated a piece of state in your Redux store and updated the Apollo cache.

With Aside, you can build interfaces that leverage multiple data sources, helping you debug timing issues between different parts of your application.

A good example of this is Aside's activity feature, which reproduces the Chrome network tab, but allows you to compose various data sources and events into one table and provide search, filtering and sorting capabilities.

Shared improvements​

With integrations like Aside's activity feature, developers can get improvements to their developer tools across all of their libraries with minimal effort.

Leverage React​

Building an all purpose browser extension is not something new in the React ecosystem. Tools like Reactotron, vConsole and Redux devtools have attempted this before with imperative APIs allowing to extend and customize its behaviour.

The new concept that Aside brings is that it gives the web application full control over the experience and the full power of React to scaffold the user interface.

In the future, Aside could also expand beyond React and provide bindings for other Javascript frameworks like Vue with minimal effort thanks to @remote-ui/vue.