Repository: vuejs/devtools-v6 Branch: main Commit: dd2ab5d42751 Files: 404 Total size: 910.8 KB Directory structure: gitextract_85f6hf0f/ ├── .browserslistrc ├── .circleci/ │ └── config.yml ├── .github/ │ ├── FUNDING.yml │ ├── ISSUE_TEMPLATE/ │ │ ├── bug_report.yml │ │ ├── config.yml │ │ └── feature_request.yml │ ├── PULL_REQUEST_TEMPLATE.md │ ├── commit-convention.md │ └── workflows/ │ └── create-release.yml ├── .gitignore ├── .vscode/ │ └── settings.json ├── LICENSE ├── README.md ├── babel.config.js ├── cypress/ │ ├── .eslintrc.js │ ├── .gitignore │ ├── fixtures/ │ │ └── example.json │ ├── integration/ │ │ ├── component-data-edit.js │ │ ├── components-tab.js │ │ ├── events-tab.js │ │ ├── vuex-edit.js │ │ └── vuex-tab.js │ ├── plugins/ │ │ └── index.js │ ├── support/ │ │ ├── commands.js │ │ └── index.js │ └── utils/ │ └── suite.js ├── cypress.json ├── eslint.config.js ├── extension-zips.js ├── lerna.json ├── package.json ├── packages/ │ ├── api/ │ │ ├── package.json │ │ ├── src/ │ │ │ ├── api/ │ │ │ │ ├── api.ts │ │ │ │ ├── app.ts │ │ │ │ ├── component.ts │ │ │ │ ├── context.ts │ │ │ │ ├── hooks.ts │ │ │ │ ├── index.ts │ │ │ │ └── util.ts │ │ │ ├── const.ts │ │ │ ├── env.ts │ │ │ ├── index.ts │ │ │ ├── plugin.ts │ │ │ ├── proxy.ts │ │ │ └── time.ts │ │ └── tsconfig.json │ ├── app-backend-api/ │ │ ├── package.json │ │ ├── src/ │ │ │ ├── api.ts │ │ │ ├── app-record.ts │ │ │ ├── backend-context.ts │ │ │ ├── backend.ts │ │ │ ├── global-hook.ts │ │ │ ├── hooks.ts │ │ │ ├── index.ts │ │ │ └── plugin.ts │ │ └── tsconfig.json │ ├── app-backend-core/ │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app.ts │ │ │ ├── backend.ts │ │ │ ├── component-pick.ts │ │ │ ├── component.ts │ │ │ ├── flash.ts │ │ │ ├── global-hook.ts │ │ │ ├── highlighter.ts │ │ │ ├── hook.ts │ │ │ ├── index.ts │ │ │ ├── inspector.ts │ │ │ ├── legacy/ │ │ │ │ └── scan.ts │ │ │ ├── page-config.ts │ │ │ ├── perf.ts │ │ │ ├── plugin.ts │ │ │ ├── timeline-builtins.ts │ │ │ ├── timeline-marker.ts │ │ │ ├── timeline-screenshot.ts │ │ │ ├── timeline.ts │ │ │ ├── toast.ts │ │ │ └── util/ │ │ │ ├── queue.ts │ │ │ └── subscriptions.ts │ │ └── tsconfig.json │ ├── app-backend-vue1/ │ │ ├── package.json │ │ ├── src/ │ │ │ └── index.ts │ │ └── tsconfig.json │ ├── app-backend-vue2/ │ │ ├── package.json │ │ ├── src/ │ │ │ ├── components/ │ │ │ │ ├── data.ts │ │ │ │ ├── el.ts │ │ │ │ ├── perf.ts │ │ │ │ ├── tree.ts │ │ │ │ ├── update-tracking.ts │ │ │ │ └── util.ts │ │ │ ├── events.ts │ │ │ ├── index.ts │ │ │ └── plugin.ts │ │ └── tsconfig.json │ ├── app-backend-vue3/ │ │ ├── package.json │ │ ├── src/ │ │ │ ├── components/ │ │ │ │ ├── data.ts │ │ │ │ ├── el.ts │ │ │ │ ├── filter.ts │ │ │ │ ├── tree.ts │ │ │ │ └── util.ts │ │ │ ├── index.ts │ │ │ └── util.ts │ │ └── tsconfig.json │ ├── app-frontend/ │ │ ├── package.json │ │ └── src/ │ │ ├── app.ts │ │ ├── assets/ │ │ │ ├── github-theme/ │ │ │ │ ├── dark.json │ │ │ │ └── light.json │ │ │ └── style/ │ │ │ ├── imports.styl │ │ │ ├── index.postcss │ │ │ ├── index.styl │ │ │ ├── transitions.styl │ │ │ └── variables.styl │ │ ├── features/ │ │ │ ├── App.vue │ │ │ ├── apps/ │ │ │ │ ├── AppSelect.vue │ │ │ │ ├── AppSelectItem.vue │ │ │ │ ├── AppSelectPane.vue │ │ │ │ ├── AppSelectPaneItem.vue │ │ │ │ ├── index.ts │ │ │ │ └── vue-version-check.ts │ │ │ ├── bridge/ │ │ │ │ └── index.ts │ │ │ ├── chrome/ │ │ │ │ ├── index.ts │ │ │ │ └── pane-visibility.ts │ │ │ ├── code/ │ │ │ │ └── CodeEditor.vue │ │ │ ├── components/ │ │ │ │ ├── ComponentTreeNode.vue │ │ │ │ ├── ComponentsInspector.vue │ │ │ │ ├── RenderCode.vue │ │ │ │ ├── SelectedComponentPane.vue │ │ │ │ └── composable/ │ │ │ │ ├── components.ts │ │ │ │ ├── highlight.ts │ │ │ │ ├── index.ts │ │ │ │ ├── pick.ts │ │ │ │ └── setup.ts │ │ │ ├── connection/ │ │ │ │ ├── AppConnecting.vue │ │ │ │ ├── AppDisconnected.vue │ │ │ │ └── index.ts │ │ │ ├── error/ │ │ │ │ ├── ErrorOverlay.vue │ │ │ │ └── index.ts │ │ │ ├── header/ │ │ │ │ ├── AppHeader.vue │ │ │ │ ├── AppHeaderSelect.vue │ │ │ │ ├── AppHistoryNav.vue │ │ │ │ ├── header.ts │ │ │ │ └── tabs.ts │ │ │ ├── inspector/ │ │ │ │ ├── DataField.vue │ │ │ │ ├── StateFields.vue │ │ │ │ ├── StateInspector.vue │ │ │ │ ├── StateType.vue │ │ │ │ └── custom/ │ │ │ │ ├── CustomInspector.vue │ │ │ │ ├── CustomInspectorNode.vue │ │ │ │ ├── CustomInspectorSelectedNodePane.vue │ │ │ │ └── composable.ts │ │ │ ├── layout/ │ │ │ │ ├── EmptyPane.vue │ │ │ │ ├── SplitPane.vue │ │ │ │ └── orientation.ts │ │ │ ├── plugin/ │ │ │ │ ├── PluginDetails.vue │ │ │ │ ├── PluginHome.vue │ │ │ │ ├── PluginListItem.vue │ │ │ │ ├── PluginPermission.vue │ │ │ │ ├── PluginSettings.vue │ │ │ │ ├── PluginSettingsItem.vue │ │ │ │ ├── PluginSourceDescription.vue │ │ │ │ ├── PluginSourceIcon.vue │ │ │ │ ├── Plugins.vue │ │ │ │ └── index.ts │ │ │ ├── settings/ │ │ │ │ ├── GlobalSettings.vue │ │ │ │ └── NewTag.vue │ │ │ ├── timeline/ │ │ │ │ ├── AskScreenshotPermission.vue │ │ │ │ ├── LayerItem.vue │ │ │ │ ├── Timeline.vue │ │ │ │ ├── TimelineEventInspector.vue │ │ │ │ ├── TimelineEventList.vue │ │ │ │ ├── TimelineEventListItem.vue │ │ │ │ ├── TimelineScrollbar.vue │ │ │ │ ├── TimelineView.vue │ │ │ │ └── composable/ │ │ │ │ ├── events.ts │ │ │ │ ├── index.ts │ │ │ │ ├── layers.ts │ │ │ │ ├── markers.ts │ │ │ │ ├── reset.ts │ │ │ │ ├── screenshot.ts │ │ │ │ ├── setup.ts │ │ │ │ ├── store.ts │ │ │ │ └── time.ts │ │ │ ├── ui/ │ │ │ │ ├── components/ │ │ │ │ │ ├── VueButton.vue │ │ │ │ │ ├── VueDisable.vue │ │ │ │ │ ├── VueDropdown.vue │ │ │ │ │ ├── VueDropdownButton.vue │ │ │ │ │ ├── VueFormField.vue │ │ │ │ │ ├── VueGroup.vue │ │ │ │ │ ├── VueGroupButton.vue │ │ │ │ │ ├── VueIcon.vue │ │ │ │ │ ├── VueInput.vue │ │ │ │ │ ├── VueLoadingBar.vue │ │ │ │ │ ├── VueLoadingIndicator.vue │ │ │ │ │ ├── VueModal.vue │ │ │ │ │ ├── VueSelect.vue │ │ │ │ │ ├── VueSelectButton.vue │ │ │ │ │ ├── VueSwitch.vue │ │ │ │ │ └── icons.ts │ │ │ │ ├── composables/ │ │ │ │ │ ├── useDisableScroll.ts │ │ │ │ │ └── useDisabled.ts │ │ │ │ └── index.ts │ │ │ └── welcome/ │ │ │ └── WelcomeSlideshow.vue │ │ ├── index.ts │ │ ├── locales/ │ │ │ └── en.js │ │ ├── mixins/ │ │ │ ├── data-field-edit.js │ │ │ ├── entry-list.ts │ │ │ └── keyboard.ts │ │ ├── plugins/ │ │ │ ├── global-refs.ts │ │ │ ├── i18n.ts │ │ │ ├── index.ts │ │ │ └── responsive.ts │ │ ├── router.ts │ │ ├── shims-global.d.ts │ │ ├── shims-vue.d.ts │ │ ├── types/ │ │ │ └── vue.d.ts │ │ └── util/ │ │ ├── color.ts │ │ ├── defer.ts │ │ ├── fonts.ts │ │ ├── format/ │ │ │ ├── index.ts │ │ │ ├── time.ts │ │ │ └── value.ts │ │ ├── keyboard.ts │ │ ├── queue.ts │ │ ├── reactivity.ts │ │ ├── shared-data.ts │ │ ├── theme.ts │ │ └── time.ts │ ├── build-tools/ │ │ ├── package.json │ │ └── src/ │ │ ├── createConfig.js │ │ └── index.js │ ├── docs/ │ │ ├── package.json │ │ ├── postcss.config.js │ │ ├── src/ │ │ │ ├── .vitepress/ │ │ │ │ ├── .gitignore │ │ │ │ ├── config.js │ │ │ │ └── theme/ │ │ │ │ ├── custom.css │ │ │ │ └── index.js │ │ │ ├── assets/ │ │ │ │ └── vue-devtools-architecture.drawio │ │ │ ├── components/ │ │ │ │ ├── InstallButton.vue │ │ │ │ └── InstallButtons.vue │ │ │ ├── devtools-vue3.md │ │ │ ├── guide/ │ │ │ │ ├── contributing.md │ │ │ │ ├── custom-vue2-app-scan-selector.md │ │ │ │ ├── devtools-perf.md │ │ │ │ ├── faq.md │ │ │ │ ├── installation.md │ │ │ │ └── open-in-editor.md │ │ │ ├── index.md │ │ │ ├── plugin/ │ │ │ │ ├── api-reference.md │ │ │ │ └── plugins-guide.md │ │ │ └── release.md │ │ └── tailwind.config.cjs │ ├── shared-utils/ │ │ ├── package.json │ │ ├── src/ │ │ │ ├── backend.ts │ │ │ ├── bridge.ts │ │ │ ├── consts.ts │ │ │ ├── edit.ts │ │ │ ├── env.ts │ │ │ ├── index.ts │ │ │ ├── plugin-permissions.ts │ │ │ ├── plugin-settings.ts │ │ │ ├── raf.ts │ │ │ ├── shared-data.ts │ │ │ ├── shell.ts │ │ │ ├── storage.ts │ │ │ ├── throttle.ts │ │ │ ├── transfer.ts │ │ │ └── util.ts │ │ └── tsconfig.json │ ├── shell-chrome/ │ │ ├── devtools-background.html │ │ ├── devtools.html │ │ ├── manifest.json │ │ ├── package.json │ │ ├── popups/ │ │ │ ├── disabled.html │ │ │ ├── disabled.nuxt.html │ │ │ ├── enabled.html │ │ │ ├── enabled.nuxt.html │ │ │ ├── not-found.html │ │ │ └── popup.css │ │ ├── src/ │ │ │ ├── backend.js │ │ │ ├── detector-exec.js │ │ │ ├── detector.js │ │ │ ├── devtools-background.js │ │ │ ├── devtools.js │ │ │ ├── hook-exec.js │ │ │ ├── hook.js │ │ │ ├── proxy.js │ │ │ └── service-worker.js │ │ └── webpack.config.js │ ├── shell-dev-vue2/ │ │ ├── package.json │ │ ├── public/ │ │ │ ├── target-electron.html │ │ │ ├── target-iframe.html │ │ │ └── target.html │ │ ├── src/ │ │ │ ├── Child.vue │ │ │ ├── Counter.vue │ │ │ ├── EventChild.vue │ │ │ ├── EventChild1.vue │ │ │ ├── EventChildCond.vue │ │ │ ├── Events.vue │ │ │ ├── Functional.vue │ │ │ ├── Hidden.vue │ │ │ ├── Init.vue │ │ │ ├── MyClass.js │ │ │ ├── NativeTypes.vue │ │ │ ├── NoProp.vue │ │ │ ├── Other.vue │ │ │ ├── RefTester.vue │ │ │ ├── Target.vue │ │ │ ├── TransitionExample.vue │ │ │ ├── VuexObject.vue │ │ │ ├── dynamic-module.js │ │ │ ├── iframe-app.js │ │ │ ├── index.js │ │ │ ├── router/ │ │ │ │ ├── ChildRoute.vue │ │ │ │ ├── NamedRoute.vue │ │ │ │ ├── ParentRoute.vue │ │ │ │ ├── RouteOne.vue │ │ │ │ ├── RouteTwo.vue │ │ │ │ ├── RouteWithAlias.vue │ │ │ │ ├── RouteWithBeforeEnter.vue │ │ │ │ ├── RouteWithParams.vue │ │ │ │ ├── RouteWithProps.vue │ │ │ │ ├── RouteWithQuery.vue │ │ │ │ └── Router.vue │ │ │ ├── router.js │ │ │ └── store.js │ │ └── webpack.config.js │ ├── shell-dev-vue3/ │ │ ├── package.json │ │ ├── public/ │ │ │ ├── target-iframe.html │ │ │ └── target.html │ │ ├── src/ │ │ │ ├── Animation.vue │ │ │ ├── App.vue │ │ │ ├── App3.vue │ │ │ ├── AsyncComponent.vue │ │ │ ├── AsyncSetup.vue │ │ │ ├── Child.vue │ │ │ ├── Condition.vue │ │ │ ├── DomOrder.vue │ │ │ ├── EventEmit.vue │ │ │ ├── EventNesting.vue │ │ │ ├── Form.vue │ │ │ ├── FormSection.vue │ │ │ ├── Functional.vue │ │ │ ├── Ghost.vue │ │ │ ├── Heavy.vue │ │ │ ├── Hello.vue │ │ │ ├── IframeApp.vue │ │ │ ├── IndexComponent/ │ │ │ │ └── index.vue │ │ │ ├── Mixins.vue │ │ │ ├── NativeTypes.vue │ │ │ ├── Nested.vue │ │ │ ├── NestedMore.vue │ │ │ ├── Other.vue │ │ │ ├── Provide.vue │ │ │ ├── SetupDataLike.vue │ │ │ ├── SetupRender.js │ │ │ ├── SetupScript.vue │ │ │ ├── SetupTSScriptProps.vue │ │ │ ├── SuspenseExample.vue │ │ │ ├── VModelExample.vue │ │ │ ├── devtools-plugin/ │ │ │ │ ├── index.js │ │ │ │ └── simple.js │ │ │ ├── iframe-app.js │ │ │ ├── main.js │ │ │ ├── router/ │ │ │ │ ├── Page1.vue │ │ │ │ └── Page2.vue │ │ │ └── store.js │ │ └── webpack.config.js │ ├── shell-electron/ │ │ ├── README.md │ │ ├── app.html │ │ ├── app.js │ │ ├── bin.js │ │ ├── index.js │ │ ├── package.json │ │ ├── server.js │ │ ├── src/ │ │ │ ├── backend.js │ │ │ ├── devtools.js │ │ │ └── hook.js │ │ ├── types/ │ │ │ └── index.d.ts │ │ ├── webpack.config.js │ │ └── webpack.node.config.js │ ├── shell-firefox/ │ │ ├── .gitignore │ │ ├── copy.sh │ │ ├── manifest.json │ │ ├── package.json │ │ ├── src/ │ │ │ ├── backend.js │ │ │ ├── background.js │ │ │ ├── detector.js │ │ │ ├── devtools-background.js │ │ │ ├── devtools.js │ │ │ ├── hook.js │ │ │ └── proxy.js │ │ └── webpack.config.js │ └── shell-host/ │ ├── package.json │ ├── public/ │ │ └── index.html │ ├── src/ │ │ ├── DevIframe.vue │ │ ├── backend.js │ │ ├── devtools.js │ │ └── hook.js │ └── webpack.config.js ├── postcss.config.js ├── release.js ├── sign-firefox.js ├── tailwind.config.js ├── tsconfig.json └── vue1-test.html ================================================ FILE CONTENTS ================================================ ================================================ FILE: .browserslistrc ================================================ Chrome >= 52 Firefox >= 48 ================================================ FILE: .circleci/config.yml ================================================ version: 2 jobs: build: docker: # specify the version you desire here - image: node:current - image: vuejs/ci resource_class: medium+ working_directory: ~/repo steps: - checkout # Download and cache dependencies - restore_cache: keys: - v3-dependencies-{{ checksum "yarn.lock" }} # fallback to using the latest cache if no exact match is found - v3-dependencies- - run: yarn install --pure-lockfile - save_cache: paths: - node_modules - ~/.cache/yarn - ~/.cache/Cypress key: v3-dependencies-{{ checksum "yarn.lock" }} # run tests! - run: yarn build && yarn test - store_artifacts: path: cypress/videos - store_artifacts: path: cypress/screenshots ================================================ FILE: .github/FUNDING.yml ================================================ github: Akryum ================================================ FILE: .github/ISSUE_TEMPLATE/bug_report.yml ================================================ name: 🐞 Bug report description: Create a report to help us improve body: - type: markdown attributes: value: | **Before You Start...** This form is only for submitting bug reports. If you have a usage question or are unsure if this is really a bug, make sure to: - Read the [docs](https://devtools.vuejs.org/) - Read the [FAQ](https://devtools.vuejs.org/guide/faq.html) - Ask on [GitHub Discussions](https://github.com/vuejs/devtools/discussions) - Ask on [Discord Chat](https://chat.vuejs.org/) Also try to search for your issue - it may have already been answered or even fixed in the development branch. However, if you find that an old, closed issue still persists in the latest version, you should open a new issue using the form below instead of commenting on the old issue. - type: input id: version attributes: label: Vue devtools version description: | Open your browser Extensions page and find the Vue devtools extension. Then write in this field the version number shown next to the Vue devtools extension name. validations: required: true - type: input id: reproduction-link attributes: label: Link to minimal reproduction description: | The easiest way to provide a reproduction is by showing the bug in [The SFC Playground](https://sfc.vuejs.org/). If it cannot be reproduced in the playground and requires a proper build setup, try [StackBlitz](https://vite.new/vue). If neither of these are suitable, you can always provide a GitHub repository. The reproduction should be **minimal** - i.e. it should contain only the bare minimum amount of code needed to show the bug. See [Bug Reproduction Guidelines](https://github.com/vuejs/core/blob/main/.github/bug-repro-guidelines.md) for more details. Please do not just fill in a random link. The issue will be closed if no valid reproduction is provided. placeholder: Reproduction Link validations: required: true - type: textarea id: steps-to-reproduce attributes: label: Steps to reproduce & screenshots description: | What do we need to do after opening your repro in order to make the bug happen in the devtools? Clear and concise reproduction instructions are important for us to be able to triage your issue in a timely manner. Note that you can upload screenshots and use [Markdown](https://guides.github.com/features/mastering-markdown/) to format lists and code. placeholder: Steps to reproduce validations: required: true - type: textarea id: expected attributes: label: What is expected? validations: required: true - type: textarea id: actually-happening attributes: label: What is actually happening? validations: required: true - type: textarea id: system-info attributes: label: System Info description: Output of `npx envinfo --system --npmPackages vue --binaries --browsers` render: shell placeholder: System, Binaries, Browsers validations: required: true - type: textarea id: additional-comments attributes: label: Any additional comments? description: e.g. some background/context of how you ran into this bug. ================================================ FILE: .github/ISSUE_TEMPLATE/config.yml ================================================ blank_issues_enabled: false contact_links: - name: I have a performance issue url: https://devtools.vuejs.org/guide/devtools-perf.html about: Follow the guide to share performance profiling data with us! - name: Questions & Discussions url: https://github.com/vuejs/devtools/discussions about: Use GitHub discussions for message-board style questions and discussions. - name: Discord Chat url: https://chat.vuejs.org about: Ask questions and discuss with other Vue users in real time. - name: GitHub Sponsor url: https://github.com/sponsors/Akryum about: Love the Vue devtools? Please consider supporting us via GitHub sponsors. ================================================ FILE: .github/ISSUE_TEMPLATE/feature_request.yml ================================================ name: 🚀 New feature proposal description: Suggest an idea for this project labels: [':sparkles: feature request'] body: - type: markdown attributes: value: | **Before You Start...** This form is only for submitting feature requests. If you have a usage question or are unsure if this is really a bug, make sure to: - Read the [docs](https://devtools.vuejs.org/) - Read the [FAQ](https://devtools.vuejs.org/guide/faq.html) - Ask on [GitHub Discussions](https://github.com/vuejs/devtools/discussions) - Ask on [Discord Chat](https://chat.vuejs.org/) Also try to search for your issue - another user may have already requested something similar! - type: textarea id: problem-description attributes: label: What problem does this feature solve? description: | Explain your use case, context, and rationale behind this feature request. More importantly, what is the **end user experience** you are trying to build that led to the need for this feature? placeholder: Problem description validations: required: true ================================================ FILE: .github/PULL_REQUEST_TEMPLATE.md ================================================ ### Description ### Additional context --- ### What is the purpose of this pull request? - [ ] Bug fix - [ ] New Feature - [ ] Documentation update - [ ] Other ### Before submitting the PR, please make sure you do the following - [ ] Read the [Contributing Guidelines](https://devtools.vuejs.org/guide/contributing.html). - [ ] Read the [Pull Request Guidelines](https://devtools.vuejs.org/guide/contributing.html#pull-request-guidelines) and follow the [Commit Convention](https://github.com/vuejs/devtools/blob/main/.github/commit-convention.md). - [ ] Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate. - [ ] Provide a description in this PR that addresses **what** the PR is solving, or reference the issue that it solves (e.g. `fixes #123`). ================================================ FILE: .github/commit-convention.md ================================================ ## Git Commit Message Convention > This is adapted from [Angular's commit convention](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular). #### TL;DR: Messages must be matched by the following regex: ```js /^(revert: )?(feat|fix|docs|dx|refactor|perf|test|workflow|build|ci|chore|types|wip|release|deps)(\(.+\))?: .{1,50}/ ``` #### Examples Appears under "Features" header, `dev` subheader: ``` feat(dev): add 'comments' option ``` Appears under "Bug Fixes" header, `dev` subheader, with a link to issue #28: ``` fix(dev): fix dev error close #28 ``` Appears under "Performance Improvements" header, and under "Breaking Changes" with the breaking change explanation: ``` perf(build): remove 'foo' option BREAKING CHANGE: The 'foo' option has been removed. ``` The following commit and commit `667ecc1` do not appear in the changelog if they are under the same release. If not, the revert commit appears under the "Reverts" header. ``` revert: feat(compiler): add 'comments' option This reverts commit 667ecc1654a317a13331b17617d973392f415f02. ``` ### Full Message Format A commit message consists of a **header**, **body** and **footer**. The header has a **type**, **scope** and **subject**: ``` ():