開發人員工具摘要,2016 年 10 月

您好,Kayce,這次再次摘要可讓您掌握開發人員工具自上個月以來的更新資訊。

管理中心的新功能

在目前在 Canary 中提供的 Chrome 56 中,開發人員工具主控台由 CodeMirror 提供支援。進而提供許多新功能

輸入時語法醒目顯示。先前,DevTools 只能在程式碼區塊經過評估後,才會醒目顯示語法。

比對括號 / 方括號 / 大括號的醒目顯示功能。如果您有多餘的圓括號、方括號或大括號,DevTools 會以紅色標示。

不相符的括號

當遊標與括號、括號或大括號旁邊加上灰色時,系統會以灰色醒目顯示。

配對的括號

智慧回報:當您輸入多行程式碼區塊時,DevTools 現在會知道每次按下 Enter 時,是要建立新行還是執行程式碼。舉例來說,假設您想在控制台中評估下列 for 迴圈:

for (var i = 0; i < 5; i++) {
  console.log(i);
}

過去,在輸入第一行後按下 Enter 鍵,會導致開發人員工具評估該行,進而導致錯誤。如要將程式碼區塊繼續輸入至新行,請先按住 Shift 鍵,再按下 Enter 鍵。相反地,現在 DevTools 會在您按下 Enter 後,自動在新的行中繼續執行程式碼區塊,正如您預期的結果。

多個游標。按住 Command (Mac) 或 Control + Alt (Windows、Linux),然後點選。

多個游標

Canary 現已以紅色標示非頂層內容

如果您最近使用過主控台,可能會發生一個棘手的錯誤,那就是將執行結構定義選取器設為 top 以外的值。

這個錯誤現在應該已在穩定版中修正,但為了安全起見,Canary (Chrome 56) 中的 DevTools 會以紅色醒目顯示選取器,提醒您目前不在 top 上下文中。

非頂層內容以紅色醒目顯示

新使用者代理程式:UC Browser

您現在可以在「網路條件」分頁中選取 iOS、Android 或 Windows Phone 的 UC 瀏覽器。

UC 瀏覽器使用者代理程式

分享是關懷的表現

一如既往,我們很希望聽到您對 DevTools 的任何功能的意見或想法。

  • 如有簡短的問題或意見回饋,或想分享新想法,請透過 Twitter 與我們聯絡,ChromeDevTools
  • 如果討論時間較長,郵寄清單Stack Overflow 會是最佳選擇。
  • 如有任何與文件相關的問題,請在我們的文件存放區提出問題
  • 如有需要,您隨時都可直接向該團隊回報錯誤或提出 Crbug 功能要求。

下個月見!

Kayce