除了 SAP 公司官方支援的 WebIDE，SAP Business Application Studio 這些執行在瀏覽器端的開發工具，可以進行 SAP UI5 的開發之外，我們還可以使用 StackBlitz 這款線上 web 應用的開發工具，來開發 SAP UI5 應用。

我這裡做了一個例子，大家可以通過這個連結 訪問。

我們開啟這個頁面，觀察到的螢幕可以分成四個區域，下面逐一介紹。

用過 Visual Studio Code 這款編輯器的朋友們不難發現，這其實就是 Visual Studio Code 的瀏覽器版本。

(1) 顯示一個檔案樹結構，包含了該 SAP UI5 工程的所有資原始檔，包含 xml 檢視實現和控制器實現(JavaScript 程式碼)。Jerry 提供的這個例子，SAP UI5 應用採取了 ui5 cli 這個開源的構建工具來構建和啟動，而 ui5 cli 基於 Node.js，因此上圖還能觀察到 ui5 cli 的配置檔案 ui5.yaml 和 Node.js 專案所需的 package.json 檔案。

(2) StackBlitz 線上開發環境裡編輯檔案的主要區域。

(3) StackBlitz 的終端控制檯，我們可以在此處執行各種命令列。
(4) SAP UI5 應用一旦啟動後，渲染的頁面會出現在這個區域。

目前上圖區域 4 顯示的是 botting webcontainer. 在瀏覽器編輯環境的上下文裡，Web Container 技術能夠讓 Node.js 應用在瀏覽器環境裡以原生方式執行。

我們在區域 3 的終端裡，輸入命令列 ui5 serve:

首先會看到 StackBlitz 自動去下載 ui5 cli 的 package，相當於為我們執行了 npm install：

緊接著， 區域 4 顯示了當前這個 SAP UI5 工程的所有資料夾列表。

我們將這個 url 拷貝下來：
https://jerry-ui5-app--8080.local.webcontainer.io

新開一個瀏覽器視窗，在末尾新增上 index.html，就可以訪問到這個 SAP UI5 應用了：

https://jerry-ui5-app--8080.local.webcontainer.io/index.html

關於執行在 StackBlitz 上的 SAP UI5 應用的除錯，同執行在其他環境的並無區別，ctrl+alt+shift+p，在彈出的對話方塊裡啟用除錯模式，重新整理瀏覽器，即可載入除錯版本的 JavaScript 原始碼進行除錯。

更多Jerry的原創文章，盡在："汪子熙":