vue.js可视化开发工具

• Install on Chrome

  在Chrome上安装

• Install on Firefox

  在Firefox上安装

• Install the standalone app

  安装独立应用

• How to use the Developer Tools

  如何使用开发人员工具

  • Filter components

    过滤组件

  • Select component in the page

    在页面中选择组件

  • Format components names

    格式化组件名称

  • Filter inspected data

    筛选检查的数据

  • Inspect DOM

    检查DOM

  • Open in editor

    在编辑器中打开

  How to use the Developer Tools

  如何使用开发人员工具

When you’re first experimenting with Vue, if you open the Browser Developer Tools you will find this message: “Download the Vue Devtools extension for a better development experience: https://github.com/vuejs/vue-devtools“

首次尝试使用Vue时，如果打开浏览器开发人员工具，则会发现以下消息：“ 下载Vue Devtools扩展以获得更好的开发体验： https : //github.com/vuejs/vue-devtools ”

This is a friendly reminder to install the Vue Devtools Extension. What’s that? Any popular framework has its own devtools extension, which generally adds a new panel to the browser developer tools that is much more specialized than the ones that the browser ships by default. In this case, the panel will let us inspect our Vue application and interact with it.

这是安装Vue Devtools Extension的友好提示。 那是什么？ 任何流行的框架都有其自己的devtools扩展，通常会为浏览器开发人员工具添加一个新面板，该面板比浏览器默认提供的工具更加专业。 在这种情况下，面板将使我们检查Vue应用程序并与其进行交互。

This tool will be an amazing help when building Vue apps. The developer tools can only inspect a Vue application when it’s in development mode. This makes sure no one can use them to interact with your production app (and will make Vue more performant because it does not have to care about the devtools)

在构建Vue应用程序时，此工具将为您提供惊人的帮助。 开发人员工具只能在处于开发模式时检查Vue应用程序。 这样可以确保没有人可以使用它们来与您的生产应用程序进行交互(并且可以使Vue的性能更高，因为它不必关心devtools)

Let’s install it!

让我们安装它！

There are 3 ways to install the Vue Dev Tools:

有3种安装Vue Dev Tools的方法：

• on Chrome
  在Chrome上
• on Firefox
  在Firefox上
• as a standalone application
  作为独立的应用程序

Safari, Edge and other browsers are not supported with a custom extension, but using the standalone application you can debug a Vue.js app running in any browser.

自定义扩展不支持Safari，Edge和其他浏览器，但是使用独立应用程序，您可以调试在任何浏览器中运行的Vue.js应用程序。

在Chrome上安装 (Install on Chrome)

Go to this page on the Google Chrome Store: https://chrome.google.com/webstore/detail/vuedevtools/nhdogjmejiglipccpnnnanhbledajbpd and click Add to Chrome.

转到Google Chrome商店中的以下页面： https : //chrome.google.com/webstore/detail/vuedevtools/nhdogjmejiglipccpnnnanhbledajbpd ，然后点击添加至Chrome 。

Go through the installation process:

完成安装过程：

The Vue.js devtools icon shows up in the toolbar. If the page does not have a Vue.js instance running, it’s grayed out.

Vue.js devtools图标显示在工具栏中。 如果页面没有正在运行的Vue.js实例，则该页面显示为灰色。

If Vue.js is detected, the icon has the Vue logo colors.

如果检测到Vue.js，则图标具有Vue徽标颜色。

The icon does nothing except showing us that there is a Vue.js instance. To use the devtools, we must open the Developer Tools panel, using “View → Developer → Developer Tools”, or Cmd-Alt-i

图标什么也不做，除了向我们展示， 有一个Vue.js实例。 要使用devtools，我们必须使用“视图→开发人员→开发人员工具”或Cmd-Alt-i打开“开发人员工具”面板

在Firefox上安装 (Install on Firefox)

You can find the Firefox dev tools extension in the Mozilla addons store: https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/

您可以在Mozilla插件商店中找到Firefox开发工具扩展： https : //addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/

Click “Add to Firefox” and the extension will be installed. As with Chrome, a grayed icon shows up in the toolbar

单击“ 添加到Firefox ”，将安装扩展名。 与Chrome一样，工具栏中也会显示灰色图标

