{"id":15102619,"url":"https://github.com/microsoft/webperftoolbar","last_synced_at":"2025-09-27T00:31:26.506Z","repository":{"id":65976439,"uuid":"114065089","full_name":"microsoft/webperftoolbar","owner":"microsoft","description":"A drop-in toolbar to help visualize a website's performance.","archived":true,"fork":false,"pushed_at":"2018-10-14T13:18:40.000Z","size":224,"stargazers_count":20,"open_issues_count":9,"forks_count":9,"subscribers_count":5,"default_branch":"develop","last_synced_at":"2024-09-21T07:31:25.582Z","etag":null,"topics":["developer-tools","web-performance"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/microsoft.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-12-13T02:46:10.000Z","updated_at":"2023-11-16T18:20:36.000Z","dependencies_parsed_at":"2023-02-19T18:35:23.072Z","dependency_job_id":null,"html_url":"https://github.com/microsoft/webperftoolbar","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoft%2Fwebperftoolbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoft%2Fwebperftoolbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoft%2Fwebperftoolbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoft%2Fwebperftoolbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/microsoft","download_url":"https://codeload.github.com/microsoft/webperftoolbar/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219871828,"owners_count":16554457,"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":["developer-tools","web-performance"],"created_at":"2024-09-25T19:03:18.271Z","updated_at":"2025-09-27T00:31:26.114Z","avatar_url":"https://github.com/microsoft.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Web Perf Toolbar\nA component to visualize client performance on your site for the current page.\n\nShipped as a single JavaScript file with no runtime dependencies, this toolbar drops into your existing sites with a single script tag and barely any configuration. Designed to be injected into a page so developers or stakeholders can evaluate the performance of the page as they use it.\n\n## Getting Started\n\n1. You'll need Node and NPM.\n2. [Visual Studio Code](https://code.visualstudio.com/) is the recommended editor. We [have configured](./.vscode/extensions.json) recommended extensions for working with this project.\n3. Install the npm dev dependencies. `npm install`\n4. Run the demo: `npm run demo`\n\n## Road Map\n\nNote: This project follows semver and is pre-release. Until a 1.0 release, the public API may change. See \"Releasing\" below.\n\n### Alpha\n- [x] General toolbar structure (Toolbar, PanelFrame, Panel, Button)\n- [x] Expose Navigation timings\n  - Shows key points in the page load.\n- [x] Expose Resource timings\n  - Shows how big files loaded are, including bytes over wire and time to first byte.\n- [ ] Expose User timings (expected version: 0.2.0-alpha)\n  - List all marks (name, start time, duration of 0) sorted by start time ascending.\n  - List all measures (name, start time, duration between two marks) sorted by start time ascending.\n- [ ] Continuous integration\n\nShipping all of these moves from -alpha to -beta.\n\n### Beta\n- [ ] Add a way for panels/buttons to update their contents periodically.\n- [ ] Expose Custom Metrics with Goals (expected version: 0.3.0-beta)\n  - This is a specific renderer for measures that takes in a configuration object. The object defines names of custom goals, a warning goal value, a target goal value, and a getter that resolves the value to be compared against the goal. If the warning goal value is less than the target goal value, it is assumed the value should be less than the target. If the warning value is higher than the target value, it is assumed the value should be greater than the target. For example, if the warning is 80 and the target is 100, we assume smaller numbers are better. This allows people deploying the toolbar to configure a very custom panel without writing a full panel.\n- [ ] Automation that detects changes in the public API to prevent regressions.\n\nShipping all of these exits beta and bumps the major version to 1.0.0.\n\n### Beyond 1.0\nWe welcome contributions. See \"Contributing\" below. Think you have a great idea for a panel? Open an issue to discuss it. Built one already? Send a PR.\n\nThat said, here are some goals for this project:\n- We ship a single JavaScript file.\n  - It must be painless for developers to integrate the toolbar. A mess of CSS, JS, or server side configuration gets messy. Keep it simple.\n- We are a client performance toolbar.\n  - We don't collect or visualize server-side metrics that are exposed somehow though you could use the Custom Metrics pane to get at your server metrics, but that lives in the user's config and not in this repository.\n- We focus on the currently loaded page.\n  - We don't try to persist and visualize info about previous loads.\n- We aren't a generic dev tools toolbar.\n  - Don't build a cookie editor panel, do build a panel that shows the size of cookies and local storage.\n\n## Dev Commands (`npm run ...`)\n\n### Main Commands\n- `demo` Builds then launches a page with a demo of the toolbar.\n- `build` Kicks off a Webpack production build.\n- `test` Builds then launches a test runner in IE and Chrome that watches for changes.\n- `check` Compiles, lints, and tests everything. **This command must be run and the output must be clean before checking in.**\n\n### Source Commands\n- `tslint` Run tslint on the toolbar sources.\n- `tsc` Compile the toolbar TypeScript sources directly (no Webpack).\n- `tsc-verbose` Same as above, but verbose compiler.\n\n### Test commands\n- `test-once` Builds then launches a single test run.\n- `test-tslint` Runs tslint on the test sources.\n- `test-tsc` Compiles the test TypeScript sources directly (no Webpack/Karma).\n- `test-tsc-verbose` Same as above, but verbose compiler.\n## Maintainers\n- @AdamTReineke (Admin, primary contact)\n- @JoshuaKGoldberg (Admin)\n- Dadstart (Admin)\n\n## Releasing\nThis project follows the [semver](https://semver.org/) versioning convention of major.minor.patch.\n\n- Changing the [public API](./src/toolbar.ts) will bump the **major** version.\n- Adding a whole new panel, changing/removing a panel configuration, or adding significant panel features will bump the **minor** version.\n- Bug fixes or minor tweak to a panel, including adding new optional panel configurations, will bump the **patch** version.\n\n0. Figure out what the new version number will be.\n0. If leaving `0.1.0-alpha`, update the Security notice below and remove this line.\n1. From `develop` branch, create a new branch for the release: `git checkout -b release-vxx.xx.xx`\n2. `npm run check` should be clean.\n3. Verify the [demo](./index.html) was updated to show any new panels.\n4. `npm run demo` should show the different panels in the toolbar.\n5. Bump the version in [package.json](./package.json).\n6. Update the road map in this file to address completed work.\n7. Make then merge a pull request from the new branch to `master`.\n8. Tag with the new version number. `git tag vxx.xx.xx; git push --tags`\n9. Push to NPM. *TODO: What are the steps?*\n\nThere is not a regular release schedule.\n\n## Reporting Security Issues\n\n**DURING ALPHA ONLY**: Open a new issue so we can address the issue before leaving alpha. Once this project leaves alpha, the default Microsoft Security message below should be unstruck and followed.\n\n~~Security issues and bugs should be reported privately, via email, to the Microsoft Security\nResponse Center (MSRC) at [secure@microsoft.com](mailto:secure@microsoft.com). You should\nreceive a response within 24 hours. If for some reason you do not, please follow up via\nemail to ensure we received your original message. Further information, including the\n[MSRC PGP](https://technet.microsoft.com/en-us/security/dn606155) key, can be found in\nthe [Security TechCenter](https://technet.microsoft.com/en-us/security/default).~~\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicrosoft%2Fwebperftoolbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmicrosoft%2Fwebperftoolbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicrosoft%2Fwebperftoolbar/lists"}