原文:https://developers.google.com/web/updates/2017/08/devtools-release-notes#await
1. 截圖
以前截取網(wǎng)頁我都用qq,直接ctrl+alt+a?,F(xiàn)在chrome自帶了截圖功能,可以截取指定區(qū)域或者指定dom元素。
screenshot.png
截取指定區(qū)域:按ctrl+shift+c, 然后按住鼠標(biāo)左鍵不放,選取網(wǎng)頁區(qū)域,最后松手會(huì)下載截圖的圖片。
截取指定dom元素:右鍵檢查元素,按ctrl+shift+P打開命令面板。輸入"capture node"。然后回車,就會(huì)下載內(nèi)容為指定元素的圖片。
2. 新api
在console中,可以直接使用queryObjects查詢特定的constructor
- queryObjects(Promise). 返回所有的 Promises.
- queryObjects(HTMLElement). 返回所有的 HTML elements.
- queryObjects(foo), foo是函數(shù)名。返回所有實(shí)例化new foo()后的對(duì)象。
console
大部分人經(jīng)常用 console.log()
使用 keys(console) 打印所有方法,keys 和 values 類似 Object.keys,Object.values 只在調(diào)試面板有用。
image.png
各個(gè)方法的詳細(xì)用法請(qǐng)查看 https://developers.google.com/web/tools/chrome-devtools/console/utilities
$
看到$大家不要以為是jquery,其實(shí)是瀏覽器自帶的一些api。這個(gè)在調(diào)試上就比較方便!
$:返回第一個(gè)符合條件的元素,相當(dāng)于document.querySelector
$$:返回所有符合條件的元素,相當(dāng)于document.querySelectorAll
查找和監(jiān)控事件
getEventListeners作用就是查找并獲取選定元素的事件。用法如下

monitorEvents作用是監(jiān)控你所選元素關(guān)聯(lián)的所有事件,事件觸發(fā)時(shí),在控制臺(tái)打印它們。


getEventListeners和monitorEvents感覺在開發(fā)上用得并不多了,至少我沒用過。但是感覺會(huì)有用,就提及一下
類似可以使用 monitor 來監(jiān)控函數(shù),每次調(diào)用該函數(shù),就會(huì)打印出傳入的參數(shù)。
var func1 = function(x, y, z) {
//....
};
輸出:
image.png
參考:


