Proposal: DevTools

(Intended to be created in a separate repository)

Currently

When we try to debug a regular Frint app (involving root and children), we tend to investigate it by logging window.app in the Chrome DevTools console.

Use cases involve:

• Checking existence of Root app
• Listing all providers
• Checking which providers are cascaded
• Finding list of registered Child Apps
• Checking their configuration (multi instance or not for example, and target regions)
• If Child Apps are mounted already in a Region
• Inspecting Apps’ state
• …there can be more

At the moment, to do all of that, developers need to have knowledge of internal APIs of Frint to move forward with debugging.

Proposal

A Developer Tools extension, can be targeted for Chrome only for now, where developers get to see the current situation of Root and Child Apps. The common use cases listed above should be handled by this extension at least.

By default, it can take window.app as a source. But the extension should be configurable by the developer to use any other variable name.

Example for React: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en

Source: https://github.com/facebook/react-devtools

[fahad19]

@yurist38: done. you are admin of this repo now: https://github.com/frintjs/frint-devtools

[fahad19]

I am currently thinking of something like this:

• Top bar: has setting icon, that can lead to a form where developer can assign the root app variable (like window.app)
• Left sidebar: lists all the apps. Root App appears on top, followed by child apps (they can be styled a bit different in list, to give prominence to Root App)
• Main view:
  • Top bar: has two tabs/pills (options and providers)
  • Content area: lists items