什么是 ocular-dev-tools
ocular-dev-tools 是一个基于 React 和 Redux 的开发工具包，为前端开发人员提供了一系列开箱即用的组件和便捷的开发工具，如时间调试器、Redux 状态查看器等。
安装
使用 npm 安装最新版本：
npm install --save ocular-dev-tools
使用示例
下面我们演示如何在一个简单的 React 项目中使用 ocular-dev-tools。
首先，假定你已经有一个基于 Create React App 创建的项目，并且安装了 ocular-dev-tools。现在我们需要在项目中引入 ocular-dev-tools：
-- -------------------- ---- -------
-- ------------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
------ - -------------- - ---- -------------------
------ -------- ---- -------------
------ --- ---- -------------------
----- ----- - ----------------------
----------------
--------- --------------
-----
---- --
--------------- --
------
------------
-------------------------------
--
这里我们在 Provider 组件中加入了一个 div 包裹 App 组件和 OcularDevTools 组件，以便在浏览器中看到这两个组件。
现在运行项目，你就能在浏览器中看到 ocular-dev-tools 的调试面板了。接下来我们讲解如何使用其中的一些功能。
时间调试器
时间调试器是 ocular-dev-tools 的一个强大功能，可以帮助开发人员精确地测量代码的性能，识别卡顿或延迟等问题。
使用时间调试器很简单，只需要引入 'ocular-dev-tools/lib/devtools/time-travel' 模块，并在需要调试的代码块前后嵌入一段记录时间的代码即可。下面是一个示例：
-- -------------------- ---- -------
-- -----------------------------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - ------ ---- - ---- --------------------------------------------
----- ----------- ------- --------- -
----------- - -- -- -
--------------------- -- ------
-- -------
-------------------- -- --------------
-
-------- -
------ -
-----
------- ----------------------------------------
------
--
-
-
------ ------- -----------------------
在这个代码中，我们在 handleClick 方法中加入了 start 和 stop 函数，用于记录代码块的开始时间和结束时间。
在浏览器中打开 ocular-dev-tools 的面板，你将会看到一个名为 Time Travel 的标签页。在这个标签页中，你可以看到每个记录了时间的代码块的耗时情况。
总结
本文介绍了如何安装和使用 ocular-dev-tools，特别介绍了其时间调试器的功能。希望对前端开发人员能有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f20bf87403f2923b035c668