本文是一系列網誌文章之一,旨在說明開發人員工具架構的變動及建構方式。
許多年前,開發者工具剛推出時,團隊選擇建構出專屬的 UI 架構。這是當時相當合理的選擇,也順應 DevTools。
但自此之後,平台也推出各種功能,而其中一項網頁元件就是 Web 元件,非常適合用來在開發人員工具中建構新的 UI 元素。透過平台提供的功能,我們可以大幅減少需要維護的 UI 程式碼,並投入更多資源來建構開發人員工具的功能,而不必支援自訂的基礎架構。
為協助您進行轉換,我們製作了一份指南,說明如何在開發人員工具中建構 UI 元素,並與更多開發人員工具團隊分享。其中有部分指南是開發人員工具及其架構,因此有一組專屬的限制。其中有些是關於我們用來建構、建構及測試網頁元件的方法的一般指南。
而今天,我們會在 goo.gle/building-ui-devtools 公開這份文件。如果您有興趣進一步瞭解網頁元件在大型、實際應用程式中的使用方式,或是因為整合元件而融入既有的大型程式碼集而遇到的難題,本文件可助您一臂之力。如對相關規範有任何疑問,歡迎透過 Twitter 推文。
下載預覽管道
考慮使用 Chrome Canary 版、開發人員版或 Beta 版做為預設開發瀏覽器。這些預覽管道可讓您存取開發人員工具的最新功能、測試最先進的網路平台 API,並在使用者使用之前就在網站上發現問題!
與 Chrome 開發人員工具團隊聯絡
使用下列選項,討論文章的新功能和異動,以及其他與開發人員工具相關的事項。
- 請透過 crbug.com 提交建議或意見回饋。
- 如要回報開發人員工具的問題,請在開發人員工具中依序點選「更多選項」圖示 >「說明」 >「回報開發人員工具的問題」。
- 在 @ChromeDevTools 張貼推文。
- 歡迎對開發人員工具的 YouTube 影片或開發人員工具秘訣 (YouTube 影片) 提供意見。