Project Fugu API 展示區是一組應用程式,這些應用程式使用在 Project Fugu 情境中顯得的 API。如要進一步瞭解 Project Fugu,請參閱功能到達網頁。

篩選條件:

已使用的 API

發掘彈出式視窗的新模式,簡化工具提示和其他浮動元素。

透過子群組改善機器學習工作負載、改善 D3D12 的著色器編譯時間、移除浮點可篩選紋理類型的可混合支援功能等。

隱私權和安全性面板、校正的 CPU 節流功能、成效中的第一方和第三方醒目顯示,以及其他新洞察資訊。

Edge 團隊新增了支援功能,可直接在 Chromium 中遵循 Windows ClearType 調諧器值,進而改善 Windows 上以 Chromium 為基礎的瀏覽器文字算繪品質。

瞭解 2025 年 2 月版本的 Chrome 使用者體驗報告 (CrUX 變更),包括 LCP 圖片子項、LCP 資源類型和 RTT。

Chrome 允許播放媒體的網路應用程式自動進入子母畫面。

瞭解即將推出的 Chrome 最新功能。

Chrome 133 即將推出!還有許多令人興奮的新 CSS 功能等著您發掘。

為 Android 版 Chrome 自訂分頁推出應用程式專屬的瀏覽記錄

使用 Android 版 Auth 分頁改善網頁式驗證

持續性 AI 即時通訊記錄、更完善的導覽功能、忽略清單和成效中的堆疊追蹤,以及新的「What’s new」面板等。

新增 unorm8x4-bgra 和 1 個元件的頂點格式,可透過未定義的值要求未知限制、WGSL 對齊規則變更、WGSL 效能提升,以及更多功能。

概略說明 Chrome 擴充功能的最新變更,以及開發人員可以期待的未來擴充功能。

Chrome 線上應用程式商店致力於為開發人員和使用者打造優質可靠的生態系統。為達成這個目標,我們宣布一系列政策更新,旨在讓平台上的政策更明確一致。這些更新涵蓋功能、內容標準和開發人員指南等重要領域。 我們正在簡化 申訴程序 ,讓申訴流程更有效率且更公開透明。日後,開發人員將可針對每項政策違規提出一次申訴。判決結果一旦確定,開發人員就無法重新提出申訴。 為配合更廣泛的 Google 產品政策,我們會更新 用詞 ,明確禁止在 Chrome

瞭解如何使用 `getClientCapabilities()` 偵測 WebAuthn 功能,並為使用者調整驗證工作流程。

從 Chrome 133 開始,在啟用節能模式時,系統會將 CPU 密集的背景分頁凍結。

iOS 17 以上版本的 Chrome 現可透過 Google 密碼管理工具 (GPM) 建立、同步處理及驗證密碼金鑰。這樣一來,Chrome 就能在任何地方使用 GPM 的密碼金鑰。

您現在可以將 attr() 與任何 CSS 屬性 (包括自訂屬性) 搭配使用,且該函式可將值剖析為字串以外的資料類型。

與容器查詢類似,但適用於卡住、固定和溢出的查詢。

瞭解 Chrome 最新推出的功能。

在文字內容上方和下方留出空間,以達到視覺平衡。

瞭解開發人員工具中的全新 AI 輔助面板,瞭解各種有趣又令人期待的用途

Chrome 132 即將推出!對話方塊元素會取得 ToggleEvent,支援元素層級的影片分享功能,而 File System Access API 則支援 Android 和 WebView。

歡迎探索內建 AI 挑戰賽的得獎應用程式和擴充功能,我們邀請您重新發掘 Chrome 中的 Gemini Nano 所能提供的無限可能。

Web Vitals 擴充功能和開發人員工具的合併作業已完成,且已停止支援該擴充功能。

紋理檢視畫面用途、32 位元浮點紋理混合、GPUDevice adapterInfo 屬性、使用無效格式設定畫布內容會擲回 JavaScript 錯誤、篩選紋理上的取樣器限制、擴充子群組實驗、改善開發人員體驗、實驗性支援 16 位元規格化紋理格式等等。

Chrome 研究顯示,使用自動填入功能的使用者填寫表單的速度更快,放棄率也較低。

感謝你撥出時間與我們分享意見、查看詳細資料,並協助我們制定標準。

