Chrome DevTool Console APIs

Console APIs

来自: https://developer.chrome.com/docs/devtools/console/api

以下插件可在 JavaScript 代码中使用, 非 DevTools 专有 API

• console.assert(assertion, obj1[, obj2...]): 传入一个 boolean 若为假则抛出异常

  console.assert(number % 2 === 0, {number: number, errorMsg: errorMsg});

• console.count([label]): 输出 label 被放入 count 执行的次数

  console.count(); // default: 1 (不写 label 就是 default)
  console.count('coffee');// coffee: 1
  console.count('coffee');// coffee: 2
  console.count(); // default: 2

• console.countReset([label]): 重置一个 count

• console.debug / info / error / warn: 与 console.log 用法相同, 但等级不同

• console.dir(): 打印对象

• console.dirxml(xml): 打印 XML 对象

  console.dirxml(document);

• console.table: 打印表格

• console.group*: 一系列打印可折叠日志的方法

• console.time([label]) / console.timeEnd([label]): 计时

  console.time();
  for (var i = 0; i < 100000; i++) {
    let square = i ** 2;
  }
  console.timeEnd();

• console.trace(): 打印当前调用栈

  const first = () => { second(); };
  const second = () => { third(); };
  const third = () => { fourth(); };
  const fourth = () => { console.trace(); };
  first();

Console 实用 APIs

内容来自: https://developer.chrome.com/docs/devtools/console/utilities

以下 API 在 JS 中不可用, 仅限 DevTool 下使用

• $_: 返回最近计算的表达式值

• $0-$4: 返回最近 1 - 5 个 Element 面板选中的元素

• $(selector, startNode): 选中一个元素, 相当于 document.querySelector(selector), 其中 startNode 为检索的根节点. 注意这不是 jQuery

• $$(selector, startNode): 选中元素, 相当于 document.querySelectorAll(selector), 其中 startNode 为检索的根节点. 注意这不是 jQuery

• $x(selector): 通过 xpath 选中元素, 例如 $x("//p")

• copy(object) 将指定对象的字符串表示形式复制到剪贴板

  copy($0);

• debug(fn) / undebug(fn): 调试函数, 当函数被调用时中断执行并跳转源代码面板

• dir / dirxml / key / value: 和 console.* 一样, 只不过是做了 preclude

• inspect(object / function): 若为 Element 则在 Element 面板选中元素. 若为 function 则在源代码中显示函数

• getEventListeners(element): 获取 Element 的所有事件监听.

• keys(object) / values(object): 获取对象的 key / value

• monitor(fn) / unmonitor(fn): 当函数被调用时输出函数名与调用参数

  function sum(x, y) {
    return x + y;
  }
  monitor(sum);
  
  sum(1,2) // function sum called with arguments: 1, 2

• monitorEvents(element, stirng[] | string) / unmonitorEvents(object[, events]): 监听对象的事件被触发, 触发后输出事件与 event

  monitorEvents(window, ["resize", "scroll"])
  // resize Event {isTrusted: true, type: 'resize', target: Window, currentTarget: Window, eventPhase: 2, …}
  monitorEvents($0, "key");

• profile([label]) / profileEnd([label]): 开启 / 关闭一个 JavaScript 性能分析. 关闭后可在 DevTool 的 JavaScript 性能剖析器查看分析内容. 支持同时开多个分析器

• queryObjects(Constructor): 返回一个构造函数的所有实例的类数组

  queryObjects(Promise)
  //Array(20)
  //	0: Promise {<pending>}
  //	1: Promise {<pending>}