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

参考链接