{"id":15015723,"url":"https://github.com/emberjs/ember-inspector","last_synced_at":"2025-05-13T23:05:52.566Z","repository":{"id":6632280,"uuid":"7876204","full_name":"emberjs/ember-inspector","owner":"emberjs","description":" Adds an Ember tab to the browser's Developer Tools that allows you to inspect Ember objects in your application.","archived":false,"fork":false,"pushed_at":"2025-01-28T14:37:17.000Z","size":19799,"stargazers_count":967,"open_issues_count":68,"forks_count":287,"subscribers_count":43,"default_branch":"main","last_synced_at":"2025-04-02T02:08:32.157Z","etag":null,"topics":["chrome","ember","ember-inspector","emberjs","firefox","hacktoberfest","javascript"],"latest_commit_sha":null,"homepage":"","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/emberjs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"emberjs","open_collective":"emberjs"}},"created_at":"2013-01-28T18:36:15.000Z","updated_at":"2025-03-02T18:05:10.000Z","dependencies_parsed_at":"2024-01-09T05:02:46.833Z","dependency_job_id":"3584ebb0-0ad1-4e73-852f-3af9dbe18db8","html_url":"https://github.com/emberjs/ember-inspector","commit_stats":{"total_commits":1928,"total_committers":143,"mean_commits":"13.482517482517483","dds":0.7354771784232366,"last_synced_commit":"6408d3579c6146ea0bb81696958a8fd764e0d6a8"},"previous_names":[],"tags_count":110,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emberjs%2Fember-inspector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emberjs%2Fember-inspector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emberjs%2Fember-inspector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emberjs%2Fember-inspector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/emberjs","download_url":"https://codeload.github.com/emberjs/ember-inspector/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247738764,"owners_count":20987903,"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":["chrome","ember","ember-inspector","emberjs","firefox","hacktoberfest","javascript"],"created_at":"2024-09-24T19:47:50.532Z","updated_at":"2025-04-09T03:09:00.252Z","avatar_url":"https://github.com/emberjs.png","language":"JavaScript","readme":"# Ember Inspector [![Build Status](https://github.com/emberjs/ember-inspector/workflows/Build%20and%20Publish/badge.svg?branch=main)](https://github.com/emberjs/ember-inspector/actions?query=branch%3Amain+workflow%3A%22Build+and+Publish%22)\n\nAdds an Ember tab to the browser's Developer Tools that allows you to inspect\nEmber objects in your application.\n\n## Installation\n\n### Chrome\n\nInstall the extension from the [Chrome Web Store](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi).\n\nOR:\n\n- Clone the repository\n- cd into the repo directory\n- run `pnpm add -g ember-cli`\n- run `pnpm install`\n- run `pnpm build` to build the `dist` directory\n- Visit `chrome://extensions` in Chrome\n- Make sure `Developer mode` is checked\n- Click on 'Load unpacked extension...'\n- Choose the `dist/chrome` folder in the cloned repo\n- Close and re-open developer tools if it's already open\n\n### Firefox\n\nInstall the [Firefox addon](https://addons.mozilla.org/en-US/firefox/addon/ember-inspector/).\n\nOR:\n\n- Clone the repository\n- cd into the repo directory\n- run `pnpm add -g ember-cli`\n- run `pnpm install`\n- run `pnpm build` to build the `dist` directory\n- Visit `about:debugging#/runtime/this-firefox` in Firefox\n- Click on 'Load Temporary Add-on…'\n- Choose the `dist/firefox/manifest.json` file in the cloned repo\n\n### Opera\n\n- Clone the repository\n- cd into the repo directory\n- run `pnpm add -g ember-cli`\n- run `pnpm install`\n- run `pnpm build` to build the `dist` directory\n- Visit `chrome://extensions` in Opera\n- Make sure `Developer mode` is checked\n- Click on 'Load unpacked extension...'\n- Choose the `dist/chrome` folder in the cloned repo\n- Close and re-open developer tools if it's already open\n\n### Bookmarklet (All Browsers)\n\n```javascript\njavascript: (function() { var s = document.createElement('script'); s.src = '//ember-extension.s3.amazonaws.com/dist_bookmarklet/load_inspector.js'; document.body.appendChild(s); }());\n```\n\nInternet explorer will open an iframe instead of a popup due to the lack of support for cross-origin messaging.\n\nFor development:\n\n- run `pnpm serve:bookmarklet`\n- create a bookmark (make sure you unblock the popup when you run the bookmarklet):\n\n```javascript\njavascript: (function() { var s = document.createElement('script'); s.src = 'http://localhost:9191/bookmarklet/load_inspector.js'; document.body.appendChild(s); }());\n```\n\n## Building and Testing:\n\nRun `pnpm install \u0026\u0026 pnpm add -g ember-cli` to install the required modules.\n\n- `pnpm build` to build the files in the `dist` directory\n- `pnpm watch` To watch the files and re-build in `dist` when anything changes (useful during development).\n- `pnpm test` To run the tests in the terminal\n- `pnpm start` To start the test server at `localhost:4200/testing/tests`\n\n\n## Deploy new version:\n\nSee [RELEASE.md](./RELEASE.md)\n\n\n### Locking a version\n\nWe can take a snapshot of the current inspector version to support a specific Ember version range. This allows us to stop supporting old Ember versions in main without breaking the published inspector for old Ember apps. It works by serving a different inspector version based on the current app's Ember version.\n\nThe Ember versions supported by the current inspector are indicated in the `emberVersionsSupported` array in `package.json`.\n\nHere are the steps to lock an inspector version:\n\n- Release a new version (See \"Minor and major versions\") if there are unreleased commits in `main`. Skip this step if there are not new commits after the last release.\n- Makes sure you have a `config/secrets.json` file with the correct AWS credentials to push to S3. You can use `config/secrets.json.sample` as a starting point.\n- Create a new branch (from `main`) named after the Ember version range that will be supported by this branch. The min version in the range is the first element in the `emberVersionsSupported` array in `package.json`. The max version in the range is the first version that will *not* be supported. For example, a branch named `ember-0.0.0-2.7.0` means it supports Ember 0.0.0 -\u003e 2.6.0, and a branch named `ember-2.7.0-3.4.0` means it supports Ember 2.7.0 -\u003e Ember 3.3.2.\n- Update `package.json`'s `emberVersionsSupported`: add a second element that indicates the minimum Ember version the `main` branch *will not* support.\n- Commit the branch.\n- Run `pnpm lock-version`. This will build, and compress the panes.\n- To upload the panes to GitHub:\n  - Create a folder locally with the naming convention `panes-x-x-x`\n  - Copy the 3 zip files (chrome.zip, firefox.zip, and bookmarklet.zip) into the folder you just created.\n  - Go to https://github.com/emberjs/ember-inspector/upload/panes and drag the folder in to upload it.\n- Checkout the `main` branch.\n- Update `package.json`'s `previousEmberVersionsSupported`: add the first Ember version supported by the recently locked snapshot (the first element in the `emberVersionsSupported` array).\n- Update `package.json`'s `emberVersionsSupported`: Take the last element from `previousEmberVersionsSupported` and set it as the first element in this array. Set an empty string as the second element to indicate there's currently no maximum Ember version supported yet. `emberVersionsSupported` array length should always be `2` indicating a [min, max] range.\n- Commit.\n\n##### Example scenario\n\nBelow is an example scenario that assumes the current `main` branch supports Ember version 2.7.0+ and we want to lock the version such that `main` will support 3.4.0+. It also assumes the last Ember Inspector version released was 3.9.0.\n\n- Release a new inspector version `3.10.0` if there are unreleased commits in `main`.\n- Create a new branch from `main` called `ember-2.7.0-3.4.0`.\n- Update `package.json`'s `emberVersionsSupported` from `[\"2.7.0\", \"\"]` to `[\"2.7.0\", \"3.4.0\"]`.\n- Commit with message \"Lock Ember version at 2.7.0-3.4.0\" and push the branch.\n- Run `pnpm lock-version`.\n- Checkout the `main` branch.\n- Create a new branch *from main* called `lock-3.4.0` (branch name here is not important).\n- Update `package.json`'s `previousEmberVersionsSupported` from `[\"0.0.0\"]` to `[\"0.0.0\", \"2.7.0\"]`.\n- Update `package.json`'s `emberVersionsSupported` from `[\"2.7.0\", \"\"]` to `[\"3.4.0\", \"\"]`.\n- Commit and open a PR against `main`.\n\n### Window Messages\n\nThe Ember Inspector uses window messages, so if you are using window messages in your application code, make sure you [verify the sender](https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage#Security_concerns) and add checks to your event listener so as not to conflict with the inspector's messages.\n","funding_links":["https://github.com/sponsors/emberjs","https://opencollective.com/emberjs"],"categories":["Tools","Packages"],"sub_categories":["Development","Tools"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femberjs%2Fember-inspector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Femberjs%2Fember-inspector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femberjs%2Fember-inspector/lists"}