code-inspector 源码浅析

最新推荐文章于 2024-05-18 10:05:22 发布
最新推荐文章于 2024-05-18 10:05:22 发布
阅读量784 收藏 11
点赞数 8
分类专栏： 前端 文章标签： 前端 后端 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42693699/article/details/136894655
版权

前言

code-inspector 是一个源代码定位插件，它可以通过点击页面上的 DOM 元素，自动启动 IDE 并将光标定位到对应 DOM 元素的源代码位置。

去年，一位同事曾向我推荐过这个插件，不过当时我已经非常熟悉项目目录结构了，所以没有觉得特别需要它。最近，社区的朋友又提起了code-inspector，正好我对其背后的实现机制感到好奇，遂深入研究了一番它的源码设计。

源码浅析

code-inspector 插件的实现过程中涉及到了大量的兼容适配，涵盖了跨平台、跨框架、跨编辑器等诸多方面。如果要一一细致分析，既不切实际也浪费时间，因此本文仅重点分析其核心机制。

实现原理

严格来讲 code-inspector 的实现原理和思路并不复杂，难点在于他考虑到了各种环境的兼容性。

我们本篇采用 vue + vite 环境进行讲解。

整体流程如下：

  • 首先 code-inspector 作为一个 vite / webpack 插件，在打包器收集依赖代码后，会将代码传递给插件，此时 code-inspector 可以拿到源码和文件路径。
  • 获得源码之后，插件使用 AST 解析库处理这些源码，将 DOM 元素的相关信息（如：文件路径、行号、列号）注入到每个 DOM 元素中。
  • 向客户端注入带有监听事件的 web component，用户通过触发这些事件来发起源码定位请求。
  • 利用 Node.js 启动一个 HTTP 服务，接收从浏览器端发送的请求。
  • 服务端收到请求后，通过 child_process.spawn 启动和控制 IDE，打开相应文件并定位到指定代码行。

目录设计

整个项目采用 monorepo 架构，源码都放在 packages 目录下

  • code-inspector-plugin 主要承担插件统一入口的作用，同时判断了是否是开发环境。
  • vite-plugin 与 webpack-plugin 主要实现了不同打包器的插件开发和适配。
  • core 是整个插件的核心逻辑，包含客户端逻辑和服务端逻辑。
.
├── LICENSE
├── README.md
├── assets ------------------------------- logo 文件
├── demos -------------------------------- 各个框架的 demo
├── docs --------------------------------- 文档目录
├── package.json 
├── packages ----------------------------- 源码实现
│   ├── code-inspector-plugin ------------ 插件入口
│   ├── core ----------------------------- 核心包： 服务端与客户端逻辑
│   ├── vite-plugin ---------------------- vite 插件
│   └── webpack-plugin ------------------- webpack 插件
└── pnpm-workspace.yaml

源码逻辑梳理

code-inspector-plugin 逻辑比较简单，只是判断了一下是否是环境和根据用户传入 bundler 类型调用不同的插件包，这里不再展开讲了，直接进行 vite-plugin 包的讲解。

以下是精简之后的 vite 插件代代码：

export function ViteCodeInspectorPlugin(options?: Options) {  
  const record: RecordInfo = {  
    port: 0,  
    entry: '',  
    nextJsEntry: '',  
    ssrEntry: '',  
  };  
  return {  
    name: PluginName,  
	// ... 省略 apply 逻辑
    async resolveId(id) {  
      // 返回客户端注入的虚拟模块 id
      if (id === ViteVirtualModule_Client) {  
        return `\0${ViteVirtualModule_Client}`;  
      }  
      return null;  
    },  
    load(id) {
	  // 注入虚拟模块中的客户端代码
      if (id === `\0${ViteVirtualModule_Client}`) {  
        return getClientInjectCode(record.port, options);  
      }  
      return null;  
    },  
    async transform(code, id) {  
      if (id.match('node_modules')) {  
        return code;  
      }  
  
      // start server and inject client code to entry file  
      code = await getCodeWithWebComponent(options, id, code, record);  
  
      // ... 省略 jsx 与 svelte 等逻辑
  
      // vue  
      const isVue =  
        filePath.endsWith('.vue') &&  
        params.get('type') !== 'style' &&  
        params.get('raw') === null;  
      if (isVue) {  
        return transformCode({ content: code, filePath, fileType: 'vue' });  
      }  
    
      return code;  
    },  
  };  
}

虚拟模块

code-inspector 利用 vite 插件的虚拟模块添加了客户端的逻辑：load 函数 与 resolveId 部分

