玩转Chrome开发者工具2022(3/5)

7.控制台对消息的过滤

使用控制台查看信息时，可以快速的切换分类

用"1"标记的按钮可以用控制用"2"标记区域的展开与收缩，如果"2"区域展开，用"3"标记的区域就会置灰。

点击"2"区域的三角，还会展示具体来源，进行更详细的过滤

直接通过Ctrl + F 搜索

可以按照url过滤

键入"url:" DevTools 后会显示所有相关的 URL。键入"-url:" 可以反向过滤

可以按照正则过滤

例如: "/http/"，点击控制台自己的设置按钮

隐藏网络

浏览器将网络消息记录到控制台,例如加载图片的404，不建议取消勾选

记录XMLHttpRequest

勾选后，发送的ajax请求会被记录在控制台中

保留日志

勾选后，加载新页面时候控制台信息不会被清除

仅限已选的上下文

只有这个勾选了，更改下面的区域才会起作用，切换iframe、扩展

在控制台对相似消息进行分组

用for循环输出了6个1，勾选此选项将看到

在控制台显示CORS错误

取消勾选后，将无法看到跨域报错，例如

Access to fetch at 'http://192.168.137.1:9192/example/testApi' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

查看输出信息

在不同类型的消息体上右键会有不同的操作，这一方式适用于Chrome开发者工具的每一个角落

控制台首先对自己的对象属性进行排序并以粗体突出显示它们,从原型链继承的属性是常规字体。控制台通过评估内置对象的相应本机访问器将它们显示在对象本身上。

如果自定义了访问器，比如Vue2双向绑定的实现( Getter)，就会在属性后面展示三个...，要自己展开

可枚举的属性相对于不可枚举的属性颜色要鲜艳。

控制台#用前缀指定类实例的私有属性。

[[Prototype]]表示对象的私有属性，您无法与代码中的此类属性进行交互。但是，检查它们可能很有用。

清除控制台

通过按钮

或者以下方式

• 右键单击消息，然后选择"清除控制台"
• 在控制台中输入 clear()，然后按 Enter。
• js调用 console.clear()
• 在控制台处于焦点时按 Control+ L

8.console家族的妙用

console.dir

日志级别是info，查看函数内部属性

  function sum() {

  }
  console.dir(sum)

打印指定对象的json表示

console.dir(document.body)

格式化代码

const tools = 'Chrome DevTools';
console.warn('%s is awesome.', tools);

//Chrome DevTools is awesome.

还可以用作格式转换

console.log('I have %i apples and %d oranges.', 2, 3.5);

// I have 2 apples and 3 oranges.

虽然给的值是3.5 但输出的时候是 3，%d 表示该被转换为整数。

如果单独输出数字 颜色是蓝色的

给输出信息赋予样式

要在代码里执行

const style = 'background-color: darkblue; color: white; font-style: italic; border: 5px solid hotpink; font-size: 2em;'
console.log("%cHooray", style);

支持的符号如下

• %s 将值格式化为字符串
• %i 或者%d 将值格式化为整数
• %f 将值格式化为浮点值
• %o 将值格式化为可展开的 DOM 元素
• %O 将值格式化为可扩展的 JavaScript 对象
• %c 将 CSS 样式规则应用于第二个参数指定的输出字符串

console.log 有展示问题

    const a = ["12", "15"];
    console.log("wx", a);
    a.push("6");
    console.log("wx", a);

如果你在变动之前打印信息，它可能会影响你的判断，这个在业务代码中可能会变得复杂

console.debug、console.info、console.warn、console.error除了c%都是支持的。