開發者工具的新特性 (Chrome 71) [雙語+視訊]

丁香園F2E發表於2018-12-07
Chrome

Chrome 71 開發者工具的新特性和主要改動包括:

New features and major changes coming to Chrome DevTools in Chrome 71 include:

  • Hover over a Live Expression to highlight a DOM node
  • Store DOM nodes as global variables
  • Initiator and priority information now in HAR imports and exports
  • Access the Command Menu from the Main Menu
  • Picture-in-Picture breakpoints
  • (Bonus Tip) Run monitorEvents() in the Console to watch an element's events fire
繼續閱讀, 或者是觀看該頁面的視訊版本:
Read on, or watch the video version of this page:

譯者注: 視訊中提到的 Mordor(摩多) -> en.wikipedia.org/wiki/Mordor

視訊說明(源自 YouTube)
New to DevTools in Chrome 71

0:10 → Hover over Live Expression to highlight DOM node

0:46 → Store DOM nodes as global variables

1:19 → Initiator and priority info in HAR file

2:13 → Access Command Menu from Main Menu

2:32 → Bonus Tip!

What’s New in DevTools (Chrome 71) Blog → bit.ly/Chrome71

Discuss these features and changes on the mailing list → goo.gl/RvWtFx Or tweet us → twitter.com/chromedevto…

What's New in DevTools playlist → bit.ly/2JrUPYi

Subscribe to the Google Chrome Developers channel → bit.ly/ChromeDevs1

懸浮在一個 Live Expression 來高亮一個 DOM 節點
Hover over a Live Expression to highlight a DOM node
當一個 Live Expression 的執行結果為一個 DOM 節點時, 懸浮在 Live Expression 的結果之上來在視口中高亮該結果.
When a Live Expression evaluates to a DOM node, hover over the Live Expression result to highlight that node in the viewport.
開發者工具的新特性 (Chrome 71) [雙語+視訊]
圖片 1. 懸浮在一個 Live Expression 的結果之上來在是口中高亮這個節點
Figure 1. Hovering over a Live Expression result to highlight the node in the viewport

儲存 DOM 節點為全域性變數
Store DOM nodes as global variables
為了儲存一個 DOM 節點為全域性變數, 在 Console 中執行一個表示式, 其執行結果為一個節點, 右擊執行結果, 然後選擇 Store as Global variable.
To store a DOM node as a global variable, run an expression in the Console that evaluates to a node, right-click the result, and then select Store as global variable.
開發者工具的新特性 (Chrome 71) [雙語+視訊]
圖片 2. 在 Console 中 Store as global variable
Figure 2. Store as global variable in the Console
或者, 在 DOM 樹中右擊該節點, 然後選擇 Store as global variable.
Or, right-click the node in the DOM Tree and select Store as global variable.
開發者工具的新特性 (Chrome 71) [雙語+視訊]
圖片 3. 在 DOM樹 中 Store as global variable
Figure 3. Store as global variable in the DOM Tree

Initiator 和 priority 資訊現在存在 HAR 匯入和匯出中