歡迎加入 Chrome DevRel 團隊,與滑板恐龍一起探索 2024 年推出的最新 Chrome 和網頁平台 CSS。

使用開發人員工具記錄及分析效能追蹤記錄。

使用 Gemini 偵錯網路要求、來源檔案和效能追蹤記錄,查看 AI 即時通訊記錄等。

實驗版「效能深入分析」面板將於 2025 年 1 月移除,取而代之的是「效能」面板中的新版深入分析功能。

我們已選出 Gemini API 開發人員競賽的網頁獎得主 ViddyScribe。他們舉例說明 Gemini 如何為任何影片生成音訊描述,讓網路上的影片更容易存取。

瞭解在最新 GPU for the Web 工作小組會議中討論的新 AI 和轉譯功能。

如何為新版擴充功能選單準備擴充功能。

瞭解如何透過開發人員工具中的全新註解功能,讓效能追蹤記錄更易於理解

隆重推出 Chrome 桌機版密碼金鑰專用 Signal API

使用本機 AI 模型在瀏覽器中即時翻譯文字。使用者現在可以以母語進行貢獻。

瞭解 Chrome 最新推出的功能。

Chrome 131 即將推出!為詳細資料元素提供更多 CSS 樣式、透過頁面邊界方塊簡化列印版面配置,以及更多功能。

參與 Chrome 擴充功能的 Prompt API 來源試用,並在 Chrome 中使用 Gemini Nano。

參與來源試用計畫,協助使用者將冗長的文章、複雜的文件,甚至是熱絡的即時通訊對話,濃縮成精簡扼要的摘要。

在 WGSL、GPUCanvasContext getConfiguration()、點和線基元中剪輯距離不得有深度偏誤、子群組包含的內建掃描函式、對多重繪圖間接間接支援、著色器模組編譯選項嚴格數學的實驗性支援,以及移除 GPUAdapter requestAdapterInfo() 等。

您現在可以使用新的 ::details-content pseudo-element 設定顯示類型,並為展開和收合的部分設定容器樣式。

透過順暢的憑證共用功能,您可以向密碼管理工具發出安全信號,讓使用者在 Android 應用程式和網站上使用相同的憑證登入。

在「效能」面板中監控即時 Core Web Vitals 指標。

列印網頁時建立自訂頁首和頁尾。

使用 Gemini 偵錯 CSS、在「Performance」面板中標註發現項目並取得洞察資訊,以及找出過度版面配置位移和未合成的動畫等。

Chrome 132 不再包含舊版無頭模式。改用無頭版介面或新的無頭模式。

瞭解 DevTools 的新捲動徽章如何簡化捲動元素的偵錯作業 (以及我們如何建構這項功能)。

瞭解開發人員工具中的全新 AI 輔助面板,瞭解各種有趣又令人期待的用途

透過最新的 Beta 版,瞭解 Chrome 即將推出的功能。

Chrome 130 已正式推出!子圖中的文件圖片可讓您進一步控管相框中的畫面,CSS 巢狀宣告可修正一些棘手的極端情況,而您可以指定元素裝飾在不同線條中的裝飾行為。Pete LePage 已詳細說明 Chrome 130 中開發人員可用的最新功能。

雙重來源混合、Metal 上的著色器編譯時間改善、GPUAdapter requestAdapterInfo() 淘汰等。

概略說明 Chrome 擴充功能的最新變更,以及開發人員可以期待的未來擴充功能。

Chrome 130 包含無前置字串的完整 Box-decoration-break 支援。

私人網路存取權 (PNA) 的推出作業已暫停。

Chrome 134 將變更 CSS 醒目顯示繼承功能。

Translation API 現已開放內建 AI 搶先體驗計畫的參與者使用。

瞭解開發人員工具偵錯工具如何預測是否有例外狀況。

我們推出內建 AI 挑戰賽,邀請您重新發想 Chrome 中的 Gemini Nano 可發揮的效用。

針對可透過「效能」面板瀏覽的即時指標和導覽標記、重新構思的網路篩選器、經過清理的 HAR 匯出內容等提供的建議。

