Devtools - GitHub README翻译

重要的使用注意事项

1.如果页面使用Vue.js的production/minified构建,devtools检验默认是不能使用的,因此Vue面板(就是console那种面板)不会显示出来。

2.通过file://协议将它打开,你需要在Chrome扩展管理面板中检查Allow access to file URLs

Devtools - GitHub README翻译_第1张图片
图片.png

与vuex结合工作实现时间追踪调试:


Devtools - GitHub README翻译_第2张图片
图片.png

安装

在各个主流浏览器中安装:

  • 取得Chrome扩展

  • 取得Firefox Addon

  • 取得标准Electron app(在任何环境之下都可以工作)

  • Safari工作区

在编辑器中打开组件

如果想打开这个特征,请遵循这篇文档

手动安装

请保证你使用的node 6+ 和 npm3+

1、clone这个repo
2、npm install(或者 yarn install 如果你正在使用yarn作为包管理器)
3、npm run build
4、打开Chrome扩展页
5、检查『开发者模式』
6、点击『加载未包装的扩展』,然后选择shells/chrome

作为开发着去贡献

1、克隆这个仓库
2、npm install
3、npm run dev
4、一个简单的带测试的shell 将会在localhost:8000展示出来

Firefox addon 测试

1、install web-ext

$ npm install --global web-ext

或者使用yarn:

$ yarn global add web-ext

另外,保证PATH是被设置起来的,在~/.bash_profile应该像:

$ PATH=$PATH:$(yarn global bin)

2、在Firefox中编译并且运行

$ npm run build
$ npm run run:firefox

当使用Yarn,你只需要使用yarn替代npm

你可能感兴趣的:(Devtools - GitHub README翻译)