僅適用於 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 等）的開發。