Mozilla預計將在Firefox 65中正式加入Flexbox Inspector。Flexbox Inspector是Firefox DevTools的功能,可以幫助開發人員了解和操作Flexbox元素大小、位置和巢套(Nesting)等屬性。想試用的開發者,已經可以在Firefox DevEdition中搶先用到。

由於CSS Flexbox能夠方便的建構動態頁面布局,因此逐漸流行了起來,Mozilla調查開發者與設計師對設計工具的需求,發現更好的Flexbox工具將有助於他們的開發工作。現在他們釋出了Flexbox Inspector,這將讓開發者使用Firefox DevTools時,能夠檢視CSS Flexbox布局,並且對其進行查看或是偵錯。

Flexbox Inspector團隊提到,他們擔心僅靠推論開發人員的日常工作流程建構新工具,有可能只是打造出一個被藏在DevTools深處的功能,難以被發現使用,所以對此他們採取積極主動的作法,在布局面板中,會自動出現Flexbox訊息,開發者可以在布局面板中的Inspector中,探索Flex容器(Container)。Inspector選項則是在Firefox 62,預設加入布局面板中的功能。

當頁面HTML元素有使用display:flex,開發者則可以使用DevTools存取Flex的功能。在HTML窗格(Pane)中,有採用Flexbox容器元素布局的網頁,開發者將在原始碼中看到該元素旁邊顯示Flex字樣,而在CSS窗格的規則視圖中,任何display:flex宣告的副本都會出現Flexbox小圖標

點選Flexbox小圖標,將能切換套疊(Overlay)顯示Flexbox子元素的詳細訊息,包括元素、格線和位置等布局。由於選擇其他元素的時候,仍然會顯示套疊,因此開發者可以方便得編輯相關的CSS屬性,並查看Flexbox受影響的程度。而當頁面是由一個或是多個Flexbox容器組成,CSS窗格布局會出現Flexbox容器的區塊,其提供許多查看容器元件的選項。

開發者可以控制Flex容器區塊中提供的兩個設置,其一是可以透過點擊顏色選項,從彈出的顏色選擇器選擇改變套疊物件的顏色,另外,Flex容器區塊右邊則有一個滑動開關,可以用來開啟關閉套疊。

Flexbox的每一個元件都擁有帶編號的條目,開發者只要將滑鼠停留在條目上,就能顯示元素名稱以及類別訊息,而點擊該條目,便能獲得該元件的詳細訊息,視圖中提供3種元件詳細訊息,包括元件的形狀、尚未考慮父元素限制的基本大小,以及應用所有限制後的最終大小。

開發團隊會繼續強化Flexbox Inspector的使用者體驗流程,另外,他們也繼續為所有類型的CSS布局開發偵錯工具,以簡化CSS的開發工作。


Advertisement

更多 iThome相關內容