single-spa-inspector
The single-spa-inspector is a Firefox/Chrome devtools extension to provide utilities for helping with single-spa applications. Github project.
Requires >= single-spa@4.1.
#
Installation linksNote: you can also build and run this locally. See how to contribute.
#
Features- List all registered applications (mounted at top)
- Show all application statuses (statii)
- Force mount and unmount an application
- Show app overlays (see configuring app overlays to enable this feature)
- Provides an interface for adding import-map overrides
#
Configuring app overlaysApp overlays allow you to hover over a mounted app's name and have an "inspect element" type experience which shows where the app is in the DOM. This is especially useful for when multiple apps are mounted at the same time (e.g. in some places Canopy has upwards of 4 apps mounted on a single page/URL!).
To add app overlays, find the file where you export your lifecycle functions (e.g. bootstrap
, mount
, unmount
) and add another exported object with the following shape:
#
import-map-overridesIf your environment uses import-maps, single-spa Inspector provides an interface for adding import-map overrides when utilizing the import-map-overrides library. Once the installation requirements for import-map-overrides are completed, you can add, remove, and refresh the page with your overrides.