Skip to main content
CTOR 有兩個分頁式面板:沿著視窗右緣的右側面板,以及橫跨聊天與右側面板下方、佔滿整個視窗寬度的下方面板。兩者都提供相同的一組分頁——差異檢視模擬器Config Editor檔案檢視器、可開啟 BRICKS Controller 或任何網頁的瀏覽器分頁、終端機、您工作區的裝置清單,以及裝置 DevTools——讓您依視窗配置自由安排,並同時檢視一個以上的分頁。

開啟面板

點選頂端列的右側面板下方面板按鈕。無論面板是開啟或關閉,這兩個按鈕都固定在各自的位置——右側面板位於右上角,下方面板則緊鄰其左側。CTOR 會個別記住每個面板的開啟/關閉狀態,並在您下次啟動應用程式時還原。 開啟面板會顯示您已在該面板中開啟的分頁。若兩個面板都還沒有任何分頁,會顯示一個起始頁,列出可開啟的檢視——選擇其中一項即可將它載入該面板。下方面板是例外——第一次開啟且尚未有任何內容時,會直接建立一個終端機分頁,而不會顯示起始頁。

分頁

差異、模擬器、編輯器、檔案、裝置以及各裝置的 DevTools 分頁都是唯一分頁——同一時間在兩個面板中都只會存在一份。瀏覽器與終端機分頁並非唯一分頁——可依需要開啟多個。請參閱在面板之間移動分頁

差異

差異分頁顯示專案的未提交變更,並帶有目前新增與刪除行數的徽章(+ / )。檢視模式與逐檔控制請參閱差異檢視參考

模擬器

模擬器分頁以內嵌網頁檢視執行已編譯的專案,並提供 Chrome DevTools Protocol (CDP) 端點。其工具列包含 DevTools 切換,可停靠模擬器自身的檢查器。完整的面板控制請參閱模擬器參考

編輯器

編輯器分頁內嵌視覺化的 Config Editor,並與您開啟的專案連動。儲存時會將您的編輯編譯進專案原始程式碼並提交。完整的編輯流程請參閱 Config Editor 參考

檔案

檔案分頁會開啟專案的檔案樹;您從中開啟的每個檔案都會成為旁邊的獨立分頁。檔案樹、預覽、搜尋與外部編輯器交接請參閱檔案檢視器參考

裝置

+(新增分頁)選單新增裝置分頁,或點選本機裝置對話框頁尾的開啟裝置面板——兩者預設都會在下方面板中開啟。它在專案與主聊天工作階段中都可使用,不需要開啟專案,並會列出您工作區的裝置,比對方式與本機裝置對話框所使用的同一份本機網路掃描結果相同。 裝置會分為在線離線兩組(5 分鐘內回報過即視為在線),各組會顯示裝置數量。每一列的摘要會顯示其類型、正在執行的應用程式與版本;展開後可看到唯一 ID、上次連線時間、模式(其平台——iOS、iPadOS、Android、Android TV、macOS、tvOS、Windows、Linux 或 Virtual Device)、螢幕解析度、記憶體與磁碟使用量,以及——若為本機相符的裝置——其區域網路位址。
  • 本機——該裝置目前也能直接透過您的網路連線,而不只是透過雲端。
  • CDP——本機相符的裝置若同時提供除錯端點,即會顯示此徽章;並解鎖開啟 DevTools 按鈕,開啟與本機裝置對話框相同的 DevTools 分頁
  • 更新——表示該裝置有可用的 BRICKS Foundation 更新。
裝置在線時,您還可以重新整理清除快取——與 BRICKS Foundation 自身的重新整理清除快取是相同的動作——或擷取螢幕擷圖,以行內預覽方式顯示(需要工作區已啟用媒體工作區)。裝置離線時,這些動作以及開啟 DevTools 都無法使用。 清單每 30 秒重新整理一次,本機掃描則是每 60 秒一次,但僅在裝置分頁是所在面板中使用中的分頁時才會進行。

儀表板檢視

工具列上的列表 / 儀表板切換鈕可改變面板呈現這些裝置的方式,CTOR 會記住您的選擇,下次開啟時沿用。 儀表板會將列表換成螢幕擷圖卡片的格狀排列,同樣分為在線離線兩組。每張卡片會顯示最新的擷圖、裝置名稱、其本機CDP 徽章,以及一行標註螢幕解析度與擷圖時間距今多久的說明文字。將游標移到卡片上會顯示擷取按鈕,若為 CDP 裝置則另有開啟 DevTools。離線裝置會以淡化方式顯示,並標示已離線多久,且沒有任何動作可用。 當您切換到儀表板時,CTOR 會為每一台在線裝置擷取一次;裝置清單有變動時也會重新擷取。切換鈕旁的自動更新下拉選單可依間隔重新擷取整個格狀排列——關閉、10s、30s(預設)或 60s——工具列的重新整理按鈕則可隨時手動擷取。與清單的重新整理相同,自動更新僅在裝置分頁使用中時才會執行。擷取會排入佇列,一次只處理一台裝置,避免大型工作區灌爆 API。 提供 CDP 的裝置會直接透過其本機除錯連線擷取——速度快,也不需要媒體工作區;這些卡片會帶有 LIVE 徽章。其餘裝置則會退回使用與列表檢視中螢幕擷圖動作相同的媒體工作區路徑,其徽章會顯示擷圖的時間長度,並在擷圖超過兩個更新間隔後轉為琥珀色。

瀏覽器

