Vue 3源码极客之：`Vue`的`Devtools`：它如何利用`Chrome` `Devtools API`与`Vue`实例通信。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

观众朋友们，晚上好！我是你们的老朋友，今天咱们来聊聊Vue 3源码里一个挺有意思的模块：Devtools。这玩意儿就像一个Vue实例的“透视眼”，能让你在Chrome Devtools里看到Vue应用内部的各种状态，简直是调试神器。今天咱们就扒一扒它是怎么利用Chrome Devtools API跟Vue实例“眉来眼去”的。

一、咱们先来认识一下“主角”：Chrome Devtools API

要想了解Vue Devtools的工作原理，首先得认识一下它的“搭档”——Chrome Devtools API。这玩意儿是Chrome浏览器提供的一组API，允许开发者扩展Devtools的功能，比如添加自定义面板、调试器等等。

简单来说，Chrome Devtools API就像一座桥梁，连接着你的扩展程序（Vue Devtools）和Chrome浏览器。通过这座桥，你的扩展程序可以访问浏览器的内部信息，也可以向浏览器发送指令。

常用的Chrome Devtools API可以简单归纳为以下几个类别：

API类别	功能描述	常用API
`devtools.panels`	创建自定义面板，显示自定义UI和数据。	`create()`
`devtools.inspectedWindow`	访问被检查的窗口的信息，比如当前页面的URL、执行JavaScript代码等。	`eval()`, `tabId`
`devtools.network`	监听网络请求，获取请求头、响应头等信息。	`onRequestFinished`
`devtools.recorder`	用于自动化测试，记录用户在浏览器中的操作，并生成可重复执行的脚本。	（这个API Vue Devtools 用的不多，咱们就不细说了）

咱们今天重点关注的是devtools.panels和devtools.inspectedWindow这两个API，因为Vue Devtools主要就是靠它们来展示Vue实例的信息和与Vue实例通信的。

二、 Vue Devtools “探囊取物”的秘密：内容脚本 (Content Script)

Vue Devtools本身是一个Chrome扩展程序，它由多个部分组成，其中最关键的就是内容脚本 (Content Script)。

内容脚本就像一个“间谍”，它会被注入到每个网页中（当然，只有你开启了Vue Devtools，并且网页上有Vue应用的时候才会注入）。它的任务是：

探测页面中是否存在Vue实例。
如果存在Vue实例，就收集Vue实例的信息，比如组件树、data、props等等。
将这些信息发送给Vue Devtools的后台脚本 (Background Script)。

那内容脚本是怎么探测页面中是否存在Vue实例的呢？这里就涉及到Vue的一个“小秘密”了。Vue在初始化的时候，会在window对象上挂载一个__VUE__对象（当然，在生产环境下这个对象通常会被移除，所以Vue Devtools在生产环境下是无法工作的）。

所以，内容脚本只需要检查window.__VUE__是否存在，就可以知道页面上是否有Vue应用了。

// content-script.js (伪代码)

// 检查页面上是否存在Vue实例
if (window.__VUE__) {
  console.log('发现Vue实例！');

  // 收集Vue实例的信息 (这里只是一个简单的例子，实际情况要复杂得多)
  const vueData = {
    version: window.__VUE__.version,
    rootComponent: window.__VUE__.root,
  };

  // 将信息发送给后台脚本
  chrome.runtime.sendMessage({
    type: 'vue-detected',
    payload: vueData,
  });
}

三、后台脚本 (Background Script) 的 “运筹帷幄”

后台脚本是Chrome扩展程序的“大脑”。它负责：

接收内容脚本发送过来的Vue实例信息。
创建自定义Devtools面板。
在自定义面板中显示Vue实例的信息。
处理用户在自定义面板中的操作，比如修改data、props等等。
将用户的操作同步到Vue实例。

后台脚本通过chrome.devtools.panels.create() API来创建自定义面板。

// background.js (伪代码)

chrome.devtools.panels.create(
  'Vue Explorer',  // 面板标题
  'icon.png',      // 面板图标
  'panel.html',    // 面板HTML文件
  (panel) => {
    console.log('Vue Explorer面板创建成功！');

    // 监听来自内容脚本的消息
    chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
      if (message.type === 'vue-detected') {
        console.log('收到Vue实例信息：', message.payload);

        // 将Vue实例信息发送给面板
        panel.onShown.addListener((window) => {
          window.postMessage({
            type: 'vue-data',
            payload: message.payload,
          }, '*');
        });
      }
    });
  }
);

四、面板 (Panel) 的 “抛头露面”

面板是Vue Devtools的“门面”。它是一个HTML页面，运行在Devtools的iframe中。它的任务是：

接收后台脚本发送过来的Vue实例信息。
将这些信息以友好的方式展示给用户。
监听用户的操作，并将操作发送给后台脚本。

面板通过window.postMessage() API来与后台脚本通信。

<!-- panel.html (伪代码) -->

<!DOCTYPE html>
<html>
<head>
  <title>Vue Explorer</title>
</head>
<body>
  <h1>Vue Explorer</h1>
  <div id="vue-data"></div>

  <script>
    window.addEventListener('message', (event) => {
      if (event.data.type === 'vue-data') {
        console.log('收到Vue实例信息：', event.data.payload);

        // 将Vue实例信息显示在页面上
        document.getElementById('vue-data').innerHTML = JSON.stringify(event.data.payload, null, 2);
      }
    });
  </script>
