🚀 在 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: 啟動 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。

  • Commit 變更。

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

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

限制

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

  • 不支援 Socket。
  • 不支援執行緒。因此，不支援非同步。
  • 不支援 pip。
  • 不支援原生 Python 模組。

致謝

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

意見反應

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

02/06/2025