And when you visit a site that has a Vue instance running, it will become green, and when we open the Dev Tools we will see a “Vue” panel:

当您访问正在运行Vue实例的站点时，该站点将变为绿色，并且当我们打开开发工具时，我们将看到一个“ Vue ”面板：

安装独立应用 (Install the standalone app)

Alternatively, you can use the DevTools standalone app.

或者，您可以使用DevTools独立应用程序。

Install it using

使用安装

npm install -g @vue/devtools

//or

yarn global add @vue/devtools

and run it by calling

并通过调用来运行它

vue-devtools

This will open the standalone Electron-based application.

这将打开独立的基于电子的应用程序。

now, paste the script tag it shows you:

现在，粘贴显示给您的脚本标签：

<script src="http://localhost:8098"></script>

inside the project index.html file, and wait for the app to be reloaded, and it will automatically connect to the app:

在项目index.html文件中，然后等待应用程序重新加载，它将自动连接到应用程序：

如何使用开发人员工具 (How to use the Developer Tools)

As mentioned, the Vue DevTools can be activated by opening the Developer Tools in the browser and moving to the Vue panel.

如前所述，可以通过在浏览器中打开开发人员工具并移至Vue面板来激活Vue DevTools。

Another option is to right-click on any element in the page, and choose “Inspect Vue component”:

另一个选项是右键单击页面中的任何元素，然后选择“检查Vue组件”：

When the Vue DevTools panel is open, we can navigate the components tree. When we choose a component from the list on the left, the right panel shows the props and data it holds:

打开Vue DevTools面板后，我们可以导航组件树。 当我们从左侧的列表中选择一个组件时，右侧面板将显示其拥有的道具和数据：

On the top there are 4 buttons:

顶部有4个按钮：

• Components (the current panel), which lists all the component instances running in the current page. Vue can have multiple instances running at the same time, for example it might manage your shopping cart widget and the slideshow, with separate, lightweight apps.

  组件 (当前面板)，其中列出了当前页面中运行的所有组件实例。 Vue可以同时运行多个实例，例如，它可以使用单独的轻量级应用程序管理购物车小部件和幻灯片。

• Vuex is where you can inspect the state managed through Vuex.

  在Vuex中，您可以检查通过Vuex管理的状态。

• Events shows all the events emitted

  事件显示所有发出的事件

• Refresh reloads the devtools panel

  刷新以重新加载devtools面板

Notice the small = $vm0 text beside a component? It’s a handy way to inspect a component using the Console. Pressing the “esc” key shows up the console in the bottom of the devtools, and you can type $vm0 to access the Vue component:

注意组件旁边的小= $vm0文本吗？ 这是使用控制台检查组件的便捷方法。 按下“ esc”键将在devtools底部显示控制台，您可以键入$vm0来访问Vue组件：

This is very cool to inspect and interact with components without having to assign them to a global variable in the code.

检查组件并与之交互非常酷，而不必将它们分配给代码中的全局变量。

过滤组件 (Filter components)

Start typing a component name, and the components tree will filter out the ones that don’t match.

开始输入组件名称，组件树将过滤出不匹配的组件。

在页面中选择组件 (Select component in the page)

Click the

点击

button and you can hover any component in the page with the mouse, click it, and it will be opened in the devtools.

按钮，您可以用鼠标悬停页面中的任何组件，单击它，它将在devtools中打开。

格式化组件名称 (Format components names)

You can choose to show components in camelCase or use dashes.

您可以选择在camelCase中显示组件或使用破折号。

筛选检查的数据 (Filter inspected data)

On the right panel, you can type any word to filter the properties that don’t match it.

在右侧面板上，您可以输入任何单词以过滤不匹配的属性。

检查DOM (Inspect DOM)

Click the Inspect DOM button to be brought to the DevTools Elements inspector, with the DOM element generated by the component:

单击“检查DOM”按钮，将其带到DevTools Elements检查器中，该DOM元素由组件生成：

在编辑器中打开 (Open in editor)

Any user component (not framework-level components) has a button that opens it in your default editor. Very handy.

任何用户组件(不是框架级组件)都有一个按钮，可以在默认编辑器中将其打开。 非常便利。

翻译自: https://flaviocopes.com/vue-devtools/

vue.js可视化开发工具