粥里有勺糖

vuePress-theme-reco 粥里有勺糖    2018 - 2023
粥里有勺糖 粥里有勺糖

Choose mode

  • dark
  • auto
  • light
关于我
备战春秋
  • 心得总结
  • 校招考点汇总
  • 面经汇总
  • 复习自查
技术笔记
  • 技术教程
  • 模板工程
  • 源码学习
  • 技术概念
  • 个人作品
  • 学习笔记
计算机基础
  • 算法与数据结构
  • 操作系统
  • 计算机网络
  • 设计模式
  • 剑指offer
大前端
  • javascript
  • vue
  • html
  • css
  • 🌏浏览器专题
  • Web性能优化
  • regexp
  • node
面试
  • 问解
  • javascript
  • css
  • 手撕代码
  • 性能优化
  • 综合问题
  • 面经汇总
  • 小程序
手撕代码
  • 数据结构与算法
  • javascript
  • css
个人站点
  • GitHub (opens new window)
  • 博客园 (opens new window)
  • 掘金 (opens new window)
线上作品
  • 轻取(文件收集) (opens new window)
  • 个人图床 (opens new window)
  • 考勤小程序 (opens new window)
  • 时光恋人 (opens new window)
  • 在线简历生成 (opens new window)
留言板
Github (opens new window)
author-avatar

粥里有勺糖

285

文章

40

标签

关于我
备战春秋
  • 心得总结
  • 校招考点汇总
  • 面经汇总
  • 复习自查
技术笔记
  • 技术教程
  • 模板工程
  • 源码学习
  • 技术概念
  • 个人作品
  • 学习笔记
计算机基础
  • 算法与数据结构
  • 操作系统
  • 计算机网络
  • 设计模式
  • 剑指offer
大前端
  • javascript
  • vue
  • html
  • css
  • 🌏浏览器专题
  • Web性能优化
  • regexp
  • node
面试
  • 问解
  • javascript
  • css
  • 手撕代码
  • 性能优化
  • 综合问题
  • 面经汇总
  • 小程序
手撕代码
  • 数据结构与算法
  • javascript
  • css
个人站点
  • GitHub (opens new window)
  • 博客园 (opens new window)
  • 掘金 (opens new window)
线上作品
  • 轻取(文件收集) (opens new window)
  • 个人图床 (opens new window)
  • 考勤小程序 (opens new window)
  • 时光恋人 (opens new window)
  • 在线简历生成 (opens new window)
留言板
Github (opens new window)
  • note

    • 学习笔记
    • Chrome 调试技巧-基础
    • Chrome 调试技巧-Console
    • Chrome 调试技巧-Network
    • Chrome 调试技巧-Elements
    • Chrome 调试技巧-Drawer
    • Chrome 调试技巧-workspace
    • 设计模式-设计原则
    • 设计模式-创建型模式
    • 设计模式-结构型模式
    • 学习笔记:TypeScript装饰器

Chrome调试技巧-Console

vuePress-theme-reco 粥里有勺糖    2018 - 2023

Chrome调试技巧-Console

粥里有勺糖 2021-04-07 技术笔记学习笔记

# Chrome 调试技巧-Console

控制台面板是使用频率最高的面板之一,这篇摘抄一些实用性高的内容

# $

# $number

$0 是对我们当前在 Element面板 中选中的 html 节点的引用

$1 是对上一次我们选择的节点的引用, $2 是对在那之前选择的节点的引用以此类推,直到 $4

图片

# $与$$

  • $ 等价于 document.querySelector()
  • $$ 等价于 document.querySelectorAll()

图片

# $_

上次打印结果的引用

图片

# 直接await

大多数异步API 都会返回Promise,需要.then才能拿到结果

在console面板中可以直接await 不需要 async 包裹

图片

# 条件断点

TODO: 添加一个合适的示例

source面板中选择文件,右击行号,选择 Add conditional breakpoint 添加代码

图片

# Custom Formatter

自定义输出对象的函数

TODO: 补充实用例子

# queryObjects

TODO: 补充实用例子

# monitor

用于监控函数的入参,自动打印函数名与入参

function sum(a,b){
  return a+b
}
monitor(sum)
1
2
3
4

图片

# monitorEvents

事件监控

monitorEvents(window,['click','resize'])
1

图片

# window.console

图片

除了常用的console.log外其它实用的方法

# assert

当第一个参数为 false 时, console.assert 打印跟在这个参数后面的值

console.assert(100==='100','no equal')
console.assert(100=='100','yes')
1
2

图片

# table

可以将 数组 (或者是 类数组 的对象)打印成一个漂亮的表格

第二个参数指定要展示的列

console.table(document.querySelectorAll('a'),['textContent','href'])

console.table(location)
1
2
3

图片

图片

# time与timeEnd

两个方法配合计算并打印时间戳,用处用于测试方法的执行时间

console.time('a')
setTimeout(console.timeEnd,1000,'a')
1
2

图片

# dir

可以用于查看某个dom的属性

console.log(document.body)
console.dir(document.body)
1
2

图片

# log添加样式

给打印文本加上 %c ,%c后面的内容就会被样式参数所影响

console.log 除第一个参数外的参数都是css规则

console.log("%cred","color:red;")
console.log("%cred%cblue","color:red;","color:blue")
1
2

图片

# 实时表达式

图片

图片

Edit this page (opens new window)
Last Updated: 2022/5/15 12:46:34