Proposal: DevTools
- Dominant language
- JavaScript
- Stars
- 756
- Forks
- 33
- PR merge metrics
- No merged PRs in 30d
Description
(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
Contributor guide
Research direction
Start by reviewing the proposal and the referenced React Developer Tools source, then inspect how a Frint app exposes window.app. Define the Chrome extension scope and configurable app variable before implementation. Done means the extension can inspect root and child apps, providers, configuration, mounted regions, and app state without requiring internal API knowledge.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- devtools
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 20/100