背景

在前端项目开发过程中,快速定位 DOM 元素对应的源码对于开发者来说非常重要。通常,开发者可能会根据 DOM 元素的 class 名称或文案来查找。然而,LocatorJS 作为一款优秀的工具,能够帮助您快速定位源码。

了解 click-to-component

在介绍 LocatorJS 之前,我们先来了解一下 click-to-component 这个 npm 包。它的功能是:通过点击浏览器中的 React 组件,就能在 VSCode 中打开对应的源代码。

本文重点在于 LocatorJS,因此仅介绍在 Create React App 中使用 click-to-component 的方法。其他使用方法可参考其官方文档

首先,在项目中安装 click-to-component

# 可以选择使用 yarn 或 pnpm 安装
npm install click-to-react-component

然后在代码中引入 click-to-component

+import { ClickToComponent } from 'click-to-react-component';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
@@ -8,7 +7,6 @@ import reportWebVitals from './reportWebVitals';
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
+    <ClickToComponent />
     <App />
   </React.StrictMode>
 );

最终效果:

cra

尽管看起来不错,但从实际应用角度来看,click-to-component 存在一些局限:

  1. 仅支持 React
  2. 需要在项目中引入 npm

接下来我们将介绍 LocatorJS 如何解决这些问题。

LocatorJS 的优势

产品形态:浏览器插件,支持 Chrome (包括基于 Chromium 项目的 Edge, Opera 等) 和 Firefox

前端框架支持:React, SolidJS, Preact, Svelte(实验性支持), Vue(实验性支持)

显然,LocatorJS 通过浏览器插件解决了前面提到的问题,并支持更多前端框架。

下面我们将介绍如何使用 LocatorJS。

如何使用 LocatorJS

以 React 项目为例,首先我们需要安装 LocatorJS 的浏览器插件

安装完成后,我们需要在项目中修改 @babel/preset-reactdevelopment 字段:

{
  "presets": [
    [
      "@babel/preset-react",
      {
        // 根据你的项目实际情况修改
        "development": process.env.NODE_ENV === "development"
      }
    ]
  ]
}

注意:如果你使用的是 create-react-appcreate-next-app 等高级脚手架,那么你无需进行任何修改,因为这些脚手架已经帮你处理了这个问题。

最终效果:

demo

LocatorJS 也可以作为 npm 包引入,有兴趣的同学可以自行查看

总结

LocatorJS 提供了点击浏览器中的 DOM 元素后直接跳转至源码的功能。相较于 click-to-component,LocatorJS 以浏览器插件的形式实现了这一功能,无需在项目中引入额外的 npm 包,且支持更多的前端框架。

本作品系原创,采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议