frintjs / frintjs/frint

Proposal: DevTools

Open
#374 7 comments 0 reactions 0 assignees View on GitHub
feature help wanted proposal
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.