{"id":13464951,"url":"https://github.com/vue-perf-devtool/vue-perf-devtool","last_synced_at":"2025-03-25T13:32:50.248Z","repository":{"id":49649574,"uuid":"120136737","full_name":"vue-perf-devtool/vue-perf-devtool","owner":"vue-perf-devtool","description":"Vue Performance Devtool is a browser extension for inspecting the performance of Vue Components.","archived":false,"fork":false,"pushed_at":"2018-03-03T19:19:37.000Z","size":415,"stargazers_count":542,"open_issues_count":14,"forks_count":13,"subscribers_count":11,"default_branch":"master","last_synced_at":"2024-07-31T14:10:18.252Z","etag":null,"topics":["chrome-extension","devtool","devtools","extension","performance","vue","vue-devtools"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vue-perf-devtool.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-03T22:49:28.000Z","updated_at":"2024-07-03T02:52:35.000Z","dependencies_parsed_at":"2022-09-16T19:51:35.084Z","dependency_job_id":null,"html_url":"https://github.com/vue-perf-devtool/vue-perf-devtool","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-perf-devtool%2Fvue-perf-devtool","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-perf-devtool%2Fvue-perf-devtool/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-perf-devtool%2Fvue-perf-devtool/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-perf-devtool%2Fvue-perf-devtool/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vue-perf-devtool","download_url":"https://codeload.github.com/vue-perf-devtool/vue-perf-devtool/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245471229,"owners_count":20620903,"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-extension","devtool","devtools","extension","performance","vue","vue-devtools"],"created_at":"2024-07-31T14:00:53.375Z","updated_at":"2025-03-25T13:32:49.924Z","avatar_url":"https://github.com/vue-perf-devtool.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","叫研发工具组","Components \u0026 Libraries","Dev Tools [🔝](#readme)","Vue","Dev Tools"],"sub_categories":["检查","Dev Tools","性能","Inspect"],"readme":"# Vue Performance Devtool\n\nVue Performance Devtool is a browser extension for inspecting the performance of Vue Components. It statistically examines the performance of Vue components based on the measures which are collected by Vue using `window.performance` API.\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/vue-perf-devtool/vue-perf-devtool/master/media/logo.png\" alt=\"logo\"\u003e\u003c/p\u003e\n\nInitially started after reading [React Performance Devtool](https://github.com/nitin42/react-perf-devtool#using-the-browser-extension) and created from [Vue Devtool](https://github.com/vuejs/vue-devtools).\n\n## Installation\n\nThe below extensions represent the current stable release.\n\n- [Chrome extension](https://chrome.google.com/webstore/detail/vue-performance-devtool/koljilikekcjfeecjefimopfffhkjbne)\n- [Firefox extension](https://addons.mozilla.org/en-US/firefox/addon/vue-performance-devtool/)\n\n## Implementation\n\nTo use this performance devtool extension, you'll need to allow [vue-devtools inspection](https://vuejs.org/v2/api/#devtools) and [performance](https://vuejs.org/v2/api/#performance)\n\n```js\n// make sure to set this synchronously immediately after loading Vue and before `new Vue`\nVue.config.devtools = true\nVue.config.performance = true\n```\n\n**Note**: if you keep `Vue.config.performance = true` on production, you will also be able to use Vue official devtools in the production build. If you don't want that, you can toggle the config to false by using an environment variable:\n\n```js\nVue.config.performance = process.env.NODE_ENV !== 'production'\n```\n\n## Uses\n\n- Remove or unmount the component instances which are not being used.\n- Inspect what is blocking or taking more time after an operation has been started.\n- Examine which components are taking more time to load.\n\n## Description\n\n\u003cp align=\"center\"\u003e\u003cimg width=\"600px\" src=\"https://raw.githubusercontent.com/vue-perf-devtool/vue-perf-devtool/master/media/background2.png\" alt=\"demo\"\u003e\u003c/p\u003e\n\n- **Init:** Time taken in \"beforeCreated\" and \"created\" of lifecycle.\n- **Render:** Time taken to create the instance in javascript.\n- **Patch:** Time taken to render in dom.\n\n## Development\n\n1. Clone this repo\n2. `npm install`\n3. `npm run dev`\n4. A plain shell with a test app will be available at `localhost:8080`.\n\n## Testing as Firefox addon\n\n 1. Install `web-ext`\n\n\t~~~~\n\t$ npm install --global web-ext\n\t~~~~\n\n\tOr, for Yarn:\n\n\t~~~~\n\t$ yarn global add web-ext\n\t~~~~\n\n\tAlso, make sure `PATH` is set up. Something like this in `~/.bash_profile`:\n\n\t~~~~\n\t$ PATH=$PATH:$(yarn global bin)\n\t~~~~\n\n 2. Build and run in Firefox\n\n\t~~~~\n\t$ npm run build\n\t$ npm run run:firefox\n\t~~~~\n\n\tWhen using Yarn, just replace `npm` with `yarn`.\n\n\n## Acknowledgments\nSpecial thanks to [Evan You](https://github.com/yyx990803) and [vue-devtool contributors](https://github.com/vuejs/vue-devtools/graphs/contributors)\n\n### License\n\n[MIT](http://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvue-perf-devtool%2Fvue-perf-devtool","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvue-perf-devtool%2Fvue-perf-devtool","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvue-perf-devtool%2Fvue-perf-devtool/lists"}