Initiator and priority information now in HAR imports and exports
如果你想要和同事分享診斷網路的日誌, 你可以將網路請求匯出到一個 HAR 檔案
If you'd like to diagnose network logs with colleagues, you can export the network requests to a HAR file.
開發者工具的新特性 (Chrome 71) [雙語+視訊]
圖片 4. 匯出網路請求到一個 HAR 檔案中
Figure 4. Exporting network requests to a HAR file
要匯入這個檔案回到網路皮膚中, 只要拖拽和放下該檔案(譯者注: 必須在網路皮膚中)
To import the file back into the Network panel, just drag and drop it.
當你匯出一個 HAR 檔案的時候, DevTools 現在在 HAR 檔案中包含 initiator 和 priority 資訊. 當你匯入一個 HAR 檔案回到 DevTools的時候, initiator 和 Priority 列現在將被填充.
When you export a HAR file, DevTools now includes initiator and priority information in the HAR file. When you import HAR files back into DevTools, the Initiator and Priority columns are now populated.
_initiator 欄位提供了有關導致該資源被請求的更多上下文. 其和 Requests 表格中的 Initiator 列相對應.
The _initiator field provides more context around what caused the resource to be requested. This maps to the Initiator column in the Requests table.
開發者工具的新特性 (Chrome 71) [雙語+視訊]
圖片 5. initiator 列
Figure 5. The initiator column
你可以 按住 Shift 並且懸浮在一個請求 之上來檢視它的啟動器(譯者注: 引起 該請求被髮起 的請求)和依賴項(譯者注: 依賴該請求的請求)
You can also hold Shift and hover over a request to view its initiator and dependencies.
開發者工具的新特性 (Chrome 71) [雙語+視訊]
圖片 6. 檢視啟動器和依賴項
Figure 6. Viewing initiators and dependencies
_priority 欄位說明瀏覽器分配給該資源的優先順序. 其和 Requests 表格中的 Priority 列相對應, 這一列預設是隱藏的.
The _priority field states what priority level the browser assigned to the resource. This maps to the Priority column in the Requests table, which is hidden by default.
開發者工具的新特性 (Chrome 71) [雙語+視訊]
圖片 7. Priority 列
Figure 7. The Priority column
右擊 Requests 表格的頭部, 然後選擇 Priority 來顯示 Priority 列.
Right-click the header of the Requests table and select Priority to show the Priority column.
開發者工具的新特性 (Chrome 71) [雙語+視訊]
圖片 8. 如何展示 Priority 列
Figure 8. How to show the Priority column
注意: _initiator 和 _priority 欄位以下劃線開頭是因為 HAR 規範 說明自定義的欄位必須以下劃線開頭.
Note: The _initiator and _priority fields begin with underscores because the HAR spec states that custom fields must begin with underscores.

從主選單進入命令選單
Access the Command Menu from the Main Menu
使用命令選單來快速進入 DevTools 皮膚, 標籤, 和特性.
Use the Command Menu for a fast way to access DevTools panels, tabs, and features.
開發者工具的新特性 (Chrome 71) [雙語+視訊]
圖片 9. 命令選單
Figure 9. The Command Menu
你現在可以從主選單開啟命令選單. 點選主選單 main 按鈕, 然後選擇 Run command.
You can now open the Command Menu from the Main Menu. Click the Main Menu main button and select Run command.
開發者工具的新特性 (Chrome 71) [雙語+視訊]
圖片 10. 從主選單開啟命令選單
Figure 10. Opening the Command Menu from the Main Menu

Picture-in-Picture 斷點
Picture-in-Picture breakpoints
Picture-in-picture 是一個新的實驗性 API, 其允許一個頁面在桌面上面建立一個浮動的視訊視窗.
Picture-in-Picture is a new experimental API that enables a page to create a floating video window over the desktop.
在 Event Listener Breakpoints 皮膚 選中 enterpictureinpicture, leavepictureinpicture, resize 核取方塊, 來在任意一個 picture-in-picture 事件觸發的時候停止執行. DevTools 停止在 處理函式 的第一行.
Enable the enterpictureinpicture, leavepictureinpicture, and resize checkboxes in the Event Listener Breakpoints pane to pause whenever one of these picture-in-picture events fires. DevTools pauses on the first line of the handler.
開發者工具的新特性 (Chrome 71) [雙語+視訊]
圖片 11. Event Listener Breakpoints 皮膚下的 Picture-in-Picture 事件
Figure 11. Picture-in-Picture events in the Event Listener Breakpoints pane

