前言
在现代 web 开发中，使用 npm 包已经成为了必不可少的一部分。herschel 是一个可视化调试工具，使用 npm 包可以非常方便的引入到你的项目中来。本文将会详细讲解如何使用 herschel，希望可以对前端开发者有帮助。
什么是 herschel
herschel 是一个基于 Redux 开发的可视化调试工具，它可以帮助你方便地查看 state 和 action，以及 state 的变更情况。使用 herschel 可以加快调试速度，提高开发效率。
如何使用 herschel
安装
在使用 herschel 之前，需要先安装它。可以通过 npm 来安装：
npm install herschel --save-dev
安装成功后，就可以在代码中使用 herschel 了。
引入
在使用 herschel 前需要在代码中引入它，并配置相关参数。在 Redux 的 createStore 方法中添加 enhancer 参数即可：
import { createStore } from 'redux';
import { devToolsEnhancer } from 'herschel';
const store = createStore(reducer, initialStore, devToolsEnhancer());配置
除了添加 enhancer 参数以外，还可以配置其他的参数。以下列出了一些常用的配置项：
- actionSanitizer: action 转换器，可以对 action 进行处理
- stateSanitizer: state 转换器，可以对 state 进行处理
- name: herschel 的名称，用于显示在浏览器的扩展名称上
- hostname: herschel 监听的主机地址
示例代码如下：
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - ---------------- - ---- -----------
----- ------ - -
---------------- -------- -- --
----------
----- ------------------
---
--------------- ------- -- --
---------
-------- ---
---
----- --- ----------
--------- ----------------
-
----- ----- - -------------------- ------------- --------------------------查看调试信息
配置完成后，可以打开浏览器的开发者工具面板，在其中可以找到 显示控制台 部分，点击 单击添加新选项 按钮，选择 Select State ，然后在控制台中就可以查看具体的调试信息了。
结论
herschel 是一个非常实用的可视化调试工具，可以帮助前端开发者更加快速地进行调试、修复 bug，提高工作效率。这篇文章详细讲解了如何使用 herschel，希望可以对正在使用或者将要使用 herschel 的开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560aa81e8991b448dee9b