diff --git a/docs/getting-started/features.md b/docs/getting-started/features.md index 7e85c9bcd..7d28eb7f2 100644 --- a/docs/getting-started/features.md +++ b/docs/getting-started/features.md @@ -1,6 +1,6 @@ # Features -Discover all the features of the Vue DevTools +Below is a list of all the features and functionality of Vue DevTools. ## Overview diff --git a/docs/guide/browser-extension.md b/docs/guide/browser-extension.md index 9bc9d0fd9..3690fbde9 100644 --- a/docs/guide/browser-extension.md +++ b/docs/guide/browser-extension.md @@ -4,7 +4,11 @@ The v7 version of detools only supports Vue3. If your application is still using Vue2, please install the [v6 version](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?utm_source=ext_sidebar). ::: -## Chrome +## Installation + +Installation of the browser extension differs from browser to browser. + +### Chrome The extension is in beta, remove or disable any existing versions and install the extension from [here](https://chromewebstore.google.com/detail/vuejs-devtools-beta/ljjemllljcmogpfapbkkighbhhppjdbg?utm_source=ext_sidebar). @@ -24,7 +28,7 @@ The extension is in beta, remove or disable any existing versions and install th -## Edge (Arc/Brave) +### Edge (Arc/Brave) ...and other Chromium-based browsers. @@ -46,6 +50,12 @@ This is the same as the Chrome extension, but you need to install it from the Ch -## Firefox +### Firefox We'll launch on the Firefox App Store once v7.0 is stable. + +## Usage +Once installed as a browser extension, Vue DevTools can be found within your browser's Developer Tools. These can typically be opened using `Ctrl+Shift+I` or `F12` depending on +your browser and operating system. + +Within your browser's Developer Tools, you should see a new tab at the top that reads "Vue". Keep in mind that it may be hidden within a dropdown if there are many tabs. diff --git a/docs/guide/standalone.md b/docs/guide/standalone.md index 3260e5ba7..38e359293 100644 --- a/docs/guide/standalone.md +++ b/docs/guide/standalone.md @@ -50,7 +50,7 @@ $ bun add -D @vue/devtools@next ::: -## Usage +## Starting the Standalone App ### Using global package @@ -60,7 +60,7 @@ Once you installed the package globally, run: vue-devtools ``` -Then add this code to the `` section of your application HTML file: +This will start up the Standalone App. Then add this code to the `` section of your application HTML file: ```html @@ -85,12 +85,14 @@ Or if you want to debug your device remotely: ### Using dependency package -Once you installed the package as project dependency, run: +If you've installed the package as a project dependency, run: ```sh ./node_modules/.bin/vue-devtools ``` +This will start up the Standalone App. + :::tip You can also use the global `vue-devtools` to start the app, but you might want to check if the local version matches the global one in this scenario to avoid any incompatibilities. ::: @@ -116,6 +118,12 @@ Make sure to invoke devtools connect function before creating Vue App, otherwise **port** - is an optional argument that tells your application on what port devtools middleware server is running. If you use proxy server, you might want to set it to `null` so the port won't be added to connection URL. +## Usage + +The Standalone App must be manually opened from the command line each time you want to start using it (see above). + +It will stay accessible in a regular application window on your desktop until closed. + ## FAQ ### 1. How to change port devtools server is running on? diff --git a/docs/guide/vite-plugin.md b/docs/guide/vite-plugin.md index 0f62ebc0f..df5968f4d 100644 --- a/docs/guide/vite-plugin.md +++ b/docs/guide/vite-plugin.md @@ -28,7 +28,7 @@ $ bun add -D vite-plugin-vue-devtools ::: -## Usage +## Setup ```ts // Configuration Vite @@ -43,7 +43,13 @@ export default defineConfig({ }) ``` -## Options +## Usage + +If the Vite Plugin has been installed and setup correctly, you should see a small icon with the "Vue" logo at the bottom center of your screen. Clicking this (or pressing the "Toggle Vue DevTools" hotkey -- check your startup logs) will open the Vue DevTools window. + +The Vue DevTools can be repositioned by dragging this icon. + +## Configuration Options ```ts interface VitePluginVueDevToolsOptions {