resolveId 钩子会在解析入口文件 和 遇到尚未加载解析的 id 时都会被调用，当遇到尚未加载的 id 时会调用 load 钩子。

load 钩子会返回一个虚拟模块代码，包含了整个客户端的逻辑。

transform 钩子每当解析到一个依赖文件时触发，同时中可以对源码进行修改，所以在这个阶段可以注入 import 虚拟模块的逻辑，当遇到没有加载模块时会触发 resolveId 钩子完成整个注入逻辑。

注入客户端代码

注入逻辑在 transform 中的 getCodeWithWebComponent 函数中。

export async function getCodeWithWebComponent(  
  options: CodeOptions,  
  file: string,  
  code: string,  
  record: RecordInfo  
) {  
  // start server  
  await startServer(options, record);  
  //....省略其他逻辑
  recordNormalEntry(record, file);  
  //....省略其他逻辑
  
  // 注入 web component 组件代码  
  if (  
    (isJsTypeFile(file) &&  
      [record.entry, record.nextJsEntry, record.ssrEntry].includes(  
        getFilenameWithoutExt(file)  
      )) ||  
    file === AstroToolbarFile  
  ) {  
    if (options.bundler === 'vite') {  
      code = `import '${ViteVirtualModule_Client}';\n${code}`;  
    } else {  
      const clientCode = getClientInjectCode(record.port, {  
        ...(options || {}),  
      });  
      code = `${code}\n${clientCode}`;  
    }  
  }  
  return code;  
}

这个方法同时调用了 startServer 启用了 code-inspector 的后端接口服务

recordNormalEntry 会判断是否是入口文件，判断逻辑也很简单，直接通过判断是否是 js 文件和 record.entry 是否为空，当满足条件时将 record.entry 设置为这个文件名。

同样，底下的注入 web component 逻辑也是一样，判断是否是入口文件，当是入口文件时在文件头部加入 import '${ViteVirtualModule_Client}';\n${code} 使 vite 会加载虚拟模块完成 web component 的注入。

注入元素属性

transformCode 方法根据不同的框架进行了调用，我们这里直接看 transformVue 方法。

通过 @vue/compiler-dom 的 parse 方法将 vue 源码解析成 ast , 同时使用 transform 方法遍历所有 html 元素（包括 vue 组件 tag）, 然后使用 MagicString 对源码进行修改：往元素上添加一个包含 文件路径、行号、列号等信息的属性。

import { parse, transform } from '@vue/compiler-dom';
//....省略其他导入

export function transformVue(content: string, filePath: string) {  
  const s = new MagicString(content);  
  
  const ast = parse(content, {  
    comments: true,  
  });  
  
  transform(ast, {  
    nodeTransforms: [  
      ((node: TemplateChildNode) => {  
        console.log(node)  
        if (  
          !node.loc.source.includes(PathName) &&  
          node.type === VueElementType &&  
          escapeTags.indexOf(node.tag.toLowerCase()) === -1  
        ) {  
          // 向 dom 上添加一个带有 filepath/row/column 的属性  
          const insertPosition = node.loc.start.offset + node.tag.length + 1;  
          const { line, column } = node.loc.start;  
          const addition = ` ${PathName}="${filePath}:${line}:${column}:${  
            node.tag  
          }"${node.props.length ? ' ' : ''}`;  
  
          s.prependLeft(insertPosition, addition);  
        }  
      }) as NodeTransform,  
    ],  
  });  
  
  return s.toString();  
}

启用服务

startServer 调用了 createServer 方法，同时判断了是否已经创建过了服务，避免重复创建。