瀏覽器分頁會在面板中執行網頁——開啟 BRICKS Controller 或輸入任何網址。您可以同時開啟多個,分散在兩個面板中,代理也能透過授權的 CDP 橋接來操作它們。工具列、在頁面中尋找、螢幕截圖與代理自動化請參閱瀏覽器參考 +(新增分頁)選單新增:新增瀏覽器分頁會開啟空白分頁,開啟 Controller 則讓瀏覽器分頁指向使用中應用程式與 stage 的 Controller。

DevTools

本機裝置面板開啟裝置的 Chrome DevTools 檢查器——請參閱本機裝置。每部裝置會以各自的 DevTools 分頁開啟,以裝置名稱為標題,並在網頁檢視中載入 devtools:// 檢查器。 DevTools 分頁的行為與內建分頁不同:
  • 依裝置去除重複——重新開啟某部裝置會重複使用其分頁,並重新整理連線(例如在重新驗證之後)。
  • 持續保留——切換專案與工作階段時仍維持開啟,因為它們追蹤的是實體裝置,而非目前的專案。
  • 彈出——點選分頁列中的在視窗中開啟 DevTools,可將檢查器移至獨立視窗。此操作會關閉分頁,並還原為傳統的獨立視窗行為。
當您檢查的裝置是前景專案執行中的預覽時,DevTools 按鈕會將檢查器停靠在模擬器分頁內,而非開啟獨立分頁。請參閱停靠模擬器的 DevTools

終端機

終端機分頁會執行一個互動式 shell——可以是系統預設 shell,也可以是您自訂設定的 shell。它在專案與主聊天工作階段中都可使用;在專案中,會以專案根目錄作為起始工作目錄。 +(新增分頁)選單新增,會排在所有其他分頁之後——或第一次開啟下方面板即可自動取得一個,請參閱開啟面板。每個終端機都是獨立的 shell;關閉其分頁會立即結束該 shell,不會詢問確認,即使仍有指令在執行中。 當您切換離開其工作階段、將其拖曳至另一個面板,或稍後返回時,終端機都會持續執行——同一個 shell 會重新接上,而不是重新啟動。其字型會追蹤外觀設定中的程式碼字型程式碼字型大小,並即時更新;其配色主題則在建立分頁時就固定下來,之後切換應用程式的亮/暗主題也不會改變。

管理分頁

  • 新增分頁——點選分頁列中的 +(新增分頁)並選擇分頁。新增瀏覽器分頁開啟 Controller 會開啟瀏覽器分頁;開啟模擬器分頁會開始編譯專案;開啟差異則載入目前的變更。
  • 關閉分頁——點選分頁上的 ×。關閉差異模擬器也會停止其後端;關閉 DevTools 分頁會中斷該檢查器的連線,關閉瀏覽器分頁則會關閉該頁面。
  • 重新排序分頁——在同一面板的分頁列中,將分頁向左或向右拖曳以變更位置。放置指示器會顯示落點。
  • 以鍵盤切換分頁——按 Cmd+1Cmd+9(Windows 與 Linux 為 Ctrl),即可跳至右側面板中第 1 到第 9 個分頁,順序與其分頁列一致。此快速鍵不適用於下方面板。
當開啟的分頁超出可容納範圍時,面板的分頁列會水平捲動,讓每個分頁都能存取。若面板較窄或較矮,使用中分頁的工具列會將按鈕收合為圖示以挪出空間。

在面板之間移動分頁

將分頁從所在面板的分頁列拖曳出來,並放到另一個面板的分頁列上,即可將它移動過去。若目標面板目前是關閉的,拖曳時該面板邊緣會出現一條放置提示——右側面板對應視窗右緣,下方面板對應視窗下緣。放到提示上會移動分頁,並同時開啟該面板。 由於差異、模擬器、編輯器、檔案、裝置以及裝置 DevTools 分頁都是唯一分頁,拖曳是搬移它們的唯一方式——當分頁已經開啟時,從 + 選單、工具項目或本機裝置面板重新開啟它,只會將既有分頁帶到目前所在面板的最前面,而不會開啟重複的分頁。瀏覽器與終端機分頁並非唯一分頁,因此您可以在兩個面板中各自保留獨立的分頁。
瀏覽器DevTools 分頁移動到另一個面板會重新載入該頁面。模擬器編輯器終端機分頁則不會——它們的內容(對終端機而言即執行中的 shell)會在移動後保留。

將面板分割成窗格

將分頁放到分頁列下方的內容區域(而不是放到分頁列上),即可讓它與原本顯示的內容並排。放置時最靠近的邊緣決定分割方式——會左右並排新窗格,則會上下堆疊。一個群組最多可容納四個窗格。 同一個群組中的窗格會共用分頁列上的一個分頁,標題由各成員的名稱以 | 串接而成。每個窗格都有一個握把,可拖曳它到群組中的其他位置,另有一個關閉按鈕,可讓它回到分頁列成為獨立分頁。拖曳兩個窗格之間的分隔線可調整大小;任一側都無法縮小到群組的 15% 以下。
檔案檢視器是共用的單一檢視,因此一個群組最多只能有一個檔案或已開啟檔案的窗格。

調整面板大小或關閉面板

右側面板

拖曳面板左緣的控制桿,即可相對於聊天區域調整其大小。面板最多可佔視窗寬度的 80%。將控制桿向內拖曳超過最窄寬度時,會關閉面板。

下方面板

拖曳面板上緣的控制桿,即可相對於上方的聊天與右側面板調整其高度。它預設以 300px 開啟,最小可縮至 120px,最大可佔視窗高度的 70%,同時保留頂端列與上方一段可用的聊天空間。將控制桿向下拖曳超過最短高度時,會關閉面板。