仅适用于 JS 文件的 Chrome 调试器

Question

所以。 愚蠢的问题。

我在 chrome 上使用开发人员工具作为我在源选项卡中的 IDE。 我有一个 JS 文件，正在编写一个没有关联的 html/css 文件的程序。 无论如何我可以将调试器用于我的 JS 文件吗？ 具体来说我想进入一个函数

Answer 1

在开发者模式下，选择 Sources 选项卡，然后导航到左侧的 JS 文件。 在右侧面板中，您可以通过按具有真正 js 语句的行号来为任何行添加断点。 然后您可以再次运行您的应用程序以调试您的 js 脚本。

下图是一个例子（选择了assert.js的第33行）。

Answer 2

调试/测试 JS 代码的方法有很多种，Chrome 只是其中之一。

1. 快卡

Quokka.js 是用于快速 JavaScript / TypeScript 原型设计的开发人员生产力工具。 运行时值会在您键入时更新并显示在您的代码旁边。

2. Runkit 笔记本 RunKit 笔记本完全消除了尝试新想法的摩擦。 只需单击一下，您就会拥有一个沙盒 JavaScript 环境，您可以在其中立即切换节点版本、使用每个 npm 模块而无需等待安装，甚至可以将结果可视化。 没有更多的配置，直接编码。

3. Hopa Hopa 是您终端中的零配置 JavaScript/TypeScript 运行程序。

4. JSComplete playground 这是 JavaScript 和 React 的游乐场。 您可以使用它来测试简单的代码或原型想法。 它需要一个理解 ES2015 (ES6) 的现代浏览器。

5. VSCode 扩展 Javascript REPL Javascript REPL 是 Visual Studio Code 的 javascript 游乐场，在您键入时，除了您的代码之外，在日志浏览器或输出通道中，它还具有实时反馈（日志或错误）。 它支持 Javascript、TypeScript、CoffeeScript，可用于 Node.js 项目或前端框架（如 React、Vue、Angular、Svelte 等）的开发。