我們很高興推出一組 UI 變更,讓 Chrome 線上應用程式商店開發人員資訊主頁更有回應性,也更適合在行動裝置上使用。我們希望這項功能能讓您在監控商店資訊成效、修改商店資訊,以及管理商店擴充功能時,享有更便利的體驗。 我們已更新所有圖表和分析頁面,讓這些頁面更有彈性,方便你查看擴充功能在行動裝置上的商店資訊成效。 你也可以透過行動裝置更新商店中繼資料,包括說明、圖片和隱私權設定。

使用開發人員工具檢查快取並排解相關問題。

網站體驗指標擴充功能將與 Chrome 開發人員工具的「效能」面板合併,並於 2025 年 1 月結束獨立支援。

不久後,Chrome 電腦版將可在 Google 密碼管理工具 (GPM) 中建立密碼金鑰,並在 Android 和其他平台上同步這些密碼金鑰。

EPP 參與者現可在 Chrome 中使用寫入和重寫 API 設計原型,

運用最新的 Chrome Beta 版測試新功能和異動項目。

HDR 支援面板色調對應模式、擴大的子群組支援,以及更多功能。

Chrome 129 即將推出!您可以從長時間的工作中產生以下程式碼:如要提升效能,您可以使用內建函式的大小以動畫呈現元素,以及變更錨定定位語法,還有許多其他功能。Pete LePage 已詳細說明 Chrome 129 中開發人員可用的最新功能。

Chrome 開發人員工具的「效能」面板採用全新方式監控本機 Core Web Vitals 效能,並與實際現場的使用者資料進行比較。

程序共用實驗及其影響 Chrome 開發人員工具&#39開發人員體驗

瞭解如何使用 Web Serial 偵測藍牙 RFCOMM 序列埠是否可用。

搶先一睹全新的可自訂精選功能。

凍結 DOM 中的元素,以便您使用 DevTools 檢查這些元素。

Keyboard Lock API 可讓開發人員為各種用途提供沉浸式全螢幕體驗,包括互動式網站、遊戲、遠端桌面或應用程式串流。這麼做的方式是讓網站使用主機作業系統允許的所有可用金鑰。 Pointer Lock API 可讓電腦應用程式隱藏指標圖示,並將滑鼠動作解讀為其他動作,例如在 3D 世界中四處查看。 自 Chrome 131 起,使用這兩種 API 都需要權限。您可以 檢查 權限,如以下程式碼片段所示: 您不需要明確 要求

您應瞭解錨定定位 API 的相關變更。

Digital Credentials API 的來源試用將於 Chrome 128 開始。Digital Credentials API 是新的網路平台 API,可讓網站透過駕照或數位錢包中儲存的數位憑證等數位憑證,要求使用者提供可驗證的資訊。

「成效 &gt」中的搜尋要求;您可以在網路中使用自動填入功能在地址表單中使用測試資料、透過「錄音工具」面板匯出至 Puppeteer 專用的 Puppeteer、透過效能面板的觀察結果快速瞭解效能問題等等。

Chrome 上的 WebAuthn 現在可以使用提示、相關來源要求和 JSON 序列化

EPP 參與者現可在 Chrome 中使用語言偵測 API 設計原型。

想預覽下一個 Chrome 版本的話,請參閱這篇文章,瞭解目前 Beta 版的功能。

Chrome 團隊正在測試新的 File System Observer API,通知開發人員對檔案系統的異動。

Ahmed Elwasefi 的文章,分享他如何透過 Google 夏季程式設計競賽成為 Chromium 貢獻者。

使用子群組進行實驗、淘汰線條和點的設定深度偏誤、在 preventDefault 時隱藏未擷取的錯誤 DevTools 警告、WGSL 第一等分插取樣等等。

Chrome 128 已推出!我們改善了 Ruby 元素的顯示方式和換行,讓 Promise.try 更容易啟動 Promise 鏈結,同時擴充 PointerEvent 介面,用於識別多支筆。此外,還能提供更豐富的內容。Adriana Jara 可以完整說明 Chrome 128 為開發人員新增了哪些功能與新增項目。

EPP 參與者現可使用 Gemini Nano 適用的摘要 API 設計原型。

推出兩個新的 JavaScript 事件:ScrollSnapChange 和 ScrollSnapChanged。

瞭解 4 種使用開發人員工具擷取螢幕截圖的獨特方法。

在歐洲地區發布洞察資訊、強化網路追蹤功能,以及透過 API 在「成效」面板中自訂測試群組等。

