在前端开发中，我们常常需要使用调试工具来帮助我们排查问题。其中一种常用的调试工具是 Jarvis，它可以帮助我们查看页面渲染情况、网络请求状态等。而 rc-jarvis 是一个基于 Jarvis 的 npm 包，它提供了更加简单易用的接口，方便我们在项目中使用。
安装
在使用 rc-jarvis 之前，我们需要先安装它。可以使用 npm 进行安装，命令如下：
npm install rc-jarvis --save-dev
使用
rc-jarvis 提供了一组简单易用的接口，可以方便我们在项目中使用。接下来，我们需要在项目中引入 rc-jarvis：
import jarvis from 'rc-jarvis';
1. 添加调试点
为了能够在 Jarvis 中看到页面渲染情况，我们需要添加调试点。rc-jarvis 提供了两种方式添加调试点：通过参数调用和手动添加。
通过参数调用
在项目中，我们可以通过传递一个名为 __jarvis__ 的参数，来在指定的元素上添加调试点。例如：
<div class="container" __jarvis__></div>
在这个例子中，我们在具有 container class 的 div 元素上添加了一个调试点。
手动添加
在某些情况下，我们可能需要手动添加调试点。rc-jarvis 也提供了相关的接口：
const { addDebugPoint } = jarvis;
addDebugPoint({
target: document.querySelector('.container'),
name: 'container'
});以上代码会向具有 container class 的 div 元素上添加一个调试点。
2. 添加标签
在进行调试时，我们需要对不同的请求或事件添加标签，以便在 Jarvis 中更好地对它们进行区分。rc-jarvis 提供了以下接口来操作标签：
const { addTag, removeTag } = jarvis;
// 添加标签
addTag('request_start', '网络请求开始');
// 删除标签
removeTag('request_start');以上代码会向标签列表中添加一个名为 request_start 的标签，代表网络请求开始。同时，我们也可以使用 removeTag 来移除该标签。
3. 添加请求日志
在进行网络请求时，我们可以通过 rc-jarvis 来添加页面渲染和网络请求方面的日志：
const { addReqLog } = jarvis;
addReqLog({
name: '请求名称',
url: '请求地址',
startTag: 'request_start',
endTag: 'request_end'
});以上代码会向 rc-jarvis 内部添加一条请求日志，在 Jarvis 中可以查看该请求的执行时间、耗时等信息。
示例代码
下面是一个使用 rc-jarvis 的示例代码，它演示了添加调试点、添加标签、添加请求日志等操作：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- ----------
-------
------
---- ----------------- -----------------
------- ------------- -------------------------------------
------- -------------------------
-------
--------- -------------------- ---- -------
------ ------ ---- ------------
----- --------- - ----- -- -- -
-- ------
---------------------------- ----------
--- -
-- ----
----- --- - ----- ------------------------------------------------------
----- ---- - ----- -----------
-- ------
------------------
----- -------
---- -----------------------------------------------
--------- --------------
------- -----------
---
------------------
- ----- ------- -
-------------------
-
-- ------
-------------------------- ----------
--
-- -----
----------------------
------- -------------------------------------
----- -----------
---总结
rc-jarvis 是一款非常好用的 Jarvis npm 包，能够帮助我们更加方便地进行前端调试。通过使用 rc-jarvis，我们可以快速添加调试点、添加标签、添加请求日志等操作，并可以在 Jarvis 中查看页面渲染和网络请求等信息，以方便我们找出问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600576ac81e8991b448eaabd