在前端开发中，经常需要在浏览器中测试代码、进行调试。而在浏览器中调试 JavaScript 代码常常比在本地运行 JavaScript 更加直观。本文将介绍一个非常有用的 npm 包 replio ，它可以让你在浏览器中测试代码，并且可以与你的代码库集成。
安装
首先，你需要在你的项目中安装 replio 。打开终端，进入你的项目所在的目录，然后输入以下命令：
npm install --save-dev replio
这将在你的项目中安装 replio 包。
基本使用
使用 replio 是非常简单的。首先，在你的代码中引入 replio 模块：
const replio = require('replio');然后，在需要测试的代码块之前，插入一个插入点：
const result = replio.insertPoint();
这将在代码中插入一个点，表示这个地方是可以测试的。
接下来，运行你的代码，直到它执行到插入点：
console.log('hello');
const result = replio.insertPoint();
console.log('world');然后，在代码中执行以下命令：
replio.open(result);
这将在浏览器中打开一个新标签页，并在其中加载一个 REPL 页面，你可以在其中进行测试。
集成
replio 还提供了一个非常有用的集成功能，可以与你的代码库集成。这是通过在代码中插入一个特殊的标记完成的：
// #replio
console.log('hello world');这告诉 replio 包，这是一个可以在浏览器中测试的代码块。
接下来，在浏览器中打开 REPL 页面，点击页面右上角的「Connect」按钮。该按钮将提示你在终端中用 shell 连接到 REPL 服务器。这将允许你在终端中直接执行与 REPL 页面相同的代码块。
$ npx replio connect
现在，在你的 shell 中，你可以执行以下命令：
$ console.log('hello world');这将在 REPL 页面中打印出 "hello world" 。
示例代码
你可以通过以下示例代码来进一步了解 replio 的使用。
-- -------------------- ---- ------- ----- ------ - ------------------ -------- ------ -- - ------ - - -- - ----- ------ - --------------------- ---------------- --- -- - --- - ------ ------------------ ---- --------------------
这个示例代码将在浏览器中打开一个新的 REPL 页面。在页面中，你可以测试 add 函数的返回值。例如，你可以执行以下命令：
add(1, 2)
这将在页面中打印出 3 。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005550881e8991b448d23cd