開發人員工具摘要,2016 年 9 月 - 2016 年以後的開發人員工具

2016 年 Google I/O 大會圓滿落幕。DevTools 在 I/O 大會上大放異彩,包括 Paul Bakaus、Paul Irish 和 Seth Thompson 的演講,概略說明 DevTools 的未來發展方向。請觀看下方影片或繼續閱讀本文,進一步瞭解開發人員工具在 2016 年及之後的發展方向。

編寫

DevTools 的目標是讓網路開發生命週期的每個階段都更輕鬆。您可能知道開發人員工具可協助您對網站進行偵錯或分析,但可能不知道如何使用這項工具來編寫網站。「著作」是指建立網站的行為。我們在可預見的未來,希望能讓您更輕鬆地在多部裝置上進行網站的疊代、實驗和模擬作業。

裝置模式

開發人員工具團隊持續改善裝置模式體驗,這項功能在 Chrome 49 中首次獲得重大升級。請參閱 3 月的文章 (行動裝置優先時代的新裝置模式),瞭解更新概況。我們的首要目標,是提供無縫的工作流程,讓您在所有板型規格中查看及模擬網站。

自我們在 3 月發布這篇文章以來,Canary 已推出一些裝置模式更新,以下簡要說明這些更新。

以特定裝置查看網頁時,您可以顯示裝置硬體,讓使用者更身歷其境。

顯示裝置邊框

您可以透過裝置方向選單,在導覽列和鍵盤等不同系統 UI 元素處於啟用狀態時查看網頁。

顯示系統 UI 元素

電腦版的動態消息也經過改善。由於裝置模式有縮放功能,您可以模擬比實際使用的螢幕更大的電腦螢幕,例如 4K (3840px x 2160px) 螢幕。

顯示 4K 畫面

您可以直接透過裝置模式 UI 限制網路,而不必切換至「Network」面板。

網路節流

來源差異

當您重複執行網站樣式的作業時,很容易就會遺漏變更內容。為解決這個問題,開發人員工具會在「來源」面板的列號空白處使用視覺提示,協助您追蹤變更。刪除的行會以紅線標示,修改過的行會以紫色標示,新行則會以綠色標示。

「來源」面板中的來源差異

你也可以在新的「快速來源」抽屜分頁中追蹤變更:

「快速來源」抽屜分頁

首次使用時,您可以透過「快速來源」分頁,同時專注於 HTML 或 JavaScript 原始碼和 CSS 規則。此外,當您在「樣式」窗格中點選 CSS 屬性時,「快速來源」分頁會自動跳至來源中的定義,並加以醒目顯示。

立即在 Chrome Canary 中啟用 sources diff 實驗,體驗這項功能。

即時編輯 Sass

以下搶先一窺 Sass 編輯工作流程即將推出的重大改善項目。這些功能仍處於實驗階段的早期。我們會在後續的文章中說明試用方式。

基本上,DevTools 會讓您查看及編輯 Sass 變數,就像您一直希望它能做到的一樣。按一下從 Sass 變數編譯的值,新的「快速來源」分頁會跳至變數定義。

查看 Sass 變數定義

編輯從 Sass 變數編譯的值時,系統會更新 Sass 變數,而非只更新所選的個別屬性。

漸進式網頁應用程式

看看 Google I/O 2016 的網路和 Chrome 講座清單,您會發現網頁開發領域出現了一個重大主題:漸進式網頁應用程式

隨著漸進式網頁應用程式模型的出現,開發人員工具也迅速迭代,提供開發人員建立優質漸進式網頁應用程式所需的工具。我們發現,建構及偵錯這些現代應用程式時,通常會出現特殊需求,因此 DevTools 已將整個面板專用於漸進式網頁應用程式開發。開啟 Chrome Canary 後,您會發現「資源」面板已改為「應用程式」面板。資源面板中的所有功能都仍可使用。我們只設計了幾個專為漸進式網頁應用程式開發而設計的新窗格:

「資訊清單」窗格會以視覺化方式呈現應用程式資訊清單檔案。您可以在這裡手動觸發「新增至主畫面」工作流程。

「資訊清單」窗格

您可以透過「Service Workers」窗格,檢查並與目前網頁註冊的 Service Worker 互動。

Service Worker 窗格

您可以使用「清除儲存空間」窗格清除所有類型的資料,以便查看全新的頁面。

「清除儲存空間」窗格

JavaScript

跨越前端和後端的界線,是全端網頁開發的難題。如果您發現後端在偵錯網頁應用程式時會傳回 500 狀態碼,就表示 DevTools 已發揮最大效用,您必須變更情境並啟動後端開發環境,才能偵錯問題。

不過,如果後端是用 Node.js 編寫的,前端和後端之間的界線就會開始模糊。由於 Node.js 會在 V8 JavaScript 引擎上執行 (同為 Google Chrome 的動力來源),因此我們希望能透過 DevTools 對 Node.js 進行偵錯。多虧 V8、DevTools 和 Google Cloud Platform for Node.js 團隊,您現在可以使用 DevTools 的所有強大偵錯功能來檢視 Node.js 應用程式。這項功能已在 Node.js 夜間版本中推出,但 DevTools 整合功能仍在持續改良中,之後才會納入主要版本。未來,透過開發人員工具偵錯 Node.js 應用程式將會變得簡單,就像傳遞 node --inspect app.js 並透過任何 Chrome 視窗中的開發人員工具連線一樣簡單。

雖然 Node Inspector 等現有工具可提供以 GUI 為基礎的偵錯體驗,但新的 Node.js 開發人員工具整合功能將持續更新,提供開發人員工具的最新偵錯功能,例如非同步堆疊偵錯、黑箱化和 ES6 支援。