Puppeteer 23 針對 Firefox 129 以上版本提供穩定支援,根據 WebDriver BiDi,為 Chrome 和 Firefox 自動化提供整合式 API。

有關內建 AI、Prompt API 和 Chrome&#39 AI 計畫的最新消息。

Android 版 Chrome 現已整合 Credential Manager,讓第三方密碼管理工具在 Android 14 以上版本中提供密碼金鑰

瞭解開發人員工具團隊如何改善「樣式」分頁中的樣式。

BrowserStack 推出 WebDriver BiDi 支援:透過事件導向自動化功能,提升 Selenium Grid 測試的成效。

換行 ruby 元素和 CSS ruby-align 屬性

想預覽下一個 Chrome 版本的話,請參閱這篇文章,瞭解目前 Beta 版的功能。

Chrome 的內部使用者研究顯示,許多人重視安裝網頁應用程式。這麼做有許多好處,例如: Chrome 和網頁開發人員可以提供多種協助方式,包括新的機器學習宣傳功能。這篇文章將概略說明使用者安裝應用程式的方式。 符合 Chrome 可安裝性標準 的應用程式,會在 Chrome 電腦版瀏覽器的網址列中自動顯示安裝圖示 (在下方螢幕截圖中以黃色標示)。使用者可以點選安裝應用程式。 如要透過其他方式安裝應用程式,請依序點選「更多」 >「儲存並分享」 >「安裝 $appName」 。

針對 Android 上的 OpenGL ES、GPUAdapter 資訊屬性、WebAssembly 互通性改善等方面的實驗性支援。

Chrome 127 已推出!透過支援「字型大小調整」設定,「Document Picture-in-Picture API」中導入使用者啟動功能、可聚焦的鍵盤捲動容器,還有更多功能。Adriana Jara 可以完整說明 Chrome 127 為開發人員新增了哪些功能與新增項目。

現在有越來越多人開始研究 View Transition API,接著該 API 有助於釐清一些錯誤。

本次公告包含對《開發人員計畫政策》頁面進行一系列的修訂,旨在鼓勵開發人員開發優質產品、防範欺騙行為,並確保使用者在知情的情況下提供同意聲明。

概略說明 Chrome 擴充功能的近期異動,以及開發人員可期待即將推出的擴充功能功能。

元素中的 CSS 錨定位置、強化項目 '永不暫停此處;在來源、新的捲動貼齊事件監聽器、更新網路節流預設設定等。

YouTube 已採用「信任的類型」強化平台安全性,可防範跨網站指令碼攻擊,不過可能會影響擴充功能。

Long Animation Frame API (LoAF) 已從 Chrome 123 推出,我們還更新了工具和指南,協助您充分運用這個新的 API。

我們與負責 Chrome 線上應用程式商店審查的團隊告一段落。

Chrome 團隊針對索引資料庫 (IDB) 的實作方式進行了許多與效能相關的改善。

下載 Beta 版即可測試 Chrome 的最新功能。

提高 maxTextureArrayLayers 限制、為 Vulkan 後端進行緩衝區上傳最佳化、改善著色器編譯時間、提交的指令緩衝區不得重複,以及 Dawn 更新。

Chrome 團隊正在實驗新的宣告式 HTML <permission> 元素,可為使用者提供強大的功能。

閱讀 2024 年 Google I/O 大會中發布的所有 CSS 和網頁版 UI 公告。

Chrome 126 現已推出!藉由 ViewTransitions API 中的跨文件轉換功能,CloseWatcher API 重新啟用、針對 Gamepad API 觸發觸發錯誤,還有許多其他功能。Adriana Jara 已提供開發人員在 Chrome 126 版中為開發人員新增的一切詳細資料。

瞭解最新功能,讓「效能」面板井然有序,讓您聚焦在最需要的資訊

很高興在此宣布,我們推出了一項新功能,可讓開發人員利用 Declarative Net Request API 針對 Manifest V3 擴充功能進行符合條件的變更,略過審查程序。

改善軌跡設定模式、在火焰圖中忽略清單,以及將「效能」面板中的 CPU 限縮 20 次等等。

另一場 Google I/O 大會是我們幕後的一項新功能,所有令人期待的擴充功能更新都精彩回顧了!

隆重推出 MPA 跨文件檢視轉換功能、利用有效類型的選擇性檢視轉場效果,以及透過檢視轉場類別共用動畫樣式。

