這些是 Microsoft Edge DevTools 穩定版的最新功能。
Microsoft Edge DevTools 團隊的公告
在 Windows 高對比模式下使用 DevTools
當 Windows 處於高對比模式時,Microsoft Edge DevTools 現在會以高對比模式顯示。
按照指示開啟 Windows 的高對比模式。 要在 Microsoft Edge 中開啟 DevTools,請選擇 F12 或 Ctrl+Shift+I。 DevTools 以高對比模式顯示。
注意:DevTools 目前支援 Windows 的高對比模式,但不支援 macOS。
Chromium期#1048378
另請參閱:
將 DevTools 中的鍵盤快捷鍵與 Visual Studio Code 比對
根據你的回饋和 Chromium 公開問題追蹤器,Microsoft Edge DevTools 團隊得知你希望能在 DevTools 中自訂鍵盤快捷鍵。 在 Microsoft Edge 84 中,你現在可以在 DevTools 中將鍵盤捷徑與 Visual Studio Code 配對,這只是團隊正在開發的捷徑自訂功能之一。
嘗試這個實驗:
在 DevTools 中,按 ? 鍵開啟設定,或點擊
(設定,) DevTools 中的圖示。在 實驗 區塊,選擇 「啟用自訂鍵盤捷徑設定」選項 (需要重新載入) 。
重新載入 DevTools。
再次打開 設定 ,選擇 捷徑 區塊。
點選預設下拉選單中的「匹配捷徑」,選擇 DevTools (預設) ,然後選擇 Visual Studio Code。
DevTools 中的鍵盤快捷鍵現在與 Visual Studio Code 中相同動作的快捷鍵相匹配。
例如,在 Visual Studio Code 中暫停或繼續執行腳本的快捷鍵是 F5。 DevTools (預設) 預設時,那個快捷鍵變成 F8,但用 Visual Studio Code 預設時,那個快捷鍵也變成 F5。
此功能目前已在 Microsoft Edge 84 中作為實驗性提供,請將 你的回饋 分享給團隊!
Chromium #174309
另請參閱:
遠端除錯 Surface Duo 模擬器
你現在可以遠端除錯在 Surface Duo 模擬器 中運行的網頁內容,並充分利用 Microsoft Edge DevTools。
透過 Surface Duo 模擬器,你可以測試網頁內容在新型摺疊與雙螢幕裝置上的渲染效果。 該模擬器運行 Android 作業系統,並提供 Microsoft Edge Android 應用程式。 在 Microsoft Edge 應用程式 中載入你的網頁內容,並用 DevTools 除錯:
Microsoft Edge 桌面實例中的 edge://inspect 頁面顯示 SurfaceDuoEmulator 並列出正在執行的 Surface Duo 模擬器中開啟的分頁或 PWA :
點 選 你想除錯的分頁或 PWA,然後開啟 DevTools。 請依照逐步指南遠端除錯 Surface Duo 模擬器上的網頁內容: 遠端除錯 Surface Duo 模擬器。
更輕鬆地調整 DevTools 快速檢視面板大小
在 Edge 83 或更早Microsoft,你只需將滑鼠移到抽屜工具列內, (快速檢視面板) 來調整抽屜大小。 抽屜的行為和 DevTools 中其他窗格調整大小控制不同,後者是將滑鼠移到窗格邊框來調整大小。 以下圖片展示了 Microsoft Edge 83 或更早版本中抽 屜 尺寸調整的運作方式:
從 Microsoft Edge 84 開始,你可以透過滑鼠移到邊框上來調整抽 屜 大小。 此變更使抽 屜 調整大小的行為與 DevTools 中其他窗格對齊。 以下圖片展示了在 Microsoft Edge 84 或更新版本中調整 抽屜 大小的運作方式:
Chromium #1076112
螢幕播放導航按鈕顯示焦點
在遠端除錯 Android 裝置、Windows 10 或更新版本的裝置,或 Surface Duo 模擬器時,你可以在 DevTools 左上角的
」圖示切換螢幕投射。 啟用螢幕錄影後,你可以從 DevTools 視窗在遠端裝置的 Microsoft Edge 頁面中切換分頁。
在 Microsoft Edge 84 中,這些導航按鈕現在也可透過鍵盤操作。 例如,從螢幕播放的網址列按下 Shift+Tab 鍵,會聚焦在 重新整理 按鈕上:
Chromium #1081486
網路面板細節窗格現已開放
在 Microsoft Edge 84 中,當你在網路日誌中開啟資源時,網路工具中的細節窗格會被聚焦。 此變更允許螢幕閱讀器閱讀並互動 細節面板的內容 。
Chromium #963183
Chromium 計畫的公告
以下章節將宣布 Microsoft Edge 84 中為 開放原始碼 Chromium 專案所貢獻的額外功能。
使用開發工具抽屜中的新問題工具修正網站問題
Drawer 裡的新議題工具 (DevTools 底部的快速檢視面板) ,減少了主控台的通知疲勞和雜亂。 目前, Console 是網站開發者、函式庫、框架及 Microsoft Edge 記錄訊息、警告與錯誤的核心平台。 問題工具以結構化、彙整且可執行的方式彙整瀏覽器的警告。 問題工具 連結 到開發工具中受影響的資源,並提供如何修復問題的指引。
隨著時間推移,更多警告會顯示在 問題 工具中,而非 主機,以簡化 主機 訊息。
要開始,請參考 「使用問題工具尋找並修正問題」。
Chromium期#1068116
在檢查模式工具提示中查看無障礙資訊
檢查模式提示現在會顯示該元素是否有可存取的名稱與角色,且是否可鍵盤聚焦。
Chromium #1040025
另請參閱:
表演小組更新
另請參閱:
在頁尾查看總區塊時間資訊
記錄載入效能後, 效能 工具現在會在頁尾顯示總區塊時間 (TBT) 資訊。 TBT 是一種載入效能指標,幫助量化頁面變得可用所需的時間。 TBT 基本上衡量頁面 長度之所以 看起來可用, (因為內容是呈現到螢幕上的) ;但該頁面實際上無法使用,因為 JavaScript 阻擋了主執行緒,因此頁面無法回應使用者輸入。 TBT 是近似首次輸入延遲的主要指標。
要取得總區塊時間資訊,請不要使用「 刷新頁面
工作流程來記錄頁面載入效能。
請選擇 「錄製
,手動重新載入頁面,等待頁面載入後停止錄影。
若 Total Blocking Time: Unavailable 顯示,Microsoft Edge DevTools 並未從 Microsoft Edge 內部的分析資料中取得所需資訊。
Chromium期#1054381
另請參閱:
新體驗區塊中的版面轉移事件
Performance 工具的新體驗區塊幫助你偵測版面變動。 累積版面移位 (CLS) 是一個幫助你量化不想要的視覺不穩定度的指標。
點擊 Layout Shift 事件,可在 摘要 面板中顯示 layout shift 的詳細資訊。 將滑鼠移到「 移動」 和 「移動到 欄位」上,可以視覺化版面變動的位置。
另請參閱:
控制台中更準確的承諾術語
當記錄 一個 Promise時, 控制台 錯誤地將值設 PromiseStatus 為 resolved。
控制台現在使用與規範相符Promise的術語 fulfilled。 欲了解更多規範資訊 Promise ,請參閱 GitHub 上的 States and Fates 頁面。
V8 第期 #6751
另請參閱:
樣式窗格更新
另請參閱:
支援 revert 關鍵字
樣式面板的自動補全介面現在偵測到 revert CSS 關鍵字,該關鍵字會將屬性的階級值還原為先前套用於元素樣式的值。
Chromium期#1075437
另請參閱:
圖片預覽
將滑鼠移到樣式面板中的某個background-image值上,就能在提示中顯示圖片預覽。
Chromium #1040019
另請參閱:
Color Picker 現在使用空格分離的功能性色彩符號
CSS 色彩模組第 4 級 規定顏色函式(如 rgb(),)應支援空格分離參數。 例如, rgb(0, 0, 0) 等價於 rbg(0 0 0)。
當你用 色彩選擇器 選擇顏色,或在 樣式 窗格中按 住 Shift 並選擇 背景色 值來交替使用顏色表示時,會顯示空格分隔的參數語法。
你也應該在 計算 窗格和 檢查模式 工具提示中顯示語法。
Microsoft Edge DevTools 使用新語法,是因為即將推出的 CSS 功能如 色彩 () 不支援已棄用的逗號分隔參數語法。
空格分隔的參數語法在大多數瀏覽器中已經支援一段時間。 參見 :我可以使用:空間分離的功能性色彩標示?
Chromium問題#1072952
元素面板中屬性面板的棄用
元素工具中的屬性面板已被棄用。 還是用主機跑console.dir($0)吧。
參考
Manifest 面板中的應用程式捷徑支援
在 應用程式 工具中, 清單 頁面現在顯示應用程式捷徑。 應用程式捷徑幫助使用者快速開始網頁應用程式中常見或推薦的任務。 應用程式捷徑選單僅顯示安裝在使用者桌面或行動裝置上的漸進式 Web Apps。
另請參閱:
注意事項
本頁部分內容基於 Google 創作與 分享 的作品,並依 據創用CC 姓名標示 4.0 國際授權條款進行修改。 原始頁面 可在此找到 ,作者為 Kayce Basques。
本作品採用 創用CC 姓名標示4.0國際授權條款授權。