# devtools-v6

**Repository Path**: itjiuping/devtools-v6

## Basic Information

- **Project Name**: devtools-v6
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: add-remote-devtools
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-10-25
- **Last Updated**: 2024-10-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-devtools

### 重要使用说明

1. 如果页面使用的是Vue.js的生产/压缩版本，则默认情况下会禁用devtools检查，因此Vue面板不会显示。

2. 要使devtools需要通过`file://`协议打开页面工作, 你需要在Chrome的扩展管理面板中为此扩展勾选“允许访问文件URL”。

<p align="center"><img width="600px" src="https://raw.githubusercontent.com/vuejs/vue-devtools/master/media/screenshot.png" alt="demo"></p>

可以和[vuex](https://github.com/vuejs/vuex)一起用于time-travel调试：

<p align="center"><img width="600px" src="https://raw.githubusercontent.com/vuejs/vue-devtools/master/media/demo.gif" alt="demo"></p>

### 安装

- [获取Chrome扩展](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)

- [获取Firefox插件](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)

- [获取独立应用程序](https://github.com/vuejs/vue-devtools/blob/master/shells/electron/README.md)

- [Safari的替代方案](https://github.com/vuejs/vue-devtools/blob/master/docs/workaround-for-safari.md)

#### 在编辑器中打开组件

要启用此功能，请遵循[此指南](./docs/open-in-editor.md).

### 手动安装

**确保你使用的是Node 6+和NPM 3+。**

1. 克隆此仓库。
2. 执行 `npm install` (如果你使用yarn作为包管理器，则执行`yarn install`)
3. `npm run build`
4. 打开Chrome扩展页面。
5. 勾选"developer mode"
6. 点击"load unpacked extension",并选择`shells/chrome`.

### 开发调试

1. 克隆此仓库。
2. `npm install`
3. `npm run dev`
4. 一个带有测试应用的普通shell将在`localhost:8080`上可用。

### 作为Firefox插件进行测试

 1. 安装`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，只需将npm替换为yarn。


### 常见问题及解决方法

1. 解决在本地通过`file://`协议工作时出现的"下载Vue Devtools以获得更好的开发体验"的控制台消息： 
  1.1 - Google Chrome:右键点击 vue-devtools 图标，点击"Manage Extensions"，然后在扩展列表中搜索vue-devtools。勾选“允许访问文件URL”框。


### 开源协议

[MIT](http://opensource.org/licenses/MIT)