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

• 本文來源: developers.google.com/web/updates…
• 文章做者: Kayce Basques Chrome DevTools & Lighthouse 技術文檔工程師
• 文章 LISENCE: creativecommons.org/licenses/by…
• 文章中的代碼 LISENCE: www.apache.org/licenses/LI…
• 視頻來源: www.youtube.com/watch?v=fJx…
• 視頻 LISENCE: support.google.com/youtube/ans…
• 譯者: 蔣璇, 就任於 丁香園, 任職 Insight 醫藥數據庫 前端開發. 開源社區熱愛者

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

• 懸停在 Live Expression 來高亮 DOM 節點
• 存儲 DOM 節點做爲全局變量
• Initiator 和 priority 信息如今在 HAR 導出和導入中
• 從主菜單訪問命令菜單
• Picture-in-Picture 斷點
• (驚喜提示) 在 Console 運行 monitorEvents() 來監聽元素的事件觸發

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.

圖片 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.

圖片 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.

圖片 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.

圖片 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.

圖片 5. initiator 列

Figure 5. The initiator column

你能夠 按住 Shift 而且懸浮在一個請求 之上來查看它的啓動器(譯者注: 引發 該請求被髮起 的請求)和依賴項(譯者注: 依賴該請求的請求)

You can also hold Shift and hover over a request to view its initiator and dependencies.

圖片 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.

圖片 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.

圖片 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.

圖片 9. 命令菜單

Figure 9. The Command Menu

你如今能夠從主菜單打開命令菜單. 點擊主菜單 按鈕, 而後選擇 Run command.

You can now open the Command Menu from the Main Menu. Click the Main Menu button and select Run command.

圖片 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.

圖片 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.

   

   圖片 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().

   

   圖片 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.

   

   圖片 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 均跟隨源資源.

其餘雙語譯文:

• React 16.x 藍圖[雙語版]

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

• 視頻下載工具: qdownloader.net/
• 雙語字幕製做工具: arctime.org/index.html
• 雙語字母稿: github.com/Jiang-Xuan/…