DevTools (Microsoft Edge 83 有什麼新)

根據更新後的 Chromium 發佈時程，我們將調整即將推出的 Microsoft Edge 版本，並取消 Microsoft Edge 82 的發行。想了解更多，請參考我們的部落格文章。

這些是 Microsoft Edge DevTools 穩定版的最新功能。

Microsoft Edge DevTools 團隊的公告

遠端除錯 Edge Microsoft Windows 10或更新裝置

Microsoft Edge 的遠端工具應用程式現已在 Microsoft Store 上架。這個應用程式是 Windows 裝置入口網站的延伸。你可以從開發機器上運行的 Microsoft Edge 連接到遠端的 Windows 10 或更新裝置，並顯示目標清單。此目標清單包含 Microsoft Edge 中的所有分頁及 Windows 裝置上開啟的 PWA 。在你的開發機器上使用 DevTools，對抗遠端 Windows 裝置上執行的目標。

Microsoft Edge 遠端工具應用程式可在 Microsoft Store 取得

請閱讀我們的遠端除錯指南，協助設定您的 Windows 10 裝置與開發機：遠端除錯 Windows 裝置。

歡迎透過推特或點擊「發送回饋」圖示，告訴我們你的遠端除錯經驗。

新的設定存取方式

DevTools 有大量設定可以自訂，讓 DevTools 看起來、感覺和運作都符合你的需求。在 Microsoft Edge 83 中，現在在 DevTools 中存取設定變得容易許多。點擊主控台警報旁的齒輪圖示和主選單，開啟設定。

齒輪圖示會在開發者工具中開啟設定

你也可以從主選單的「更多工具」開啟設定。

主選單 > 更多工具 > 設定

Chromium期#1050855

全新且改良的資訊條

DevTools 中資訊通知欄 (資訊欄) 現在外觀更為精良且功能更多。在 Microsoft Edge 83 中，資訊列更易閱讀，並提供按鈕，讓你能立即執行相關操作。

在 Microsoft Edge 83 中漂亮列印縮小檔案的資訊欄

Chromium期#1056348

用鍵盤操作色彩選擇器

在先前版本的 Microsoft Edge 中，你無法用鍵盤操作色彩選擇器的陰影區塊。在 Microsoft Edge 83 中，你現在可以用鍵盤在色彩選擇器的陰影區塊移動選擇器。

Color Picker 是 Elements 面板中的一個圖形介面，用於變更 color 和 background-color 宣告：

你現在可以用鍵盤在色彩選擇器的陰影區移動選擇器

Chromium #963183

另請參閱:

使用 Elements 工具檢查、編輯及除錯 HTML 與 CSS

屬性標籤現在會在頁面重新整理後自動填入

在 Microsoft Edge 81 及更早版本中，元素面板的屬性分頁會被頁面刷新所破壞。當你重新整理頁面時， 屬性標籤 沒有填入目前選取元素的屬性：

在 Microsoft Edge 81 及更早版本中，頁面刷新後屬性分頁會是空白的

在 Microsoft Edge 83 中，您現在可以在頁面刷新後，於 屬性標籤中顯示目前選取元素的屬性：

在 Microsoft Edge 83 中，頁面刷新後，屬性標籤會顯示目前選取元素的屬性

Chromium期#1050999

另請參閱:

使用 Elements 工具檢查、編輯及除錯 HTML 與 CSS

使用方向鍵在變更工具中捲動

變更工具會追蹤你在 DevTools 中對 CSS 或 JavaScript 所做的任何變更。你可以用 變更工具 快速顯示所有變更，然後把它們帶回你的編輯器或 IDE。

要開啟變更工具，在 DevTools 中，按 Windows/Linux) (Ctrl+Shift+P 或 macOS () 按 Command+Shift+P 開啟指令選單，然後輸入 changes。選擇 「顯示變更 」指令，然後按下 Enter 鍵。 變更工具會在 DevTools 底部的快速檢視面板開啟。

當你對縮小檔案做了修改後， 變更工具 可以讓你橫向捲動，顯示所有縮小後的程式碼。從 Microsoft Edge 83 開始，你現在可以用鍵盤上的方向鍵橫向捲動。

在 Microsoft Edge 83 中，你可以用方向鍵橫向捲動，在變更工具中顯示已縮小的程式碼

如果你使用螢幕閱讀器或鍵盤在 DevTools 中導航，請透過推特或點擊「發送回饋」圖示，將你的回饋寄給我們。

Chromium #963183

另請參閱:

使用變更工具追蹤檔案變更

Chromium 計畫的公告

以下章節將宣布 Edge 83 中Microsoft 開放原始碼 Chromium專案中貢獻的額外功能。

模擬視覺缺陷

在渲染工具中，使用新的 Emulate 視力缺陷 功能，更了解不同視力障礙者如何體驗你的網站：

模擬模糊的視覺

DevTools 可以模擬模糊視力及以下類型的色覺缺陷：

色覺缺陷	詳細資料
原生盲	無法感知任何紅燈。
杜特拉諾皮亞	無法察覺任何綠燈。
三柱國	無法感知任何藍光。
無色盲	除了灰色調外，無法感知任何顏色 (極為罕見) 。

這些色覺缺陷也有較輕微的版本，且較為常見。例如，紅光 (敏感度降低，而紅盲則是完全無法感知紅光) 。然而，這些 -omally 視力缺陷的定義並不那麼明確：每個有這種視力障礙的人都不同，看待事物的方式可能不同， (能感知更多或更少的相關顏色) 。

透過設計 DevTools 的更極端模擬，你的網頁應用程式也能保證讓視力障礙者也能使用。

請透過推特或點擊「發送回饋」圖示來回饋。

Chromium 第 #1003700 期

另請參閱:

模擬視覺缺陷
使用效能特徵參考中的渲染工具分析渲染效能
色盲的類型，Colourblindawareness.org。

模擬地點

要模擬地點，請在 感測器 工具中從位置下拉選單中選擇地點。 (要存取 感測器 工具，請打開 指令選單 並輸入 Sensors.) 選擇位置後，DevTools 會修改目前預設的位置，影響以下程式碼：

Intl.* API 範例如下： new Intl.NumberFormat().resolvedOptions().locale
其他區域感知的 JavaScript API，例如 String.prototype.localeCompare 和 *.prototype.toLocaleString，例如： 123_456..toLocaleString()
DOM API 如 navigator.language 和 navigator.languages
接受語言 HTTP 請求標頭