Scribbler：一个在线运行和测试 JavaScript 代码的笔记本工具

Scribbler 是一个在浏览器里直接运行的 JavaScript 笔记本工具。 它为开发者、工程师和科研人员提供了一个简单的在线界面，用来实验和运行 JavaScript 代码。 这个工具是开源的，并且免费使用，不需要注册登录。 它的主要特点是轻量化，无需安装 Node.js 或其它复杂的环境，下载源码后放到任何静态网页服务器上就能运行。 用户可以在 Scribbler 中创建包含代码和文档的单元格，动态加载第三方代码库，并利用集成的图表库进行数据可视化。 同时，它还支持直接与 GitHub 连接，方便用户保存、分享和发布自己的项目。

功能列表

• 无需后端：完全在浏览器中运行，不需要安装 Node.js、npm 或 Python 等后端环境。
• 免费开放：一个开源项目，无需登录或订阅即可免费使用。
• 交互式单元格：用户可以在不同的单元格中编写 JavaScript 代码、HTML 或 Markdown 文档，并立即执行代码查看输出结果。
• 数据可视化：内置了 Plotly.js 等图表库，可以方便地将数组等数据转换成图表。
• 支持第三方库：可以从 CDN 动态加载和使用任何 ES6 格式的第三方 JavaScript 库。
• GitHub 集成：可以直接将笔记本推送到 GitHub 仓库，或从仓库中拉取文件。
• 文件管理：用户可以将笔记本下载为 JSON 格式（.jsnb）的文件，或将输出结果导出为 HTML 文件。
• 跨设备使用：界面设计简洁，能够在桌面和移动设备的现代浏览器上正常工作。

使用帮助

Scribbler 提供了一个无需复杂配置的 JavaScript 代码实验环境。 用户可以直接在网页上编写和运行代码，并立即看到结果，非常适合快速测试想法或学习 JavaScript。

快速上手

你不需要安装任何东西，直接通过浏览器访问官方托管的应用程序即可开始使用：

• 在线应用地址: https://app.scribbler.live/

如果你想离线使用或自己部署，也可以从 GitHub 下载源代码，然后将其放置在任何静态 Web 服务器（例如 Nginx 或通过 npx serve 命令）的目录下运行。

核心界面和操作

Scribbler 的界面由多个“单元格”（Cell）组成，这是它的核心。

1. 单元格类型
   • 代码单元格 (Code Cell)：这是默认的单元格类型，用于编写和执行 JavaScript 代码。
   • 文档单元格 (Doc Cell)：用于编写说明文档，支持 Markdown、HTML 和 CSS 语法。你可以通过单元格右上角菜单中的开关在这两种类型之间切换。
2. 执行单元格
   • 选中一个代码单元格后，点击单元格菜单中的 播放 ► 按钮。
   • 使用快捷键 Cmd+Enter (macOS) 或 Ctrl+Enter (Windows) 也可以执行。
   • 代码的输出结果会立刻显示在该单元格的下方。
3. 单元格管理
   每个单元格右上角的菜单都提供了一组管理工具：
   • 上移 ↑ / 下移 ↓：调整单元格的顺序。
   • 添加新单元格 ✛：在当前单元格下方创建一个新的代码单元格。
   • 删除 ☓：删除当前单元格。

编写和实验代码

Scribbler 内置了一些便捷的函数，简化了常见操作。

• 显示输出: 你可以使用 scrib.show() 函数来输出变量、对象或任何信息，它比 console.log() 更适合在笔记本环境中展示结果。

  scrib.show("Hello World");
  

• 数据可视化: Scribbler 内置了图表库，可以轻松地将数据绘制成图表。例如，使用 range() 函数生成一个数字序列，然后链式调用 .map(Math.sin) 和 .plot() 就可以绘制出一条正弦曲线。

  // 下面这行代码会画出一条正弦函数曲线
  range(0, 10, 0.01).map(Math.sin).plot();
  

• 加载外部库: 你可以从 CDN 加载任何 JavaScript 库进行实验。例如，加载 tensorflow.js 来进行机器学习推理，或加载 brain.js 来训练一个简单的神经网络。

保存和分享

你可以将你的工作成果保存下来或分享给他人。

• 本地保存:
  • 在顶部菜单选择 File -> Save (as .jsnb)，可以将整个笔记本下载为一个 JSON 文件（后缀为 .jsnb）。 这个文件可以之后再上传回 Scribbler 打开。
  • 选择 Download (as .html) 则可以将包含输出结果的整个页面保存为一个 HTML 文件。
• 通过 URL 加载:
  如果你的 .jsnb 文件托管在某个可公开访问的 URL 上（例如 GitHub Gist），你可以通过在 Scribbler 应用网址后面加上 # 和文件链接来直接打开它。
  格式：https://app.scribbler.live/#<你的文件链接>
• 发布到 GitHub:
  Scribbler 提供了将笔记本直接发布到 GitHub 的功能，这需要一个 GitHub Token。
  1. 前往 File -> Git。
  2. 根据提示连接你的 GitHub 账户并提供 Token。
  3. 连接成功后，点击顶部菜单的 Publish 按钮。
  4. 系统会生成三个链接：一个是用于继续编辑的笔记本链接，一个是作为独立应用运行的链接，还有一个是用于嵌入到其他网页的代码片段。

应用场景

1. 学习和实验 JavaScript
   对于初学者来说，Scribbler 提供了一个零配置的沙盒环境。你可以直接在里面练习 JavaScript 语法，测试各种函数和 API，并通过可视化的方式理解代码的执行结果。
2. 科学计算与数据可视化
   工程师和科研人员可以利用 Scribbler 进行复杂的数学计算、系统仿真和数据分析。它支持加载 math.js 等科学计算库，并且内置的图表功能可以方便地将计算结果可视化。
3. AI 和机器学习
   你可以在浏览器中加载 tensorflow.js 或 brain.js 等机器学习库，用来训练简单的模型或运行预训练模型进行推理。 通过结合 HTML 单元格，还可以创建动态交互的 AI 应用案例。
4. 代码原型和 API 测试
   当你需要快速验证一小段代码逻辑或测试某个第三方 API 的返回结果时，Scribbler 是一个理想的工具。你不需要建立一个完整的项目，直接在单元格里编写测试代码即可。

QA

1. Scribbler 和 JSFiddle/Codepen 有什么区别？
   Scribbler 更侧重于数据处理和计算流程，它的多单元格笔记本形式适合创建较长的文档和实验记录，类似于用于数据科学的 Jupyter Notebook。而 JSFiddle 和 Codepen 主要用于测试和分享 HTML、CSS 和 JavaScript 组成的 Web 前端代码片段。
2. 使用 Scribbler 需要付费吗？
   不需要。Scribbler 是一个开源项目，完全免费，并且使用在线版本时也不需要注册账户。
3. 我可以在 Scribbler 中使用 npm 包吗？
   不可以直接使用。Scribbler 运行在浏览器环境，没有 Node.js 和 npm。但你可以通过 CDN 加载那些提供了 UMD 或 ES6 模块格式的 npm 包。
4. 代码是在哪里执行的？安全吗？
   所有的代码都直接在你的本地浏览器中执行，不会发送到任何服务器。 这种纯客户端的运行模式保证了代码和数据的私密性。