在 Blockly 核心中進行駭客攻擊或開發外掛程式時,Playground 就是非常實用的工具。它具有預先設定的 Blockly 例項,可用於測試、偵錯或製作原型。在 Google 中,幾乎所有 Blockly 的開發作業都是在 Playground 中進行。以下是示範伺服器上的簡易遊樂場,供您預覽。
核心 Blockly 有 3 種 Playground:簡易、進階和多重。在 Blockly 範例中,通常只會使用進階遊樂場。
必要條件
Blockly 現在使用 Closure 模組系統。基於載入方式,未編譯的 Closure 模組必須從 http:
或 https:
網址擷取,並且無法直接從 file:
網址擷取。因此,如要以未編譯模式載入 Playground,您必須從本機網路伺服器載入該模組。
我們已建立指令碼,可啟動本機伺服器,並載入載入 Blockly 模組所需的所有程式碼。您必須在電腦上安裝 npm,並從 Blockly 的根目錄執行 npm install
,才能安裝所有依附元件。
使用 Internet Explorer
Blockly 目前在程式碼庫中使用進階功能,可能與 Internet Explorer 不相容。在壓縮 (編譯) 的程式碼中,這些功能會轉譯為與 IE 搭配運作,但載入未壓縮的程式碼可能無法運作。如果在 IE 中載入 Playground,即使是透過本機 HTTP 伺服器,Playground 仍會自動載入經過壓縮的 Blockly 程式碼,確保相容性。如要進一步瞭解如何在壓縮模式下測試 Playground 中的變更,請參閱「直接存取 Playground」一節。
Simple Playground
其他兩個 Playground 都是以簡易版 Playground 為基礎。這個畫面會顯示工具箱和工作區,並允許您調整有限數量的設定。
若要開啟 Playground,請執行
npm run start
從 Blockly 根目錄中 請確認沒有其他項目監聽 8080 通訊埠。這個指令會啟動代管 Blockly 模組的伺服器,並自動開啟瀏覽器前往 Playground 頁面。準備關閉 Playground 時,請結束程序 (在 Mac 和 Linux 環境中為 Ctrl-c)。
遊樂場特色:
- 所有程式碼均未壓縮,以便快速開發。
- 所有預設區塊 (部分已淘汰的區塊除外)。
- 所有語言產生器 (JavaScript、Python、PHP、Lua 和 Dart)。
- 序列化和反序列化工作區狀態 (JSON 或 XML)。
- 切換 LTR 和 RTL 版面配置。
- 切換工具箱版面配置。
- 算繪器的壓力測試。
- 在主控台中記錄所有事件。
進階遊樂場
進階 Playground 包含其他功能,讓 Block 偵錯作業更加輕鬆。這也是 Blockly-sample 在所有外掛程式中使用的預設遊樂場。
這個遊樂場包含所有簡易的遊樂場功能,外加:
- 您可以設定其他設定,例如格線大小、縮放/移動控制項、轉譯器、主題等。
- 系統會快取所使用的設定和區塊,並在下次載入 Playground 時自動使用。
- 在同一個視窗中查看每個發電機的輸出內容。
如要啟動 blockly-samples 中任何外掛程式的進階 Playground,請從外掛程式的根目錄執行 npm run
start
。目前一次只能執行一個外掛程式,且使用 3000 號埠。如果您無法啟動外掛程式,請先確定該通訊埠並未監聽任何項目。
如要在核心中啟動進階遊樂場,請從 Blockly 的根目錄執行 npm run start
,然後按一下標題下方的「進階」連結。
您也可以使用 Blockly 的開發人員工具套件,自行建立包含進階遊樂區的測試頁面。
多遊樂場
多重遊樂場包含多個遊樂場,每個遊樂場的 LTR 模式和工具箱位置皆有不同設定。這項功能主要用於在發布前,快速檢查 Blockly 是否沒有破壞任何與 LTR 相關的內容。如要開啟這個 Playground,請按照簡易 Playground 的步驟操作,然後將網址變更為 /tests/multi_playground.html
。
測試政策變更
從本機伺服器執行任何 Playground 時,在大多數情況下,只要重新整理頁面,即可在 Blockly 中查看變更。如果您已在檔案中新增檔案或加入新的依附元件,您可能需要先執行 npm run
build
,以便更新 test/deps.js
檔案,確保依附元件已正確載入,然後重新整理頁面。
如果您執行外掛程式的進階 Playground,甚至不需要重新整理頁面。系統會自動熱載變更!
直接存取遊樂場
先前,如要在本機存取簡易 Playground,請在瀏覽器中直接前往 test/playground.html
檔案。您仍可使用簡易和多重遊樂場,但我們不再建議這麼做。這樣做之後,Playground 會偵測到您並未執行本機伺服器,並自動使用壓縮的 Blockly 檔案 (詳情請參閱「建構 Blockly 頁面」)。每當您變更 Blockly 核心的內容,就必須重新建構核心並暫存變更。即使這些頁面是託管在遠端伺服器上 (例如示例是託管在示範網站上),您還是可以存取這些頁面。在壓縮模式下,背景會變成亮藍色。
無法透過 file:
存取進階遊樂場。