vue-devtools在IE11中的使用

IE下的调试一直都很头痛，本来vue官方没有提供ie下的开发工具插件，后来还是不死心去官网看了下，结果有了意外的收获。

vue官方独立的vue-devtools应用程序，可用于调试任何Vue应用程序，无论环境如何。现在，您可以调试在移动浏览器，Safari，本机脚本等中打开的应用程序，而不仅仅是桌面chrome或firefox。

查看IE下Vue组件状态

文档中已经提到了怎么在开发环境使用了，现在使用vue-cli3进行根据环境变量来差异化编译index.html模板。参考HTML和静态文件章节)

index.html文件添加
或者，如果要远程调试设备：

到您应用的部分。（在部署到生产之前不要忘记将其删除！）

通常如下所示：192.168.x.x.

作为依赖安装
将程序包安装为项目依赖项后，运行：
1
./node_modules/.bin/vue-devtools
您还可以使用全局vue-devtools来启动应用程序，但您可能需要检查本地版本是否与此方案中的全局版本匹配，以避免任何不兼容性。

然后直接在您的应用中导入它：
1
2
import devtools from '@vue/devtools'
// import Vue from 'vue'
确保在Vue之前导入devtools，否则它可能无法按预期工作。

并连接到主机：
1
2
3
if (process.env.NODE_ENV === 'development') {
devtools.connect(/* host, port */)
}
- host - 是一个可选参数，它告诉应用程序devtools中间件服务器正在运行的位置，如果你在计算机上调试app，则不必设置它（默认为http:// localhost），但是如果要调试您的移动设备上的应用，您可能想要传递本地IP（例如192.168.1.12）。
- port - 是一个可选参数，它告诉应用程序devtools中间件服务器正在运行的端口。如果使用代理服务器，则可能需要将其设置为null，以便端口不会添加到连接URL。
常问问题：
1. 如何更改正在运行devtools服务器端口？
  
  您可以在运行之前通过设置环境变量来更改它：
  1
  PORT=8000 vue-devtools
  然后在您的应用程序中，您将必须设置：
  1
  window.__ VUE_DEVTOOLS_PORT__=8000
  或者使用新端口更新connect方法：
  1
  devtools.connect（/ * host * /，8000）
2. 如何远程检查(inspect)服务器上的页面？
```
为此，您可以使用`ngrok`代理。您可以在这里下载。

   一旦你启动`vue-devtools`运行：
```
1
ngrok http 8098
然后相应地更新您的主机和端口：
1
devtools.connect（'example.ngrok.io'，null）
确保将port设置为null或false，因为ngrok主机已经代理到我们在第一个命令中定义的正确端口。
1. 如何检查通过HTTPS提供的页面？
为此，您还可以使用ngrok，因为它会自动将https请求代理到http。请查看问题2以获取说明。

参考
调试工具官方仓库

vue-devtools在IE11中的使用

vue-devtools在IE11中的使用

查看IE下Vue组件状态

作为依赖安装

参考