Skip to content

docs: add shortcut guide #559

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

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

docs: add shortcut guide #559

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fdaa945
docs: add shortcut guide
wzc520pyfm Aug 3, 2024
2928cd1
docs: update toggle shortcut description
wzc520pyfm Aug 31, 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
8 changes: 5 additions & 3 deletions docs/getting-started/features.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
# Features

Discover all the features of the Vue DevTools
Discover all the features of the Vue DevTools.

You can open or close Vue DevTools with `Shift+Alt+D` or `Shift+Option+D` shortcut.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It only works with Vite plugin, but we now have multi-client support (standalone app, browser extension)

Copy link
Contributor Author

@wzc520pyfm wzc520pyfm Aug 25, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we can label it here: If you are using Vite plugin, you can ... ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we can label it here: If you are using Vite plugin, you can ... ?

@webfansplz I updated it to If you are using Vite plugin, you can open or close Vue DevTools with Shift+Alt+DorShift+Option+D shortcut., what do you think?


## Overview

Expand Down Expand Up @@ -52,7 +54,7 @@ Graph tab shows the relationship between modules.

## Settings

Settings tab provides some options to customize the DevTools.
Settings tab provides some options to customize the DevTools. Here you can manage the Tab bar, enable or disable some features, and hide Vue Devtools.

![settings](/features/settings.svg)

Expand All @@ -64,7 +66,7 @@ Inspect expose the [vite-plugin-inspect](https://github.com/antfu/vite-plugin-in

## Inspector

Inspector expose the [vite-plugin-vue-inspector](https://github.com/webfansplz/vite-plugin-vue-inspector) integration, you can inspect your app's DOM tree and see which component is rendering it. Finding the place to make changes are much easier.
Inspector expose the [vite-plugin-vue-inspector](https://github.com/webfansplz/vite-plugin-vue-inspector) integration, you can inspect your app's DOM tree and see which component is rendering it. Finding the place to make changes are much easier. You can active it with `Ctrl+Shift` or `Cmd+Shift` shortcut. When activated, you can use `Esc` shortcut to exit. You can customize shortcut by [`Options.componentInspector.toggleComboKey`](/guide/vite-plugin#options)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This the shortcut depend on #558 .

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Inspector expose the [vite-plugin-vue-inspector](https://github.com/webfansplz/vite-plugin-vue-inspector) integration, you can inspect your app's DOM tree and see which component is rendering it. Finding the place to make changes are much easier. You can active it with `Ctrl+Shift` or `Cmd+Shift` shortcut. When activated, you can use `Esc` shortcut to exit. You can customize shortcut by [`Options.componentInspector.toggleComboKey`](/guide/vite-plugin#options)
The inspector exposes the [vite-plugin-vue-inspector](https://github.com/webfansplz/vite-plugin-vue-inspector) integration. With this integration you can inspect any element in your app's DOM tree and see which Vue component is responsible for rendering it, making it much easier to find the right place to make changes.
You can activate it with the keyboard shortcut `Ctrl+Shift` or `Cmd+Shift`. When activated, you can press `Esc` to exit. You can customize shortcut keybindings via the [`Options.componentInspector.toggleComboKey`](/guide/vite-plugin#options) option.

English revision suggestion


![inspector](/features/inspector.svg)

Expand Down
2 changes: 2 additions & 0 deletions docs/guide/vite-plugin.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,8 @@ interface VitePluginVueDevToolsOptions {
/**
* Enable vue component inspector
*
* The VitePluginInspectorOptions you can see https://github.com/webfansplz/vite-plugin-vue-inspector?tab=readme-ov-file#options
*
* @default true
*/
componentInspector?: boolean | VitePluginInspectorOptions
Expand Down