If the page uses a production/minified build of Vue.js, devtools inspection is disabled by default so the Vue pane won't show up.
To make it work for pages opened via file://
protocol, you need to check "Allow access to file URLs" for this extension in Chrome's extension management panel.
The events tab only show custom events emitted by a component. More information on custom events can be found in the documentation.
To enable this feature, follow this guide.
This is only necessary when you want to build the extension with the source repo to get not-yet-released features.
Make sure you are using Node 6+ and NPM 3+
cd vue-devtools
the newly created folderyarn install
yarn run build
Menu
> More Tools
> Extensions
)vue-devtools/packages/shell-chrome/
yarn dev:chrome
to build & watch the unpacked extensionyarn install
yarn run dev
localhost:8100
.Install web-ext
$ yarn global add web-ext
Also, make sure PATH
is set up. Something like this in ~/.bash_profile
:
$ PATH=$PATH:$(yarn global bin)
Build and run in Firefox
$ yarn run build
$ yarn run run:firefox
// Before you create app
Vue.config.devtools = process.env.NODE_ENV === 'development'
// After you create app
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'
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.
How to use the devtools in IE/Edge/Safari or any other browser? Get the standalone Electron app (works with any environment!)
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。