開發人員工具架構更新:遷移至網頁元件
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
本文是一系列網誌文章之一,旨在說明開發人員工具架構的變動及建構方式。
許多年前,開發者工具剛推出時,團隊選擇建構出專屬的 UI 架構。這是當時相當合理的選擇,也順應 DevTools。
但自此之後,平台也推出各種功能,而其中一項網頁元件就是 Web 元件,非常適合用來在開發人員工具中建構新的 UI 元素。透過平台提供的功能,我們可以大幅減少需要維護的 UI 程式碼,並投入更多資源來建構開發人員工具的功能,而不必支援自訂的基礎架構。
為協助您進行轉換,我們製作了一份指南,說明如何在開發人員工具中建構 UI 元素,並與更多開發人員工具團隊分享。其中有部分指南是開發人員工具及其架構,因此有一組專屬的限制。其中有些是關於我們用來建構、建構及測試網頁元件的方法的一般指南。
而今天,我們會在 goo.gle/building-ui-devtools 公開這份文件。如果您有興趣進一步瞭解網頁元件在大型、實際應用程式中的使用方式,或是因為整合元件而融入既有的大型程式碼集而遇到的難題,本文件可助您一臂之力。如對相關規範有任何疑問,歡迎透過 Twitter 推文。
下載預覽管道
考慮使用 Chrome Canary 版、開發人員版或 Beta 版做為預設開發瀏覽器。這些預覽管道可讓您存取開發人員工具的最新功能、測試最先進的網路平台 API,並在使用者使用之前就在網站上發現問題!
使用下列選項,討論文章的新功能和異動,以及其他與開發人員工具相關的事項。
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權,程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2020-12-08 (世界標準時間)。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"缺少我需要的資訊"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"過於複雜/步驟過多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"過時"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻譯問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/程式碼問題"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"容易理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"確實解決了我的問題"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{"lastModified": "\u4e0a\u6b21\u66f4\u65b0\u6642\u9593\uff1a2020-12-08 (\u4e16\u754c\u6a19\u6e96\u6642\u9593)\u3002"}
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2020-12-08 (世界標準時間)。"],[],[]]