Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: add instructions for opening/repositioning devtools #528

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

docs: add instructions for opening/repositioning devtools #528

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
86e8293
Add instructions for opening/repositioning devtools.
Offlein Jul 16, 2024
401cb5b
Missing space.
Offlein Jul 22, 2024
0201042
Update features.md
Offlein Aug 3, 2024
6cdacdf
Moving usage to the end of each installation guide.
Offlein Aug 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/getting-started/features.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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

Expand Down
16 changes: 13 additions & 3 deletions docs/guide/browser-extension.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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).

Expand All @@ -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.

Expand All @@ -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.
14 changes: 11 additions & 3 deletions docs/guide/standalone.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ $ bun add -D @vue/devtools@next

:::

## Usage
## Starting the Standalone App

### Using global package

Expand All @@ -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>
Expand All @@ -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.
:::
Expand All @@ -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?
Expand Down
10 changes: 8 additions & 2 deletions docs/guide/vite-plugin.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ $ bun add -D vite-plugin-vue-devtools

:::

## Usage
## Setup

```ts
// Configuration Vite
Expand All @@ -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 {
Expand Down