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 😸','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);

參考鏈接