第 2 部分 (共 2 部分):瞭解 WebAssembly 和 WebGPU 如何增強網路機器學習效能。

本文件會簡要說明 JavaScript 架構生態系統的最新異動。

第 1/2 部分。瞭解 WebAssembly 和 WebGPU 如何強化網頁機器學習效能。

請閱讀 2024 年 I/O 大會的 Web AI 摘要。瞭解下一個網頁應用程式適用的新模型、工具和 API。

Chrome 126 Beta 版除了提供跨文件檢視轉場功能外,還有 Gamepad API 觸發標記擴充功能,還有其他功能。

Chrome 126 開始支援 Windows UI 自動化架構。

Async Clipboard API 現在可以處理 SVG 圖片。

瞭解如何使用開發人員工具覆寫及模擬網路回應。

Chrome 125 現已推出!運用 CSS Anchor Positioning API、Compute Pressure API、Storage Access API 的擴充等等。Adriana Jara 已提供開發人員在 Chrome 125 版中為開發人員新增的所有資訊。

透過 Google I/O 開發人員主題演講和研討會影片,瞭解令人期待的功能。

使用新的錨定定位 API 將元素彼此相對的位置。

瞭解如何在企業環境中進行測試來克服挑戰

簡要介紹 Puppeteer、Chrome Headless 和 Chrome for Testing,以及 Chrome 工具團隊提供的其他資源。

控制台錯誤、效能中的 CSS 選取器統計資料、網路中的早期提示標頭等等。

瞭解導入最新的 CSS 和使用者介面功能 (例如查看轉場效果、捲動式動畫、Popover API 等) 為何可為電子商務網站帶來助益。

開發中的子群組,且算繪為 3D 紋理切片。

這堂 10 集教學影片,全面瞭解捲動式動畫

依不同規格定義磚石和網格的提案。

如要從無法轉換為 HTTPS 的網站存取私人網路裝置,您必須使用權限提示放寬複合型內容檢查。

CSS 錨定定位、CSS 階梯函式、Compute Pressure API 等等。

折疊式 API 是 Chrome 中的兩種 API,旨在協助開發人員指定折疊式裝置。

Chrome 124 現已推出!有兩個新的 API 可以在 JavaScript 中使用宣告式陰影 DOM。您可以在 Web Socket 中使用串流功能。檢視轉場效果會更好。還有許多其他實用功能。Pete LePage 提供 Chrome 124 開發人員針對 Chrome 124 版新增的一切詳細資料。

概略說明 Chrome 擴充功能的近期異動,以及開發人員可期待即將推出的擴充功能功能。

Chrome 現在會透過權限提示限制整個 Web MIDI API。

瞭解開發人員工具如何改善您的網頁應用程式開發。

唯讀和讀寫儲存空間紋理、Service Worker 和共用工作站支援、新的轉接器資訊屬性,以及錯誤修正。

本週,我們很高興推出一項新功能,讓開發人員將擴充功能回溯至先前在 Chrome 線上應用程式商店發布的版本。我們的目標是讓開發人員在發布更新時更安心,尤其是在改用資訊清單 V3 的情況下。 從今天起,您不必提交有錯誤修正的擴充功能新版本,然後等待審查通過。您可以透過「更多」 選單或項目的套件頁面,啟動回溯作業。 復原作業需要新版本號碼,以便重新發布擴充功能的舊版本,並提供復原的原因。填寫必要資訊後,請確認還原作業。 回溯完成後,系統會透過 Chrome

瞭解 Chrome 使用者體驗報告 (CrUX) 中新的 Navigation_types 指標,以及該指標如何用於解釋並改善網路成效指標。

瞭解剖析 CPU 效能的未來路徑,瞭解原因及淘汰 JavaScript 分析器的方式。

捲動式動畫支援、新的「自動填入」面板、網路節流中的 WebRTC 新選項等等。

「JavaScript Promise 整合」(JSPI) 是一個 API,可讓編譯至 WebAssembly 的依序程式碼存取非同步 Web API。

瞭解 RetrieLater API (現已推出「來源試用」) 這個新 API,用於要求延遲擷取;即使網頁已關閉,仍會完成擷取。

系統會推出變更,讓沒有設定 Tabindex 值的捲動器,且沒有可聚焦的子項鍵盤可聚焦。

