From 86e82932d468e772fc3a6917c97c00173240162e Mon Sep 17 00:00:00 2001
From: Craig Leinoff <craig.leinoff@gmail.com>
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 <craig.leinoff@gmail.com>
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 <Offlein@users.noreply.github.com>
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 <craig.leinoff@gmail.com>
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
</a>
</div>
-## 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
</a>
</div>
-## 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 `<head>` section of your application HTML file:
+This will start up the Standalone App. Then add this code to the `<head>` section of your application HTML file:
```html
<script src="http://localhost:8098"></script>
@@ -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 {