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.
Works with vuex for time-travel debugging:
To enable this feature, follow this guide.
Make sure you are using Node 6+ and NPM 3+
npm install
(Or yarn install
if you are using yarn as the package manager)npm run build
shells/chrome
.npm install
npm run dev
localhost:8080
.Install web-ext
$ npm install --global web-ext
Or, for Yarn:
$ 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
$ npm run build
$ npm run run:firefox
When using Yarn, just replace npm
with yarn
.
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!)
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。