Fast and Comfy dev console

In case you need to have some components to debugging your app or even some extra functionality, you can write your own dev console. But you don't want to hard code development functionality into an app when it’s not production-related. This repo is an example of dev console written in Vue.js.

Architecture is based on events, which are distributed through event-bus. This approach is great to split your application and console because on production you won't render dev console components.

The event bus is a mechanism to transfer events between app and dev console. Basically, it’s plain Vue singleton object where we can use $on for subscription and $emit for publishing functionality.

App flow:

• user fills in the input value
• after the value is submitted, the method addInstance is invoked
• this method processes value and emits new message into event-bus
• there are 2 listeners registered on event-bus
• each of them is processed instance (e.g. adds to history or shows button)

In the production environment, you just don't render dev console components and everything works without disabling putting messages into event-bus

You can find an example of implementation here.