{"id":13465173,"url":"https://github.com/vuetwo/vuetron","last_synced_at":"2025-04-04T07:06:58.285Z","repository":{"id":143927217,"uuid":"108889416","full_name":"vuetwo/vuetron","owner":"vuetwo","description":"A tool for testing and debugging your Vue + Vuex applications. 是一個可以幫助您 Vue.js 的項目測試及偵錯的工具, 也同時支持 Vuex及 Vue-Router.","archived":false,"fork":false,"pushed_at":"2021-01-11T17:08:13.000Z","size":34672,"stargazers_count":570,"open_issues_count":6,"forks_count":21,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-28T06:08:15.810Z","etag":null,"topics":["debugger","debugging-tool","desktop","electron","testing","testing-tools","visualization","vue","vue-router","vue2","vuejs","vuex"],"latest_commit_sha":null,"homepage":"http://vuetron.io","language":"Vue","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/vuetwo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"docs/CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","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}},"created_at":"2017-10-30T18:09:03.000Z","updated_at":"2025-03-08T02:36:32.000Z","dependencies_parsed_at":null,"dependency_job_id":"0e1f65ba-a2b3-48a6-9238-f90153ea26d6","html_url":"https://github.com/vuetwo/vuetron","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuetwo%2Fvuetron","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuetwo%2Fvuetron/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuetwo%2Fvuetron/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuetwo%2Fvuetron/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vuetwo","download_url":"https://codeload.github.com/vuetwo/vuetron/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247135144,"owners_count":20889421,"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":["debugger","debugging-tool","desktop","electron","testing","testing-tools","visualization","vue","vue-router","vue2","vuejs","vuex"],"created_at":"2024-07-31T14:01:02.545Z","updated_at":"2025-04-04T07:06:58.263Z","avatar_url":"https://github.com/vuetwo.png","language":"Vue","funding_links":[],"categories":["Vue"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n\u003cimg align=\"center\" src=\"./docs/images/vuetron-logo-sm.png\"\u003e\n\u003cbr\u003e\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003eA tool for testing and debugging \u003ca href=\"https://vuejs.org/\" target=\"_blank\"\u003eVue.js\u003c/a\u003e applications.\u003ca href=\"https://github.com/vuetwo/vuetron\"\u003e\u003cimg src=\"https://img.shields.io/github/stars/vuetwo/vuetron.svg?style=social\u0026label=Stars\" /\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e是一個可以幫助您 Vue.js 的項目測試及偵錯的工具, 也同時支持 Vuex及 Vue-Router.\u003c/p\u003e\n\n\u003ch4 align=\"center\"\u003e\u003ca href=\"https://google.com\"\u003e\u003cimg src=\"https://img.shields.io/github/release/vuetwo/vuetron/all.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://travis-ci.org/vuetwo/vuetron\"\u003e\u003cimg src=\"https://img.shields.io/travis/vuetwo/vuetron.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/vuetron\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/vuetron.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://codeclimate.com/github/vuetwo/vuetron/maintainability\"\u003e\u003cimg src=\"https://api.codeclimate.com/v1/badges/6170d4ec90fa5cec78ae/maintainability\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://standardjs.com/\"\u003e\u003cimg src=\"https://img.shields.io/badge/code%20style-semistandard-brightgreen.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/talls-and-smalls/vuetron/blob/master/LICENSE.txt\"\u003e\u003cimg src=\"https://img.shields.io/github/license/vuetwo/vuetron.svg\"\u003e\u003c/a\u003e\n\u003c/h4\u003e\n\n## Why Vuetron? 我們為什麼用 [Vuetron](./docs/CHINESETRANSLATION.md)?\n\nWe really like the current Vue dev tools for chrome and wanted a way to extend that functionality by hooking onto the vue application itself, so we built Vuetron! Like the Developer Tools, you’re still able to view emitted events, view application state, and time travel debug. With Vuetron you have the added the ability to subscribe to specific state variables, observe API requests and responses, and visualize the component structure of your application giving you a larger toolkit for testing and debugging your Vue.js application.\n\n## Getting Started\n\nTo use Vuetron, you will need both the desktop application and node module in your Vue project.  You can find the app download and installation instructions [here](./docs/INSTALLATION.md).\n\n## Key Features\n\n#### Eventstream with Time Travel Debugging:\n* Instantly time travel between previous application states, or revert a whole group of state changes at once.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg align=\"center\" src=\"./docs/images/eventstream.gif\" alt=\"time travel example\" width=\"600\" /\u003e\n\u003c/div\u003e\n\n* See 5 types of events\n  * Connected to Server: Vuetron has successfully connected to the socket server.\n  * State Initialized: If using Vuex, this event is displayed when the initial state is received\n    * This will reinitialize if your application is refreshed, but you will not lose previous state changes\n  * State Change: If using Vuex, this event is displayed for each mutation call\n    * The expanded card displays each state change that occurred\n  * Event Emitted: This event is displayed for every $emit call\n    * The expanded card displays the name of the $emit\n  * API Request / Response: If using the fetch API for requests, this event is displayed for any request sent\n    * The expanded card displays the request data as well as the response data\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg align=\"center\" src=\"./docs/images/eventstream-items.png\" alt=\"event items example\" width=\"400\" /\u003e\n\u003c/div\u003e\n\n#### State Subscriptions:\n* Subscribe to specific parts of your application's state for faster debugging\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg align=\"center\" src=\"./docs/images/subscription.gif\" alt=\"subscriptions example\" width=\"700\" /\u003e\n\u003c/div\u003e\n\n#### Component Tree:\n* Visualizing your component hierarchy has never been easier.\n  * Animation allows you to collapse or expand the tree for specific hierarchy views.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg align=\"center\" src=\"./docs/images/visualization.gif\" alt=\"component tree example\" width=\"100%\" /\u003e\n\u003c/div\u003e\n\n#### Collapsable Vuex State Object:\n* View and interact with an object representation of your application's most current state.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg align=\"center\" src=\"./docs/images/state-example.png\" alt=\"state example\" width=\"400\" /\u003e\n\u003c/div\u003e\n\n#### Other benefits:\n* Cross platform\n  - Windows, Mac, and Linux ready.\n  \n## Try it out\n\nIf you want to test out Vuetron before you commit to installing it in your project, you can fork or clone our [example app](https://github.com/vuetwo/vuetron-example-app) with the plugins pre-configured. (Vuetron app download required separately)\n\n## Testing\n\nRead the [TESTING.md](./docs/TESTING.md) file for more information on running tests.\n\n## Built With\n\n* [Vue.js](https://vuejs.org/) - The web framework used\n* [Vuex](https://vuex.vuejs.org/en/intro.html) - State Management\n* [Vue-Router](https://router.vuejs.org/en/) - Routing\n* [Electron](https://electron.atom.io/) - Used to build desktop app\n* [Socket.io](https://socket.io/) - Used communicate between Vuetron and client's application\n\n## Contributing\n\nFound a bug? Have a suggestion? Feel free to submit issues!\n\nPlease read [CONTRIBUTING.md](./docs/CONTRIBUTING.md) for details on our code of conduct and the process for submitting pull requests if you're interesting in contributing to this project!\n\n## Authors\n\n* **Samantha Barli (Salley)** - [https://github.com/sbarli](https://github.com/sbarli)\n\n* **Louis Rouaze** - [https://github.com/louisrouaze](https://github.com/louisrouaze)\n\n* **Kelly Gilliam** - [https://github.com/KellyGilliam](https://github.com/KellyGilliam)\n\n* **Brandon Danh** - [https://github.com/brandondanh](https://github.com/brandondanh)\n\nSee also the list of [contributors](./docs/CONTRIBUTORS.md) who participated in this project.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.txt](LICENSE.txt) file for details\n\n## Acknowledgments\n\n* [vued3tree library](https://github.com/David-Desmaisons/Vue.D3.tree)\n* [vue-object-view library](https://github.com/ebuzek/vue-object-view)\n* Support from other open source developers\n* And the entire Vue developer community\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvuetwo%2Fvuetron","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvuetwo%2Fvuetron","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvuetwo%2Fvuetron/lists"}