開發者工具又加了什麼好東西？(Chrome 68)

噠噠噠_發表於2018-05-31
Chrome

轉載自 blog.vvvvvvvvvvvvvvv.com/2018/05/28/…

由 Chrome官方文章 翻譯, 建議檢視英文原文, 作為程式設計師, 讀懂官方文件應當是必備的技能(因為譯文包含了譯者的思維, 不一定能精確的表達原文想要表達的思維). 能拿到這些 '核心資料' 也是必備的技能

Notes: 這些釋出說明的視訊版本大約在 2018.7 月底左右發行

新的 Chrome 68 開發者工具:

  • Eager Evaluation(即刻求值). 當你鍵入表示式時, 控制檯會預覽結果.
  • Argument hints(引數提示). 當你鍵入函式, 控制檯會向你展示該函式期望的引數.
  • Function autocompletion(函式自動補全). 在你鍵入一個函式呼叫後, 如 document.querySelector('p'), 控制檯會向你展示返回值支援的函式和屬性.
  • ES2017 keywords in the Console(ES2017 控制檯關鍵詞). 關鍵字, 如 await, 現在已經支援在控制檯的自動補全.
  • Lighthouse 3.0 in the Audits panel. 更快, 更一致的 audit(審查), 新 UI, 和新的審查工具.
  • BigInt support(BigInt 支援). 在控制檯嘗試 JavaScript 的新的 arbitrary-precision integer(任意精度的整形數字).
  • Adding property paths to the Watch pane(在 Watch 皮膚增加 新增屬性路徑)
  • "Show timestamps" moved to Settings("顯示時間戳" 移動到 設定 裡).

Notes: 執行 chrome://version 來檢查你的 Chrome 版本. 如果你正在執行的是之前版本, 這些特性不會存在. 如果你正在執行的是之後版本(譯者注: 比當前版本新), 這些特徵有可能被改變. Chrome 大約每 6 周自動更新到一個新的主版本.

輔助工具控制檯

Chrome 68 帶來了一些新的關於自動補全和預覽的控制檯特性

Eager Evaluation(即刻求值)

當你在控制檯鍵入表示式的時候, 控制檯現在可以在你的指標下面顯示這個表示式的預覽結果.

eagereval

圖片 1: 在控制檯明確的執行之前會列印 sort() 操作的結果.

開啟 Eager Evaluation(即刻求值):

  1. 開啟 控制檯
  2. 開啟 控制檯設定 settings
  3. 開啟 Eager evaluation 核取方塊

如果表示式有副作用, 開發者工具不會立即求值

Argument hints(引數提示)

但你鍵入函式呼叫的時候, 控制檯現在向你顯示這個函式所期望的引數.

arghints

圖片 2: 控制檯的引數提示的幾個例子

Notes:

  • 一個問號在引數前, 例如 ?options, 代表這是一個可選引數.
  • 一個省略號在引數前, 例如 ...items, 代表這是一個 spread 型別引數.
  • 一些函式, 例如 CSS.supports(), 接受多個引數簽名.

Autocomplete after function executions(在函式呼叫之後的自動補全)

Notes: 該特性依賴 Eager Evaluation(即刻求值), 其需要從控制檯設定中開啟 settings

在開啟 Eager Evaluation(即刻求值) 之後, 控制檯也會向你顯示在呼叫一個函式之後, 其有效的屬性和函式.

autocomplete

圖片 3: 上面的截圖展示了老的行為, 下面的截圖展示了支援函式補全的新的行為

ES2017 keywords in autocomplete(ES2017 關鍵詞補全)

ES2017 關鍵詞, 如 await, 現在已經支援在控制檯的自動補全

開發者工具又加了什麼好東西？(Chrome 68)

圖片 4: 控制檯現在在自動補全的 UI 上建議 await

Faster, more reliable audits, a new UI, and new audits(更快, 更一致的 audit(審查), 新 UI, 和新的審查工具)

Chrome 68 帶來了 Lighthouse 3.0, 接下來的這一段聚合了一些大的改變, 全部改變另見 Announcing Lighthouse 3.0

更快, 更一致的審查

Lighthouse 3.0 擁有新的內部審查引擎, 代號為 Lantern, 其更快的完成你的審查和在執行時有更少的差異.

新的 UI

Lighthouse 3.0 也帶來了新的 UI, 感謝在 Lighthouse 和 Chrome UX (Research & Design) 團隊之間的合作.

lighthouse3

圖片 5: Lighthouse 3.0 的新的報告 UI

新的 審查工具

Lighthouse 3.0 也帶來了 4 個新的審查工具:

  • First Contentful Paint
  • robots.txt is not valid (robots.txt 檔案無效)
  • Use video formats for animated content (對於動畫的內容使用視訊格式)
  • Avoid multiple, costly round trips to any origin (避免多次, 昂貴的往返任何來源)

BigInt support (BigInt 支援)

Note: 這個不是開發者工具的特性, 但是這是一個可以在控制檯體驗的新的 JavaScript 能力.

Chrome 68 支援一個新的數字型的原始型別, 叫 BigInt, BigInt 允許你申明一個任意精度的整型數字. 在控制檯嘗試一下:

bigint

圖片 6: 控制檯裡的一個 BigInt 例子

Add property path to watch(向 watch 新增一個屬性路徑)

在斷點處暫停的時候, 在 Scope 皮膚右擊一個屬性, 然後選擇 Add property path to watch 來新增這個屬性到 Watch 皮膚.

watch

圖片 7: Add property path to watch 的一個例子

感謝 PhistucK 的貢獻

"Show timestamps" moved to settings("顯示時間戳" 移動到 設定 裡)

以前在 Console Settingssettings 中的 Show timestamps 核取方塊被移動到 Settings.

Consider Canary(考慮 Canary)(譯者注: 考慮成為金絲雀)

如果你在使用 Mac 或者是 Windows, 請考慮使用 Chrome Canary 作為你的預設開發瀏覽器. 如果你報告了一個你不喜歡的但是卻仍然在 Canary 中存在的 bug 或者是 change, 開發者工具團隊可以顯著的更快的處理你的反饋.

Note: Canary 是 Chrome 的最新版本, 其一旦被 build 就會發布, 沒有測試. 這意味著 Canary 時不時的會崩潰, 大概一月一次, 並且通常在一天之內被修復. 你可以在 Canary 崩潰的時候繼續使用 Chrome Stable(穩定版 Chrome).

相關文章