書寫建議 HTML 屬性、WebSocketStream API、優先 HTTP 要求標頭等。

Chrome 123 現已推出!全新的淺色函式、Long Animation Frames API、Service Worker Static Routing API 與 #39 都提供許多其他功能。Adriana Jara 已提供開發人員在 Chrome 123 版中為開發人員新增的所有資訊。

瞭解如何使用這個新的 API (適用於 Chrome 123)。

瞭解私人網路存取權&#39 是網路工作處理人員、導覽擷取作業和即將實施的安全防護的主要安全機制。以及網站擁有者應採取的因應做法。

探索 Chrome 開發人員工具「Network」面板中的最新改善項目,讓你享有更簡便的網路偵錯體驗。

瞭解 Chrome 團隊和 #39 的計劃改善開發人員工具的「效能」面板。

DP4a 內建函式支援、未限制的指標參數、用來反參照 WGSL 中複合的語法糖等等。

您現在可以將舊版 Headless Chrome 下載為獨立二進位檔,用於所有面向使用者的 Chrome 版本。

網路壓縮大幅提升了共用字典壓縮功能。歡迎瞭解網路的靜態和動態資源及其運作方式,以及如何運用標準壓縮大幅縮短載入時間,進一步限縮網路的靜態和動態資源載入時間。

推測規則 API 最新更新的詳細資料,包括平台上支援的文件規則、較容易設定、限制和推測規則。

眼神團隊在這篇文章中分享了自己在測試擴充功能服務工作人員問題的心路歷程。尤其是當服務工作人員遭到停權時,如何確保 Chrome 擴充功能正常運作。

復活節彩蛋、元素中的元素模擬頁面、風格、新版 Lighthouse 稽核等等。

瞭解如何使用 @next/third-parties 程式庫,最佳化熱門第三方資源的載入作業

CSS light-dark() 色彩函式、區塊的 align-content、欄位大小屬性,以及頁面顯示事件。

在 Chrome 123 版中,使用「對齊內容」功能將項目對齊,而不建立 Flex 或格線容器。

Chrome 122 現已推出!推出新的 Storage Buckets API 後,開發人員工具「效能」面板會更新,並推出未經處理的 Async Clipboard API 讀取 HTML 選項,還有許多實用功能。Adriana Jara 已提供開發人員在 Chrome 122 版中為開發人員新增的所有資訊。

自 Chrome 122 版起,`::backdrop` 元素會沿用原始元素的屬性。

開發人員工具中的「效能」面板是一項強大的工具,可協助診斷、偵錯及修正網頁應用程式的效能問題。在此情況下,我們會逐步說明如何使用開發人員工具中的「效能」面板改善「效能」面板本身的效能,以及我們如何達到顯著的進步。

開發中的相容性模式、提高 maxVertexAttributes 限制,以及 Dawn 更新。

在「網路和應用程式」面板中逐步停用第三方 Cookie 警告、「網路」面板中的加強型偵錯功能、「效能」面板中的導覽標記等等。

EditContext 是在 Chrome 和 Edge 中推出的全新 API,可協助開發人員在瀏覽器中建構進階的文字編輯功能。歡迎參閱這篇文章,瞭解詳情!

運用推測載入功能加快網頁瀏覽速度,並瞭解如何進行偵錯。

在 Chrome 電腦版中,無跨來源隔離的 SharedArrayBuffer 淘汰試用期限將延長至 Chrome 124 版。

Chrome 122 Beta 版除了提供 Iterator 輔助工具、設定方法和 Storage Buckets API,還能在 Async Clipboard API 中讀取未處理過的 HTML 等更多功能。

概略說明 Chrome 擴充功能的近期異動,以及開發人員可期待即將推出的擴充功能功能。

Chrome 121 現已推出!經過 CSS 更新,我們改善了 Speculation Rules API、Element Capture API 的來源試用以及 #39 等等。Adriana Jara 已提供開發人員在 Chrome 121 針對開發人員新增的一切詳細資料。

支援 Android 上的 WebGPU、使用 DXC 進行著色器編譯、計算及轉譯傳遞的時間戳記查詢、將著色器模組的預設進入點、支援 GPUExternalTexture 色彩空間、記憶體堆積資訊等的 display-p3。

瞭解如何在 Angular 中安全地搭配使用 DOM 與 SSR