(驚喜提示) 在 Console 中執行 monitorEvents() 來監聽一個元素的事件觸發
(Bonus Tip) Run monitorEvents() in the Console to watch an element's events fire
注意: 該段介紹一個較不為人所知的特性, 但是其已經存在於 DevTools 中很長時間了.
Note: This section covers a lesser-known feature that has been in DevTools for a long time.
假設你想要在這個 button 被聚焦同時依次按下 R, E, D 的時候給它的周圍新增一個紅色的邊框, 但是你不知道要監聽什麼事件. 使用 monitorEvents() 來在 Console 中列印關於該元素的所有事件.
Suppose you want to add a red border around a button after focusing it and pressing R, E, D, but you don't know what events to add listeners to. Use monitorEvents() to log all of the element's events to the Console.
  1. 獲取該節點的一個引用.
    Get a reference to the node.
    開發者工具的新特性 (Chrome 71) [雙語+視訊]
    圖片 12. 使用 Store as global variable 來獲取該節點的一個引用
    Figure 12. Using Store as global variable to get a reference to the node
  2. 將該節點作為第一個引數傳遞給 monitorEvents()
    Pass the node as the first argument to monitorEvents().
    開發者工具的新特性 (Chrome 71) [雙語+視訊]
    圖片 13. 傳遞該節點給 monitorEvents()
    Figure 13. Passing the node to monitorEvents()
  3. 和該節點做互動. DevTools 在 Console 中列印關於該節點的所有事件.
    Interact with the node. DevTools logs all of the node's events to the Console.
    開發者工具的新特性 (Chrome 71) [雙語+視訊]
    圖片 14. Console 中的該節點的事件
    Figure 14. The node's events in the Console
呼叫 unmonitorEvents() 來停止在 Console 中列印事件.
Call unmonitorEvents() to stop logging events to the Console.
unmonitorEvents(temp1);
複製程式碼
如果你只想監聽某一個特定的事件或者是某型別的事件, 給 monitorEvents() 傳遞第二個引數, 其為陣列:
Pass an array as the second argument to monitorEvents() if you only want to monitor certain events or types of events:
monitorEvents(temp1, ['mouse', 'focus']);
複製程式碼
mouse 型別告訴 DevTools 去列印所有和滑鼠相關的事件, 比如 mousedown 和 click. 支援的其他型別為 key, touch, control.
The mouse type tells DevTools to log all mouse-related events, such as mousedown and click. Other supported types are key, touch, and control.
檢視 Command Line Reference, 來獲得你可以在 Console 中呼叫的其他方便的函式.
Check out Command Line Reference for other handy functions that you can call from the Console.

反饋
Feedback

想要討論關於該篇文章的新特性和改動, 或者是其他任何和 DevTools 相關的:

  • 在 Chromium Bugs 發起一個 bug 報告
  • 在 Mailing List 中討論新特性和改變. 請不要使用該郵件列表尋求幫助. 使用 Stack Overflow, 替代.
  • 使用 Stack Overflow 獲取如何使用 DevTools 的幫助. 請不要再 Stack Overflow 上提出 bug. 使用 Chromium Bugs, 替代.
  • Tweet us at @ChromeDevTools.
  • 在 Web Fundamentals 倉庫提出關於該文件的 bug.

To discuss the new features and changes in this post, or anything else related to DevTools:

  • File bug reports at Chromium Bugs.
  • Discuss features and changes on the Mailing List. Please don't use the mailing list for support questions. Use Stack Overflow, instead.
  • Get help on how to use DevTools on Stack Overflow. Please don't file bugs on Stack Overflow. Use Chromium Bugs, instead.
  • Tweet us at @ChromeDevTools.
  • File bugs on this doc in the Web Fundamentals repository.

Consider Canary
Consider Canary
如果你使用 Mac 或者是 Windows, 考慮使用 Chrome Canary 作為你的預設開發瀏覽器. Canary 可以讓你體驗到最新的 DevTools 特性.(譯者注: 譯者已經將 Chrome Canary 作為預設瀏覽器很久了, 為 Web 稍作貢獻)
If you're on Mac or Windows, consider using Chrome Canary as your default development browser. Canary gives you access to the latest DevTools features.
注意: Canary 一旦構建就會發布, 沒有測試. 這意味著 Canary 幾乎每月崩潰一次. 通常在一天之內就會被修復. 在 Canary 崩潰的時候你可以回到使用 Chrome Stable.
Note: Canary is released as soon as its built, without testing. This means that Canary breaks about once-a-month. It's usually fixed within a day. You can go back to using Chrome Stable while Canary is broken.

譯者注:

譯者在翻譯的時候保留了英語原文, 希望給你一個原滋原味的閱讀體驗並且能熟悉一些常見的英文.

希望有讀者可以指出我的翻譯錯誤, 感激不盡.

譯文轉載請註明出處, 文中所有資源 LISENCE 均跟隨源資源.

其他雙語譯文:

翻譯本文時用到的一些工具:

相關文章