export function createServer(callback: (port: number) => any, options?: CodeOptions) {  
  const server = http.createServer((req: any, res: any) => {  
    // 收到请求唤醒vscode  
    const params = new URLSearchParams(req.url.slice(1));  
    const file = decodeURIComponent(params.get('file') as string);  
    const line = Number(params.get('line'));  
    const column = Number(params.get('column'));  
    res.writeHead(200, {  
      'Access-Control-Allow-Origin': '*',  
      'Access-Control-Allow-Methods': '*',  
      'Access-Control-Allow-Headers': '*',  
      'Access-Control-Allow-Private-Network': 'true',  
    });  
    res.end('ok');  
    // 调用 hooks    
    options?.hooks?.afterInspectRequest?.(options, { file, line, column });  
    // 打开 IDE    
    launchEditor(file, line, column, options?.editor, options?.openIn, options?.pathFormat);  
      
  });

上面 createServer 逻辑比较简单，通过 http.createServer 创建了一个服务，同时监听当前端口请求，当遇到请求时调用 lunchEditor 打开编辑器。

打开编辑器

这里就不看源码了，打开编辑器主要使用 nodejs 的 child_process.spawn 调用编辑器，同时根据编辑器的要求传入参数。

以下是 macOS 下打开 webstrom 并定位到指定位置的示例代码：

import child_process from 'child_process';

const webstormPath = '/Applications/WebStorm.app/Contents/MacOS/webstorm'
const line = '3'
const column = '10'
const filePath = '/Users/ziyang/.npmrc'

child_process.spawn(webstormPath, ['--line', line, '--column', column, filePath]);

需要注意的是，不同的平台（win, mac）路径和调用方式是不一样的，其次不同的编辑器参数也不一样，所以 code-inspector 做了很多兼容工作。

客户端逻辑

客户端主要是通过 lit 库实现了一个 web component，代码量比较大，我们就不细看了，这里主要看一个请求逻辑。

// 请求本地服务端，打开vscode  
trackCode = () => {  
  if (this.locate) {  
    const file = encodeURIComponent(this.element.path);  
    const url = `http://localhost:${this.port}/?file=${file}&line=${this.element.line}&column=${this.element.column}`;  
    // 通过img方式发送请求，防止类似企业微信侧边栏等内置浏览器拦截逻辑  
    const img = document.createElement('img');  
    img.src = url;  
  }  
  if (this.copy) {  
    const path = formatOpenPath(  
      this.element.path,  
      String(this.element.line),  
      String(this.element.column),  
      this.copy  
    );  
    this.copyToClipboard(path[0]);  
  }  
};

这里没有使用 xhr 或者 fetch 的方式请求，而是直接通过 img.src 的方式进行请求。

结语

通过学习 code-inspector 的源码，收获还是很多的。在这个过程中，我还特意研究了 pnpm 的 monorepo 配置、vite 插件开发流程、magic-string 库的使用等多个方面的技术。

当我准备本文时，发现原作者已在掘金发布了一篇功能介绍和原理解析的文章，里面的内容更加细致，是非常好的学习参考资料，链接放在文末。

相关连接

子洋丶
关注
  • 8
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Code Inspection
Maybesky的专栏
02-23 2718
从这个release开始，我所在的团队会对每一名developer的代码，也就是产品代码，在正式check-in之前进行code inspection。要求开发团队和peer test参加，人员控制在7-8名以内。我作为一名SDET，参加了我peer developer代码部分的inspection。一般分成三个阶段：Preparation meeting：代码的撰写者进行的准备会议，告诉
页面开发提效的神器：自动打开 IDE 并将光标定位至 DOM 的源代码位置
最新发布
weixin_38103152的博客
06-18 217
在webpack和vite中从浏览器定位至 DOM 的源代码位置
探索未来开发新可能：code-inspector-plugin
gitblog_00088的博客
05-18 446
探索未来开发新可能：code-inspector-plugin 项目地址:https://gitcode.com/zh-lx/code-inspector 一个全新的开发者工具已经来临，它将彻底改变我们对前端代码调试的理解——code-inspector-plugin。这是一个创新性的浏览器插件，让你只需点击网页元素就能直接在代码编辑器中定位到对应代码，极大地提升了工作效率。 项目介绍 code-...
Code Inspector：点击页面元素自动定位到代码
彭世瑜的博客
09-07 893
Code Inspector是一个开发提效的神器点击页面上的 DOM 元素，它能自动打开 IDE 并定位到 DOM 对应源代码位置文档。
ABAP Code Inspector那些隐藏的功能，您都知道吗？
cnmik42448的专栏
08-19 613
最近有粉丝在后台给我留言，说新知识太多，“学不动了”。所谓温故而知新，今天我们就来重温下ABAP里的Code Inspector的用法。 2015年6月，我在SAP社区上写了一篇博客，介绍了ABAP Cod...
只需要点击页面上的元素，就能够自动打开 vscode 定位到源代码，支持多框架！...
程序员成长指北
01-29 1272
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号 回复1，加入高级Node交流群背景及相关信息不知道你是否遇到过产品或者测试给你一个页面让你改一点东西，你却找不到页面源代码在哪里的场景？对于一些大型项目，文件数量多、文件层级深、代码行数多，查找一个页面上组件对应的源代码位置，往往需要花费大量时间。为了解决这个问题，我开发了 code-inspector-plugin 插件，...
unity插件Odin - Inspector and Serializer
03-29
Odin - Inspector and Serializer 2.1.13.unitypackage Odin - Inspector and Serializer 3.0.13.unitypackage Odin Inspector 3.0.1.unitypackage Odin Inspector and Serializer 3.1.10.unitypackage
Appium-Inspector-mac-2021.9.2.dmg
12-22
Appium Inspector，mac版，appium1.22版本后，Appium Inspector需要单独下载安装。官网下载网络不稳定，特再次储存资源，诸位可用
Appium-Inspector-windows-2022.5.4
06-24
app自动化测试，appium Inspector。在github上下载了几百遍，今天终于下载成功了。太难了！有需要下载的，直接下载，这下方便多了。
code-inspector-ai
06-15
Code-Inspector-AI 人工智能检查和评论您产生的代码的概念证明。安装您只需要确保您的计算机上安装了node.js用法要启动检查器，请在 node.js 命令行终端中，进入服务器目录并执行以下操作： node server/main.js
ng-inspector.zip
07-31
《Angular框架开发中的神器——ng-inspector》 在Angular框架的开发过程中，高效且精确的调试工具至关重要。ng-inspector正是一款专为Angular开发者量身定制的浏览器插件，尤其适用于谷歌浏览器。这款插件的存在，...
code inspector
ABAP成长之路
11-25 899
待定
开发环境点击页面可以定位到 IDE 代码
m0_51479322的博客
06-19 354
点击页面上的元素，能够自动打开你的代码编辑器并将光标定位到元素对应的代码位置。
yarn run serve报错Error: Cannot find module ‘@vue/cli-plugin-babel‘ 的解决办法
Spring Boot-Common On With You
02-27 1万+
关于这个问题，是在构建前端工程的时候遇到的，项目构建完成后，“yarn run serve”启动项目时，出现的问题：“ Error: Cannot find module ‘@vue/cli-plugin-babel‘ ”如下图：具体信息如下： npm install -g @vue/cli-plugin-babel@5.0.8
利用idea的code inspect功能进行代码静态分析
weixin_30702887的博客
05-03 1072
利用idea、phpstorm系列的ide的code inspect功能可以开发出适用于各种编程语言的代码静态分析工具。这个功能大家可以自己实现扩展规则，规则也使用了visitor模式，规则里对关心的语法树节点处理即可。 一个inspect的插件代码参考 git@github.com:ferrius/php-attention-plugin.git phpstorm插件开发，使用ide...
Error: Cannot find module ‘×××××ב报错，找不到依赖问题解决方案
热门推荐
baibaino的博客
02-08 1万+
Error: Cannot find module '××××××'报错，找不到依赖问题解决方案，两种能解决大部分问题
点击页面元素，这个Vite插件竟然帮我打开了Vue组件文件！超级好用！
u012384510的博客
04-01 1647
大家好，我是若川。持续组织了8个月源码共读活动，感兴趣的可以点此加我微信 ruochuan12参与，每周大家一起学习200行左右的源码，共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》包含20余篇源码文章。历史面试系列前言这两天肝了个Vite插件,本文主要跟大家分享一下它的功能和实现思路.如果你觉得它对你有帮助,请给一个star支持作者 ????.介绍vite-pl...
metro-inspector-proxy抽离
05-26
`metro-inspector-proxy`是React Native应用程序的一个重要组件，它允许开发人员在Chrome DevTools中调试应用程序。将其抽离出来的原因可能是想在不同的环境中使用，或者希望自定义其行为。 要将`metro-inspector-proxy`抽离出来，您需要按照以下步骤操作： 1. 将`metro-inspector-proxy`包及其依赖项添加到您的项目中。 ``` npm install metro-inspector-proxy ``` 2. 创建一个新的`MetroInspectorProxy`实例。 ```javascript const MetroInspectorProxy = require('metro-inspector-proxy'); const metroInspectorProxy = new MetroInspectorProxy({ projectRoot: '/path/to/project', watchFolders: ['/path/to/project'], port: 8081, }); ``` 3. 启动`MetroInspectorProxy`实例。 ```javascript metroInspectorProxy.start(); ``` 4. 可以通过`MetroInspectorProxy`实例的`wsProxy`属性获得WebSocket代理。 ```javascript const wsProxy = metroInspectorProxy.wsProxy; ``` 现在，您可以在任何需要的地方使用`wsProxy`来创建WebSocket连接，以便在Chrome DevTools中调试React Native应用程序。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值