小迷糊

Chrome开发者工具-Console(一)

2021-10-28 Chrome Devtools

控制台学习进度40%🥝🥝

# JavaScript控制台

JavaScript控制台主要为开发者提供两方面功能：

  • 查看使用Console API提供的方法记录的代码诊断信息
  • 和DevTools其他面板进行交互，运行JavaScript

# 查看从JavaScript记录的消息

  1. 点击警告图标旁边的展开图标，DevTools会显示调用的堆栈跟踪。如下图显示，函数logWarning被调用了，该函数又调用了函数quoteDante。首先被调用的函数位于堆栈跟踪的底部，开发者可以随时通过 console.trace() 来记录堆栈跟踪

    WTobwoP7z9Iv09On34Io

  2. 在 Filter 框中可以输入单词或正则表达式进行消息过滤，或者输入url:url地址以仅查看来自该URL的消息，输入-url:url地址来隐藏来自该url的消息；点击控制台侧边栏WCuENTqHgjAR2Be3Hdqq会显示所有的消息来源，可以点击某一栏看具体的消息

    llVewt58uHx4kJzlAlH5

  3. 控制台是个 REPL（交互式解释器环境），包含读取、评估、打印和循环四个步骤。控制台读取输入的JavaScript，评估代码后，打印出输入表达式的结果，然后循环到第一步。在控制台可以运行与页面无关的任意JavaScript以测试你想要的功能

  4. 在控制台可以使用 $() 来代替 document.querySelector() 选择元素，但它跟jQuery没有关系

  5. debug(function) 可以在该函数的第一行设置一个断点；key(object) 返回一个包含指定对象键的数组

    image-20211028204135835

# 控制台功能参考

# 控制台设置

控制台设置。

  • Hide network：默认情况下浏览器会将网络消息记录到控制台（如下图的GET记录），如果勾选则隐藏网络消息

  • Log XMLHttpRequests：记录所有的XMLHttpRequests，并获取请求到Console

    t9sLCbiL3KrQW9MdLZoV

  • Preserve log：如果勾选，则页面刷新后会依然保留刷新前的log记录

  • Eager evaluation：在控制台输入JavaScript表达式时，会显示该表达式返回值的预览，禁用该选项可以关闭返回值预览

  • Selected context only：可以通过勾选这个选项来隐藏某些网页的广告在控制台生成的消息，因为这些广告和网页位于不同的JavaScript上下文

  • Autocomplete from history：当输入表达式时，控制台的自动完成弹出窗口会显示之前运行过的表达式，可根据需要决定是否禁用此选项

    显示历史表达式的自动完成弹出窗口。

  • Group similar messages in console：控制台的默认消息分组行为，如果禁用消息分组，消息就会一条条显示

# 清除控制台

  • 单击PleTkKOHeF03hC4BxBvM
  • 右键单击消息，然后选择清除
  • 在控制台输入clear()并回车
  • 在网页的JavaScript调用console.clear()
  • 当控制台处于焦点时按 Ctrl + L

# 控制台API参考

