🚀 在 VS Code 中免費取得 ！

在網頁中執行和偵錯 Python

我們很高興宣布實驗性支援在網頁上執行 Python 程式碼。若要試用，請從 Marketplace 安裝最新預先發行版本的 Experimental - Python for the Web 擴充功能。這項工作是基於 Python 中的 WASM，目前仍在開發中。若要深入瞭解其運作方式和持續進展，您可以閱讀 將 Python 編譯為 WebAssembly (WASM)。

先決條件

使用此擴充功能需要以下先決條件

  • 您需要安裝 GitHub Repositories 擴充功能。
  • 您需要使用 GitHub 進行驗證。
  • 您需要使用支援 跨來源隔離 的瀏覽器。此擴充功能已在 Microsoft Edge 和 Google Chrome 瀏覽器上測試過。
  • 您需要使用 適用於網頁的 VS Code 的 insider 版本 (例如 https://insiders.vscode.dev/)
  • 您的原始碼必須託管在您的本機檔案系統或透過 GitHub Repositories 擴充功能存取的 GitHub 儲存庫中。
  • 當啟動 適用於網頁的 VS Code 時，您需要在 URL 的結尾新增以下查詢參數：?vscode-coi=。

執行 Hello World

以下螢幕擷取畫面顯示在瀏覽器中執行簡單的 Python 程式。此程式包含兩個檔案 app.py 和 hello.py，儲存在本機檔案系統上。

Execution of Python code stored on a local disk

啟動 REPL

此擴充功能隨附整合的 Python REPL。若要啟動它，請執行命令 Python WASM: Start REPL。

Start Python Repl

偵錯

支援在網頁上偵錯 Python 檔案，並且它使用與 VS Code Desktop 偵錯 相同的 UI。目前支援的功能包括

  • 設定中斷點
  • 逐步進入和跳出函式
  • 跨模組偵錯
  • 在偵錯主控台中評估變數
  • 在整合式終端機中偵錯程式

以下螢幕擷取畫面顯示作用中的偵錯工作階段。檔案直接託管在此 範例儲存庫 的 GitHub 上。

Debugging a Python program

建立您自己的 Python 環境

此擴充功能使用基於 CPython WebAssembly 建置 的預先設定 Python 環境。使用的建置版本為 Python-3.11.0-wasm32-wasi-16.zip。

您可以按照以下步驟建立自己的 Python 環境，包括原始碼 wheel Python 套件

  • 建立新的 GitHub 儲存庫。

  • 從 cpython-wasm-test/releases 下載 wasm-wasi-16 建置版本，並將其解壓縮到儲存庫的根目錄。

  • 若要新增原始碼 wheel 套件，請執行以下操作

    • 在根目錄中建立 site-packages 資料夾。
    • 使用以下命令安裝套件 pip install my_package --target ./site-packages。請注意，您需要在您的作業系統中安裝 Python，包括 pip。

  • 提交變更。

  • 變更 python.wasm.runtime 設定以指向您的 GitHub 儲存庫。例如

    {
  "python.wasm.runtime": "https://github.com/dbaeumer/python-3.11.0"
}

限制

當在本機電腦上執行原始碼時，「適用於網頁的 Python」支援並未提供所有可用的功能。Python 直譯器的主要限制包括

  • 不支援 socket。
  • 不支援執行緒。因此，不支援 async。
  • 不支援 pip。
  • 不支援原生 Python 模組。

致謝

若沒有 Python 社群 (他們正在建置和維護 CPython 的必要 WASM 檔案) 的支援，這項工作就不可能完成。

意見反應

如果您在使用「適用於網頁的 Python」擴充功能時遇到問題，可以在 vscode-python-web-wasm 儲存庫中輸入問題。

04/03/2025