</body>
</html>

五、 “隔空取物”的关键：eval()大法

前面我们讲了内容脚本如何探测Vue实例，并把信息发送给后台脚本。但是，我们还没有解决一个关键问题：

如何修改Vue实例的数据？

要知道，内容脚本运行在网页的上下文中，它只能访问网页的DOM元素和JavaScript变量。它无法直接访问Vue实例的内部数据。

这时候，就需要用到devtools.inspectedWindow.eval() API了。这个API允许你在被检查的窗口中执行JavaScript代码。

也就是说，你可以通过eval() API来执行一段JavaScript代码，这段代码可以访问Vue实例的内部数据，并修改它们。

// background.js (伪代码)

// 用户点击了“修改data”按钮
function onModifyData(newData) {
  chrome.devtools.inspectedWindow.eval(
    `
    // 在这里执行JavaScript代码，修改Vue实例的数据
    // 假设Vue实例的根组件有一个名为'message'的data属性
    window.__VUE__.root.message = '${newData}';

    // 为了让Vue更新视图，需要手动触发一次更新
    window.__VUE__.root.$forceUpdate();
    `,
    (result, isException) => {
      if (isException) {
        console.error('修改data失败：', result);
      } else {
        console.log('修改data成功！');
      }
    }
  );
}

这段代码的关键在于：

它在字符串中拼接了一段JavaScript代码。
这段代码访问了window.__VUE__.root，也就是Vue实例的根组件。
它修改了根组件的message属性。
它调用了$forceUpdate()方法，强制Vue更新视图。

通过这种方式，Vue Devtools就可以实现“隔空取物”，修改Vue实例的数据了。

六、总结一下：Vue Devtools的工作流程

为了方便大家理解，我们把Vue Devtools的工作流程总结成以下几个步骤：

内容脚本注入到网页中，检查window.__VUE__是否存在。
如果存在，内容脚本收集Vue实例的信息，并发送给后台脚本。
后台脚本创建自定义Devtools面板。
后台脚本将Vue实例的信息发送给面板。
面板将信息展示给用户。
用户在面板中进行操作，比如修改data、props等等。
面板将用户的操作发送给后台脚本。
后台脚本使用devtools.inspectedWindow.eval() API，在网页中执行JavaScript代码，修改Vue实例的数据。
Vue实例更新视图，Devtools面板也同步更新。

可以用表格来更清晰地展示这个流程：

步骤	组件	操作	数据流向	API使用
1	内容脚本	检查`window.__VUE__`是否存在	–	–
2	内容脚本	收集Vue实例信息	内容脚本 -> 后台脚本	`chrome.runtime.sendMessage`
3	后台脚本	创建Devtools面板	–	`chrome.devtools.panels.create`
4	后台脚本	将Vue实例信息发送给面板	后台脚本 -> 面板	`panel.onShown.addListener`, `window.postMessage`
5	面板	展示Vue实例信息	–	–
6	用户	在面板中进行操作（修改data等）	–	–
7	面板	将用户操作发送给后台脚本	面板 -> 后台脚本	`window.postMessage`
8	后台脚本	使用`eval()`修改Vue实例数据	–	`chrome.devtools.inspectedWindow.eval`
9	Vue实例/Devtools	Vue实例更新视图，Devtools面板同步更新	–	–

七、深入一点：Vue Devtools源码里的细节

上面我们只是从宏观的角度了解了Vue Devtools的工作原理。如果你想深入了解它的实现细节，可以去看看Vue Devtools的源码。

Vue Devtools的源码主要分为以下几个部分：

packages/shell-chrome：Chrome扩展程序的外壳，包含manifest.json、background.js、panel.html等等。
packages/app-backend：运行在网页中的代码，负责探测Vue实例、收集信息、修改数据等等。
packages/app-frontend：运行在Devtools面板中的代码，负责展示Vue实例的信息、处理用户操作等等。

你可以重点关注packages/app-backend和packages/app-frontend这两个目录，因为它们包含了Vue Devtools的核心逻辑。

在packages/app-backend中，你可以找到：

src/hook.ts：这个文件定义了Vue Devtools的“钩子函数”，用于拦截Vue的生命周期事件，收集Vue实例的信息。
src/backend.ts：这个文件包含了与Devtools面板通信的逻辑，以及修改Vue实例数据的逻辑。

在packages/app-frontend中，你可以找到：

src/components：这个目录包含了各种Vue组件，用于展示Vue实例的信息。
src/App.vue：这个文件是Devtools面板的根组件。

通过阅读这些源码，你可以更深入地了解Vue Devtools的实现细节，也可以学习到如何使用Chrome Devtools API开发自己的扩展程序。

八、总结

好了，今天关于Vue Devtools的“探秘之旅”就到这里了。希望通过今天的讲解，你能对Vue Devtools的工作原理有一个更清晰的认识。记住，掌握了这些知识，不仅可以让你更好地使用Vue Devtools，也可以帮助你更好地理解Vue的内部机制。下次遇到Vue调试问题，你就可以胸有成竹地说：“这我知道，Devtools就是这么跟Vue实例通信的！”

感谢大家的收听！咱们下次再见！

发表回复 取消回复

发表回复取消回复