每个console方法都被分配了一个严重性级别：Verbose，Info，Warning或Error

  1. console.assert(expression,object)

    • 属于Error级别
    • 当表达式为false时向控制台写入错误

  2. console.clear()

    • 清除控制台
    • 如果启用Preserve log，则该方法被禁用
    • 可直接调用clear()

  3. console.count([label])

    • 使用如console.count('coffee')
    • 记录该行被调用的次数，通过标签名识别
    • 通过console.countReset([label])来重置计数

  4. console.debug(object[,object,...])

    • Verbose级别
    • 除了级别不同，其他类似于console.log()，用于显示调试输出

  5. console.dir(object)

    • Info级别
    • 打印指定对象的JSON表示
    • 可直接调用dir(object)

  6. console.dirxml(node)

    • Info级别
    • 打印节点后代的XML表示，如console.dirxml(document)
    • 可直接调用dirxml(node)
    The result of the console.dirxml() example above.

  7. console.error(object[,object,...])

    • Error级别
    • 在控制台打印object，将其格式化为错误，并使用堆栈跟踪

  8. console.group(label)

    • 可视化地将消息组合在一起，直到调用console.groupEnd(label)
    • 如果调用console.groupCollapsed(label)则消息会折叠

    image-20211031151312263

  9. console.info()

    • Info级别
    • 与console.log()相同

  10. console.log(object[,object,...])

    • Info级别
    • 在控制台中打印消息

  11. console.table(array)

    • Info级别
    • 将对象数组记录为表
    console.table([
  {
    first: 'René',
    last: 'Magritte',
  },
  {
    first: 'Chaim',
    last: 'Soutine',
    birthday: '18930113',
  },
  {
    first: 'Henri',
    last: 'Matisse',
  }
]);
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

    RDdME5SuTCjNFtXKxTUh

  12. console.time([label])

    • 启动一个新的计时器
    • 调用console.timeEnd([label])以通知计时器并将经过的时间打印到控制台
    console.time();
for (var i = 0; i < 100000; i++) {
  let square = i ** 2;
}
console.timeEnd();
    1
    2
    3
    4
    5

  13. console.trace()

    • Info级别
    • 将堆栈跟踪打印到控制台
    const first = () => { second(); };
const second = () => { third(); };
const third = () => { fourth(); };
const fourth = () => { console.trace(); };
first();
    1
    2
    3
    4
    5

    uO2xhv9WrEjpUHpT3lLN

  14. console.warn(object[,object,...])

    • Warning级别
    • 向控制台打印警告

总结最常用的方法：assert()可以用来判断表达式的真假；count()可以用来测试函数被调用的次数；dir()用来查看对象的属性和方法；dirxml()可用来查看该节点的子节点；time()可以用来测试不同解决方案的代码所需要的执行时间来选择更优的方案；trace()可以查看函数调用栈的情况。

# 实用程序API参考

这些API仅在控制台调用才有效，如果在脚本调用则不起作用。

  1. $_：返回最近计算的表达式的值

  2. $0 - $4

    • $0是当前选择的元素
    • $1是上一次选择的元素，$2,$3,$4以此类推，如果你输入$5，它会毫不留情的报错

  3. $(selector, [startNode])

    • $(selector)返回指定css选择器的第一个DOM元素的引用，如果只有一个参数时，此函数等同于document.querySelector()
    • 第二个参数指定从中搜索元素的后代节点，默认值为document
    • $$(selector)选择是所有满足条件的元素，等同于document.querySelectorAll()
    • 如果使用含有 $的库，此功能会被覆盖

  4. $x(path,[startNode])

    • $x(path)返回页面中与给定的表达式相匹配的DOM元素数组
    • 第二个参数用于指定要从中搜索元素的子孙节点

  5. copy(object)：将指定对象的字符串表示复制到剪贴板，所以当你回车但什么都没有的时候不要奇怪，因为它复制到剪贴板啊

  6. debug(function)

    • 当指定的函数被调用时，调试器被调用并在 Sources 面板上的函数内部中断，允许单步执行代码并调试它
    • 使用undebug(fn)来停止调试或禁用所有断点

  7. inspect(object/function)：在对应的面板中打开，并选择指定的元素或对象，如DOM 元素的 Elements 面板或 JavaScript 堆对象的 Profiles 面板

  8. getEventListeners(object)

    • 返回在指定对象上注册的事件侦听器
    • 返回值是一个对象，包括每个已注册事件类型的数组，数组包含每个侦听器的成员

    Hlh3CErBYJTTNg9butfj

  9. keys(object)

    • 返回一个包含指定对象属性名称的数组
    • 如果想获取对应属性的值，可以使用values(object)

  10. monitor(function)

注：在控制台中按Shift + Enter可以在不执行脚本的情况下开始新行。

🥦PS:该文总结自Chrome Developers (opens new window)