嗨,我是 Kayce,又到了每月一次的摘要時間,讓我為您更新 DevTools 自上個月以來的最新功能。
管理中心的新功能
在目前處於 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 Browser。

分享是關懷的表現
一如往常,我們十分歡迎您提供任何與 DevTools 相關的意見或想法。
- 如有簡短的問題或意見回饋,或想分享新想法,請透過 Twitter 與我們聯絡,ChromeDevTools。
- 如需進行較長的討論,建議您使用郵寄清單或 Stack Overflow。
- 如有任何與文件相關的問題,請在 Google 文件存放區提出問題。
- 您隨時可以直接向團隊回報錯誤,或在 Crbug 上提出功能要求。
下個月見!
Kayce