docs: add vue 3 devtools setup instructions (vuejs#1264)

bencodezen · web-flow · commit 57c34c987271 · 2020-08-31T02:16:55.000+02:00
* docs: add steps for setting up vue 3 devtools

* docs: update filename

* docs: standardize readme markdown

* docs: add vue 3 devtools setup guide
diff --git a/README.md b/README.md
@@ -30,41 +30,46 @@ This is only necessary when you want to build the extension yourself from source
 
 1. Clone this repo
 2. `cd vue-devtools` the newly created folder
-2. run `yarn install`
-3. then run `yarn run build`
-4. Open the Chrome extension page (currently under Menu > More Tools > Extensions)
-5. Check "developer mode" on the top-right corner
-6. Click the "load unpacked" button on the left, and choose the folder: `vue-devtools/packages/shell-chrome/`
-7. Alternatilvely to step 3, you can also use `yarn dev:chrome` to build & watch the unpacked extension
+3. run `yarn install`
+4. then run `yarn run build`
+5. Open the Chrome extension page (currently under Menu > More Tools > Extensions)
+6. Check "developer mode" on the top-right corner
+7. Click the "load unpacked" button on the left, and choose the folder: `vue-devtools/packages/shell-chrome/`
+8. Alternatilvely to step 3, you can also use `yarn dev:chrome` to build & watch the unpacked extension
 
 ### Development
 
+#### Vue 2
+
 1. Clone this repo
 2. run `yarn install`
 3. then run `yarn run dev`
 4. A plain shell with a test app will be available at `localhost:8100`.
 
-### Testing as Firefox addon
+#### Vue 3
 
- 1. Install `web-ext`
+To enable this feature, follow [this guide](./docs/devtools-vue3.md).
 
-	~~~~
-	$ yarn global add web-ext
-	~~~~
+### Testing as Firefox addon
 
-	Also, make sure `PATH` is set up. Something like this in `~/.bash_profile`:
+1.  Install `web-ext`
 
-	~~~~
-	$ PATH=$PATH:$(yarn global bin)
-	~~~~
+    ```
+    $ yarn global add web-ext
+    ```
 
- 2. Build and run in Firefox
+    Also, make sure `PATH` is set up. Something like this in `~/.bash_profile`:
 
-	~~~~
-	$ yarn run build
-	$ yarn run run:firefox
-	~~~~
+    ```
+    $ PATH=$PATH:$(yarn global bin)
+    ```
 
+2.  Build and run in Firefox
+
+    ```
+    $ yarn run build
+    $ yarn run run:firefox
+    ```
 
 ### Force enable the devtools
 
@@ -77,17 +82,15 @@ window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = app.constructor
 
 // then had to add in ./store.js as well.
 Vue.config.devtools = process.env.NODE_ENV === 'development'
-
 ```
 
 ### Common problems and how to fix
 
 1. Fixing "Download the Vue Devtools for a better development experience" console message when working locally over `file://` protocol:
-  1.1 - Google Chrome: Right click on vue-devtools icon and click "Manage Extensions" then search for vue-devtools on the extensions list. Check the "Allow access to file URLs" box.
+   1.1 - Google Chrome: Right click on vue-devtools icon and click "Manage Extensions" then search for vue-devtools on the extensions list. Check the "Allow access to file URLs" box.
 
 2. How to use the devtools in IE/Edge/Safari or any other browser? [Get the standalone Electron app (works with any environment!)](./packages/shell-electron/README.md)
 
-
 ### License
 
 [MIT](http://opensource.org/licenses/MIT)
diff --git a/docs/devtools-vue3.md b/docs/devtools-vue3.md
@@ -0,0 +1,25 @@
+# How to Setup Vue DevTools for Vue 3
+
+## Local Development
+
+```bash
+# Clone repo
+git clone git@github.com:vuejs/vue-devtools.git
+
+# Change into devtools directory
+cd vue-devtools
+
+# Checkout next branch
+git checkout next
+
+# Install dependencies
+yarn
+
+# Build TypeScript dependencies
+yarn build:watch
+
+# Start local environment
+yarn dev:shell-vue3
+```
+
+Once everything is setup, you should be able to visit http://localhost:8090/
