// 普通日志
console.log('普通信息')

// 信息
console.info('提示信息')

// 警告
console.warn('警告信息')

// 错误
console.error('错误信息')

// 调试（某些环境可能被过滤）
console.debug('调试信息')

// 字符串替换
console.log('用户 %s 的年龄是 %d', '张三', 25)
// 用户 张三 的年龄是 25

// %s - 字符串
// %d / %i - 整数
// %f - 浮点数
// %o - 对象
// %O - 对象��可展开）
// %c - CSS 样式

// 样式化输出
console.log('%c重要信息', 'color: red; font-size: 20px; font-weight: bold;')

// 多种样式
console.log(
  '%c成功 %c警告 %c错误',
  'color: green',
  'color: orange',
  'color: red'
)

const user = { name: '张三', age: 25 }
const users = [
  { name: '张三', age: 25 },
  { name: '李四', age: 30 },
]

// 直接输出
console.log(user)

// 以目录形式展示
console.dir(user)

// 表格形式（数组/对象）
console.table(users)
console.table(users, ['name']) // 只显示 name 列

// 分组
console.group('用户信息')
console.log('姓名: 张三')
console.log('年龄: 25')
console.groupEnd()

// 默认折叠的分组
console.groupCollapsed('详细日志')
console.log('详细信息1')
console.log('详细信息2')
console.groupEnd()

// 嵌套分组
console.group('外层')
console.log('外层信息')
console.group('内层')
console.log('内层信息')
console.groupEnd()
console.groupEnd()

// 计时器
console.time('操作耗时')
// 执行一些操作
for (let i = 0; i < 1000000; i++) {}
console.timeEnd('操作耗时')
// 操作耗时: 2.123ms

// 时间戳
console.timeLog('操作耗时', '中间状态')
// 操作耗时: 1.234ms 中间状态

// 时间戳（毫秒）
console.timeStamp('标记点') // 在 Performance 面板显示

function process(item) {
  console.count('process 被调用')
  // ...
}

process('a') // process 被调用: 1
process('b') // process 被调用: 2
process('c') // process 被调用: 3

// 带标签的计数
console.count('标签A') // 标签A: 1
console.count('标签B') // 标签B: 1
console.count('标签A') // 标签A: 2

// 重置计数
console.countReset('标签A')
console.count('标签A') // 标签A: 1

// 条件为 false 时输出错误
console.assert(1 === 1, '这不会显示')
console.assert(1 === 2, '1 不等于 2')
// Assertion failed: 1 不等于 2

// 用于参数验证
function greet(name) {
  console.assert(typeof name === 'string', 'name 必须是字符串')
  console.log(`你好，${name}`)
}

function first() {
  second()
}

function second() {
  third()
}

function third() {
  console.trace('调用栈')
}

first()
// 输出：
// third
// second
// first
// (anonymous)

console.clear()

function calculateTotal(items) {
  debugger // 代码执行到此处暂停

  let total = 0
  for (const item of items) {
    total += item.price * item.quantity
  }
  return total
}

// 设置条件：i === 50
for (let i = 0; i < 100; i++) {
  process(i) // 只在 i === 50 时暂停
}

// 添加日志点：`当前值: ${value}`
function process(value) {
  return value * 2
}

// 监视以下表达式
user.name
items.length
total > 100

// 在 Network 面板查看
fetch('/api/users')
  .then((response) => response.json())
  .then((data) => console.log(data))

console.time('数组操作')

const arr = []
for (let i = 0; i < 100000; i++) {
  arr.push(i)
}

console.timeEnd('数组操作')

// 开始记录
console.profile('性能分析')

// 执行代码
heavyOperation()

// 结束记录
console.profileEnd('性能分析')

// 性能标记
performance.mark('start')

// 执行操作
doSomething()

performance.mark('end')

// 测量
performance.measure('操作耗时', 'start', 'end')

// 获取测量���果
const measures = performance.getEntriesByName('操作耗时')
console.log(measures[0].duration)

// 清除
performance.clearMarks()
performance.clearMeasures()

// 查看内存使用
console.log(performance.memory)
// {
//   usedJSHeapSize: 10000000,
//   totalJSHeapSize: 35000000,
//   jsHeapSizeLimit: 2172649472
// }

// Memory 面板：
// - Heap snapshot：堆快照
// - Allocation instrumentation：分配时间线
// - Allocation sampling：分配采样

// 在 Elements 面板选中元素后
$0 // 当前选中的元素
$1 // 上一个选中的元素
;($2, $3, $4) // 更早选中的元素

// 快捷选择器
$('selector') // document.querySelector
$$('selector') // document.querySelectorAll

// 在 Elements 面板右键元素
// - Break on subtree modifications
// - Break on attribute modifications
// - Break on node removal

// 监控函数被调用
function add(a, b) {
  return a + b
}

monitor(add)
add(1, 2)
// function add called with arguments: 1, 2

unmonitor(add)

// 监控元素的所有事件
monitorEvents(document.body)

// 监控特定事件
monitorEvents(document.body, 'click')
monitorEvents(document.body, ['click', 'keydown'])

// 停止监控
unmonitorEvents(document.body)

// 获取元素的所有事件监听器
getEventListeners(document.body)
// {click: Array(2), scroll: Array(1), ...}

// 复制对象到剪贴板
copy({ name: '张三', age: 25 })
// 然后可以粘贴到其他地方

// 在控制台输入对象名，按 Tab 查看属性
// 或使用 keys/values
keys(document.body)
values(document.body)

// 开发环境日志
const isDev = process.env.NODE_ENV === 'development'

const log = {
  info: (...args) => isDev && console.log(...args),
  warn: (...args) => isDev && console.warn(...args),
  error: (...args) => console.error(...args), // 错误总是显示
}

log.info('开发信息') // 只在开发环境显示

const LogLevel = {
  DEBUG: 0,
  INFO: 1,
  WARN: 2,
  ERROR: 3,
}

class Logger {
  constructor(level = LogLevel.INFO) {
    this.level = level
  }

  debug(...args) {
    if (this.level <= LogLevel.DEBUG) {
      console.debug('[DEBUG]', ...args)
    }
  }

  info(...args) {
    if (this.level <= LogLevel.INFO) {
      console.info('[INFO]', ...args)
    }
  }

  warn(...args) {
    if (this.level <= LogLevel.WARN) {
      console.warn('[WARN]', ...args)
    }
  }

  error(...args) {
    console.error('[ERROR]', ...args)
  }
}

const logger = new Logger(LogLevel.DEBUG)
logger.debug('调试信息')
logger.info('普通信息')

// 使用 async/await 更容易调试
async function fetchData() {
  console.log('开始请求')
  const response = await fetch('/api/data')
  console.log('响应状态:', response.status)
  const data = await response.json()
  console.log('数据:', data)
  return data
}

// Promise 链中的调试
fetch('/api/data')
  .then((response) => {
    console.log('响应:', response)
    return response.json()
  })
  .then((data) => {
    console.log('数据:', data)
    return data
  })
  .catch((error) => {
    console.error('错误:', error)
  })

const obj = {
  name: '对象',
  method() {
    console.log('method this:', this)

    setTimeout(function () {
      console.log('setTimeout this:', this)
    }, 100)

    setTimeout(() => {
      console.log('箭头函数 this:', this)
    }, 100)
  },
}

obj.method()

for (var i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log('var i:', i) // 3, 3, 3
  }, 100)
}

for (let j = 0; j < 3; j++) {
  setTimeout(() => {
    console.log('let j:', j) // 0, 1, 2
  }, 100)
}