Chrome DevTools Tips
$0
$0可以用來表示當前在Chrome DevTools中的Elements欄中檢視頁面資訊中選中的html節點
- $0 表示當前選中的節點資訊
- $1 表示當前選中的節點的下一個節點資訊
- $2 表示當前選中的節點的上一個節點資訊
$和$$
$在console控制檯中是document.querySelector方法的別名【未定義$的情況下】，$$則是document.querySelectorAll的方法並將結果以陣列的形式返回NodeList型別
$$的作用簡單表示
Array.from(document.querySelectorAll('div')) === $$('div')
$_
$_ 可以用在控制檯中作為上一個值的引用直接使用，節省時間
- 使用
Math.random(); // 0.2505550952725395 $_ // 0.2505550952725395
$i
搭配外掛Console Importer使用， 注意：有些頁面受CSP安全策略影響無法使用
當需要引入某個庫時，可以使用$i(npm package name); 比如：$i('lodash');提示成功後，就可以在控制檯中使用lodash庫提供的方法了
copy(...)
DevTools中提供的copy方法可以用來將控制檯Console中任何存在的東西複製到貼上板上
- 使用
msg = 'asdf'.repeat(3); // asdfasdfasdf copy($_) // asdfasdfasdf
console.assert
使用console.assert斷言列印自定義資訊提示，如果console.assert第一個引數是falsy值則會列印自定義資訊
- 使用
value = null; console.assert(value,'Value is empty'); // VM5452:2 Assertion failed: Value is empty
console.table
用於將資料按照表格的形式輸出，視覺上更加直觀
- 使用
console.table(data);
console.dir
可以使用console.dir將DOM節點的詳細資訊和預設屬性打印出來
- 使用
console.dir(NodeType);
Consle is Async
在Console中,要使用async await不用手動包裹一層async,可直接使用await,因為它預設已經加了Async
resp = await fetch('url');
json = await fetch('url');
monitor functions
可以用來追蹤檢視某個屬性或方法被呼叫
- 使用
class Person {
constructor(name, role) {
this.name = name;
this.role = role;
}
greet() {
return this.getMessage('greeting');
}
getMessage(type) {
if (type === 'greeting') {
return `Hello, I'm ${this.name}!`;
}
}
}
j = new Person('Json');
m = new Person('Mary');
monitor(j.getMessage);
j.greet(); //function getMessage called with arguments: greeting
// "Hello, I'm Json!"
monitorEvent
給某個節點新增監聽事件
- 使用
monitorEvent(nodeReference, eventName);
console.log新增css
可以自定義輸出內容的樣式
- 使用
console.log('%cHello Console :smile_cat:','color:lightblue; font-size:30px')
// %c 作為文字內容的字首 後面為輸出內容，第二個引數為輸出的樣式
讓console.log 更可讀
一般情況下我們使用console.log去列印一些變數或屬性時，只會打印出對應的值，如果不去手動新增對應的key，當內容很多的時候很容易搞混,這時只需要在console.log中加上一對{},就可以以物件的形式，將內容輸出，當然也可以使用console.table，使用方法完全一致,將值以表格的形式打印出來
let name = 'game'; let something = 'limbo'; let anything = 'inside'; let number = 34; console.log(name,something,anything,number); // game limbo inside 34
自定義當前頁面的網速
-
方法一：
- 步驟 --> Customize and control DevTools --> Settings --> Throtting -->Add custom profile... 即可以自定義網路
-
二：
- 步驟 --> Customize and control DevTools --> More tools -->Network conditions --> NetWork throtting
即可以自定義網速，同時在下面一個選項User agent中還可以自定義UA，也可以選擇已有的各種瀏覽器UA...
回撥函式中可直接使用console.log
getList(v=>console.log(v)); getList(console.log);