Documentation | Install the extension
This is useful when you want to build the extension with the source repo to get not-yet-released features.
- Clone this repo
cd vue-devtools
the newly created folder- run
yarn install
- then run
yarn run build:watch
&yarn run dev:chrome
in parallel - Open the Chrome extension page (currently under
Menu
>More Tools
>Extensions
) - Check "developer mode" on the top-right corner
- Click the "load unpacked" button on the left, and choose the folder:
vue-devtools/packages/shell-chrome/
(it will have an orange disk icon) - Make sure you disable all other versions of the extension
Package | Description |
---|---|
api | The public devtools API that can be installed in Vue plugins |
app-backend-api | Abstract API to link the Public API, the core and Vue handlers |
app-backend-core | The main logic injected in the page to interact with Vue apps |
app-backend-vue1 | Decoupled handlers to support Vue 1 (soon) |
app-backend-vue2 | Decoupled handlers to support Vue 2 |
app-backend-vue3 | Decoupled handlers to support Vue 3 |
app-frontend | Vue app displayed in the browser devtools pane |
shell-chrome | Chrome/Firefox extension |
shell-electron | Electron standalone app |
shell-host | Development environment |
shell-dev-vue2 | Demo app for development (Vue 2) |
shell-dev-vue3 | Demo app for development (Vue 3) |
See the Contributing guide.