Moving usage to the end of each installation guide.

vuejs · Aug 28, 2024 · 6cdacdf · 6cdacdf
1 parent 0201042
commit 6cdacdf
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 {