{"id":18317228,"url":"https://github.com/single-spa/single-spa-inspector","last_synced_at":"2025-04-09T06:13:36.118Z","repository":{"id":40293881,"uuid":"167593309","full_name":"single-spa/single-spa-inspector","owner":"single-spa","description":"A devtools extension for single-spa applications","archived":false,"fork":false,"pushed_at":"2025-02-22T03:03:14.000Z","size":2260,"stargazers_count":76,"open_issues_count":6,"forks_count":18,"subscribers_count":8,"default_branch":"main","last_synced_at":"2025-04-02T05:07:50.435Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://single-spa.js.org","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/single-spa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["joeldenning"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2019-01-25T18:23:01.000Z","updated_at":"2025-03-26T08:04:54.000Z","dependencies_parsed_at":"2023-11-23T01:40:18.872Z","dependency_job_id":"3ba3a761-aa44-4073-8c1f-ecce7158e69a","html_url":"https://github.com/single-spa/single-spa-inspector","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/single-spa%2Fsingle-spa-inspector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/single-spa%2Fsingle-spa-inspector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/single-spa%2Fsingle-spa-inspector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/single-spa%2Fsingle-spa-inspector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/single-spa","download_url":"https://codeload.github.com/single-spa/single-spa-inspector/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247987285,"owners_count":21028895,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-05T18:05:27.147Z","updated_at":"2025-04-09T06:13:36.078Z","avatar_url":"https://github.com/single-spa.png","language":"JavaScript","funding_links":["https://github.com/sponsors/joeldenning"],"categories":[],"sub_categories":[],"readme":"# single-spa Devtools Inspector\n\nA Firefox/Chrome devtools extension to provide utilities for helping with [single-spa](https://single-spa.js.org) applications.\n\n[Full Documentation](https://single-spa.js.org/docs/devtools)\n\n## Feature requests\n\nIf you would like to request a feature to be added, please open an issue with the title \"Enhancement:\"\n\n---\n\n## How to contribute\n\nTo fix a bug, add features, or just build the extension locally:\n\n### Firefox\n\n1. Install Firefox\n1. [Create a FF profile](#create-a-firefox-dev-profile) called `single-spa-inspector-dev`. Alternatively, temporarily install the extension as documented in https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension#installing.\n1. Clone this repo\n1. `nvm use` (ensures we're all using the same version of node)\n1. `npm i`\n1. `npm start`\n1. Open devtools and navigate to the **single-spa Inspector** tab\n\n#### Create a Firefox dev profile\n\nCurrently, development happens by default in Firefox. If you would like Firefox to remember any settings that you change to Firefox itself, this project is configured to use a profile called \"single-spa-inspector-dev\". To create this profile, go to [about:profiles](about:profiles). Firefox will use that profile and remember any changes you make (e.g. devtools location, devtools dark mode, etc.)\n\n#### Debugging\n\nOnce single-spa Inspector is running, open a new tab and navigate to [about:debugging](about:debugging). single-spa Inspector should be listed as a Temporary Extension, and a \"Debug\" control should be displayed. Click on this to enable devtools for the extension. In the upper-right corner, click on the divided square icon next to the 3-dot menu, and select `/build/panel.html` as the target. You can now inspect the inspector UI as you would a normal webpage.\n\n### Chrome\n\n1. Install Chrome\n1. Create a Chrome profile\n\n   - This process is somewhat convoluted but needed in order to save preferences and any additional extensions\n   - Before starting any processes, open the Chrome Profiles directory\n     - Mac: `~/Library/Application Support/Google/Chrome`\n     - Windows: `%LOCALAPPDATA%\\Google\\Chrome\\User Data`\n     - See the [Chromium User Data Directory docs](https://chromium.googlesource.com/chromium/src/+/master/docs/user_data_dir.md) for other platforms/chrome builds\n   - In that folder, take note of the Profile folders (eg. named \"Profile 1\", \"Profile 2\", etc. on Mac)\n   - Open Chrome and [add a new profile](https://support.google.com/chrome/answer/2364824)\n   - Return to the Chrome user data folder and locate the newly created Profile folder\n   - Rename the folder to \"single-spa-inspector-dev\" (for convenience)\n   - Copy the file path for this profile folder\n\n1. Start Chrome with `$CHROME_PROFILE_PATH` env set to the profile folder path\n\n   ```sh\n   # for Mac\n   CHROME_PROFILE_PATH=\"~/Library/Application Support/Google/Chrome/single-spa-inspector-dev\" npm run start:chrome\n   ```\n\n#### Debugging\n\n- Open single-spa inspector in devtools\n- Right-click on any element inside of the inspector, and click \"Inspect\"\n- A new instance of devtools will appear to inspect the devtools DOM\n\n---\n\n### Publishing a New Version\n\n1. Update the version in `manifest.json` and `package.json` (they should match)\n1. Ensure that the necessary Firefox env values are in your local .env\n\n   ```\n   WEXT_SHIPIT_FIREFOX_JWT_ISSUER=xxxxx\n   WEXT_SHIPIT_FIREFOX_JWT_SECRET=xxxxx\n   ```\n\n1. Ensure that the necessary Chrome env values are in your local .env\n\n   ```sh\n   WEXT_SHIPIT_CHROME_EXTENSION_ID=xxxxx\n   WEXT_SHIPIT_CHROME_CLIENT_ID=xxxxx\n   WEXT_SHIPIT_CHROME_CLIENT_SECRET=xxxxx\n   WEXT_SHIPIT_CHROME_REFRESH_TOKEN=xxxxx\n   ```\n\n1. Run `npm run deploy`\n\n- Alternatively, to deploy individual browsers you can run `npm run deploy:firefox` or `npm run deploy:chrome`\n\nYou may also want to verify the status at the respective extensions page\n\n- [Firefox Add-on Developer Hub](https://addons.mozilla.org/en-US/developers/)\n- [Chrome Store Developer Dashboard](https://chrome.google.com/webstore/developer/dashboard)\n\n---\n\n## Thanks\n\n- Built with [web-ext](https://github.com/mozilla/web-ext) which makes for a better dev experience\n- Uses [webextension-polyfill](https://github.com/mozilla/webextension-polyfill) to make cross-platform dev easier\n- [React Devtools](https://github.com/facebook/react-devtools) for showing how to do some of these things\n- And [CanopyTax](https://www.canopytax.com) for indirectly funding this :)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsingle-spa%2Fsingle-spa-inspector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsingle-spa%2Fsingle-spa-inspector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsingle-spa%2Fsingle-spa-inspector/lists"}