如果你是一个前端开发者，并使用redux来管理存储，那么你可能会快速的发现，Store中的数据会非常复杂，并且很难阅读。redux-devtools-log-monitor-filterable是一个npm包，可以帮助我们解决这个问题，同时也可以帮助我们更好地了解调试细节信息。在本教程中，我们将介绍如何使用这个npm包以及其指导意义。
安装
你可以通过npm工具下载redux-devtools-log-monitor-filterable包
npm install --save redux-devtools-log-monitor-filterable
使用
安装完成之后，我们需要做的就是在DevTools中添加这个插件。具体步骤如下：
首先，在你的React项目中安装DevTools
npm install --save-dev redux-devtools
接下来，修改你的Store，添加对DevTools的支持。这样可以在DevTools中查看你的actions、状态以及跟踪代码执行情况。
-- -------------------- ---- -------
------ - ------------ ---------------- ------- - ---- --------
------ - ---------------- - ---- ---------------------------
------ -------- ---- -------------
----- ----- - ------------
---------
--------
----------------------------
------------------
--
--
------ ------- ------最后，我们需要添加redux-devtools-log-monitor-filterable插件。在DevTools主界面中，点击右上角的“Settings”按钮，顶部将会出现“Monitor”选项卡，然后点击“Monitor”的下拉列表选项，选择“Log Monitor(Filterable)”。
之后，你就可以通过搜索功能查找你感兴趣的部分，查看代码执行细节和调试详情。
示例代码
下面是一个简单的Redux Store示例:
import { createStore } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);
export default store;通过在Store上添加redux-devtools-log-monitor-filterable插件，你可以轻松地查找错误和调试详情，如下所示：
总结
使用redux-devtools-log-monitor-filterable包，你可以更好地了解你的应用在调试过程中的状态，并有更好的体验。本文提供了安装和使用的方法，希望对您有帮助，并为您的开发工作提供指导。
参考文献
https://www.npmjs.com/package/redux-devtools-log-monitor-filterable
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b7c