Chrome 功能總結

原文：https://developers.google.com/web/updates/2017/08/devtools-release-notes#await

1. 截圖

以前擷取網頁我都用qq，直接ctrl+alt+a。現在chrome自帶了截圖功能，可以擷取指定區域或者指定dom元素。

screenshot.png

擷取指定區域：按ctrl+shift+c, 然後按住滑鼠左鍵不放，選取網頁區域，最後鬆手會下載截圖的圖片。
擷取指定dom元素：右鍵檢查元素，按ctrl+shift+P開啟命令皮膚。輸入"capture node"。然後回車，就會下載內容為指定元素的圖片。

2. 新api

在console中，可以直接使用queryObjects查詢特定的constructor

• queryObjects(Promise). 返回所有的 Promises.
• queryObjects(HTMLElement). 返回所有的 HTML elements.
• queryObjects(foo), foo是函式名。返回所有例項化new foo()後的物件。

console

$

看到$大家不要以為是jquery，其實是瀏覽器自帶的一些api。這個在除錯上就比較方便！

關於$的api，我知道的有幾個，但是我使用過用的就下面兩個。其它的沒怎麼了解，大家有需要可以自行上網查詢資料！

$:返回第一個符合條件的元素，相當於document.querySelector

$$:返回所有符合條件的元素，相當於document.querySelectorAll

查詢和監控事件

getEventListeners作用就是查詢並獲取選定元素的事件。用法如下

image.png

monitorEvents作用是監控你所選元素關聯的所有事件，事件觸發時，在控制檯列印它們。

image.png

image.png

getEventListeners和monitorEvents感覺在開發上用得並不多了，至少我沒用過。但是感覺會有用，就提及一下

類似可以使用 monitor 來監控函式，每次呼叫該函式，就會列印出傳入的引數。

var func1 = function(x, y, z) {
//....
};

輸出：

image.png

參考：

• 14個你可能不知道的JavaScript除錯技巧