布景

在前端项目开发过程中，快速定位 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>
 );

终究效果：

尽管看起来不错，但从实际应用角度来看，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-react 的 development 字段：

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

注意：如果你运用的是 create-react-app、create-next-app 等高级脚手架，那么你无需进行任何修正，由于这些脚手架现已帮你处理了这个问题。

终究效果：

LocatorJS 也能够作为 npm 包引进，有爱好的同学能够自行查看。

总结

LocatorJS 供给了点击浏览器中的 DOM 元素后直接跳转至源码的功用。相较于 click-to-component，LocatorJS 以浏览器插件的形式实现了这一功用，无需在项目中引进额外的 npm 包，且支撑更多的前端结构。