From 86e82932d468e772fc3a6917c97c00173240162e Mon Sep 17 00:00:00 2001 From: Craig Leinoff Date: Tue, 16 Jul 2024 11:14:57 -0700 Subject: [PATCH 1/4] Add instructions for opening/repositioning devtools. --- docs/getting-started/features.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/getting-started/features.md b/docs/getting-started/features.md index 7e85c9bcd..570523977 100644 --- a/docs/getting-started/features.md +++ b/docs/getting-started/features.md @@ -1,6 +1,8 @@ # Features -Discover all the features of the Vue DevTools +After installation, 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 the Vue DevTools window. + +The Vue DevTools can be repositioned by dragging this icon. ## Overview From 401cb5b3a1e4cd7111e305f1c4c3604d589626a1 Mon Sep 17 00:00:00 2001 From: Craig Leinoff Date: Mon, 22 Jul 2024 10:52:22 -0700 Subject: [PATCH 2/4] Missing space. --- docs/getting-started/features.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/getting-started/features.md b/docs/getting-started/features.md index 570523977..aeb4fe7d0 100644 --- a/docs/getting-started/features.md +++ b/docs/getting-started/features.md @@ -1,6 +1,6 @@ # Features -After installation, 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 the Vue DevTools window. +After installation, 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 the Vue DevTools window. The Vue DevTools can be repositioned by dragging this icon. From 0201042152514bd08aacd00ed28e5e5a7755adc6 Mon Sep 17 00:00:00 2001 From: Craig Leinoff Date: Sat, 3 Aug 2024 14:19:00 -0700 Subject: [PATCH 3/4] Update features.md Remove double-"the" --- docs/getting-started/features.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/getting-started/features.md b/docs/getting-started/features.md index aeb4fe7d0..d74af20cc 100644 --- a/docs/getting-started/features.md +++ b/docs/getting-started/features.md @@ -1,6 +1,6 @@ # Features -After installation, 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 the Vue DevTools window. +After installation, 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. From 6cdacdf1559761ead52df02e45cebe33228f4ac6 Mon Sep 17 00:00:00 2001 From: Craig Leinoff Date: Wed, 28 Aug 2024 15:55:00 -0700 Subject: [PATCH 4/4] Moving usage to the end of each installation guide. --- docs/getting-started/features.md | 4 +--- docs/guide/browser-extension.md | 16 +++++++++++++--- docs/guide/standalone.md | 14 +++++++++++--- docs/guide/vite-plugin.md | 10 ++++++++-- 4 files changed, 33 insertions(+), 11 deletions(-) diff --git a/docs/getting-started/features.md b/docs/getting-started/features.md index d74af20cc..7d28eb7f2 100644 --- a/docs/getting-started/features.md +++ b/docs/getting-started/features.md @@ -1,8 +1,6 @@ # Features -After installation, 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. +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 {