在網頁上執行並偵錯 Python

我們很高興宣佈在網頁上執行 Python 程式碼的實驗性支援。若要試用，請從 Marketplace 安裝最新預覽版的 Experimental - Python for the Web 擴充功能。這項工作基於目前正在開發中的 Python WASM。若要進一步了解其運作方式及目前的進度，您可以閱讀將 Python 編譯為 WebAssembly (WASM)。

先決條件

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

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

執行 Hello World

下方的螢幕截圖展示了如何在瀏覽器中執行一個簡單的 Python 程式。該程式由儲存在本機檔案系統中的兩個檔案 app.py 與 hello.py 所組成。

啟動 REPL

此擴充功能內建了 Python REPL。若要啟用它，請執行指令 Python WASM: Start REPL。

偵錯

此功能支援在網頁上對 Python 檔案進行偵錯，其 UI 與 VS Code Desktop 的偵錯功能相同。目前支援的功能包括：

• 設定中斷點 (Breakpoints)
• 逐步執行 (Step into) 與跳出函式 (Step out)
• 跨模組偵錯
• 在偵錯主控台 (Debug Console) 中評估變數
• 在整合終端機 (Integrated Terminal) 中偵錯程式

下方的螢幕截圖展示了一個運作中的偵錯工作階段。這些檔案直接託管在 GitHub 的範例儲存庫中。

建立您自己的 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。
• 不支援執行緒 (Thread)。因此，也不支援非同步 (async)。
• 不支援 pip。
• 不支援原生 Python 模組。

致謝

如果沒有 Python 社群開發並維護 CPython 所需的 WASM 檔案，這項工作將無法完成，在此表達誠摯感謝。

意見回饋

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