$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);

参考链接