JavaScript 调试技巧与最佳实践

// $0 表示当前在 Elements 面板选中的 DOM 元素，$1 为上一个
$0.getBoundingClientRect();

// $$ 是 document.querySelectorAll 的简写，返回真数组
$$('a.nav-link').map(a => a.href);

// $ 是 document.querySelector 的简写
$('#app');

// copy() 把内容复制到剪贴板，排查大对象时很好用
copy(JSON.stringify(someBigObject, null, 2));

// monitor 监控函数每次调用的入参
function login(user) { /* ... */ }
monitor(login);
login('alice'); // 控制台输出: function login called with arguments: alice

const users = [
  { id: 1, name: 'Alice', role: 'admin', active: true },
  { id: 2, name: 'Bob', role: 'editor', active: false },
  { id: 3, name: 'Carol', role: 'viewer', active: true }
];

// 直接表格化，比一行行 log 清晰得多
console.table(users);

// 只显示指定列
console.table(users, ['name', 'role']);

function renderPage(page) {
  console.group(`渲染页面: ${page.name}`);
  console.log('开始加载数据');
  console.groupCollapsed('子模块（默认折叠）');
  console.log('头部渲染完成');
  console.log('列表渲染完成');
  console.groupEnd();
  console.log('页面渲染结束');
  console.groupEnd();
}
renderPage({ name: 'Dashboard' });

console.time('fetchUsers');
await fetch('/api/users');
console.timeLog('fetchUsers', '请求已返回'); // 中间打点
// ... 处理数据
console.timeEnd('fetchUsers'); // 输出: fetchUsers: 342.5ms

function divide(a, b) {
  // 只有断言为 false 时才打印错误，不中断执行
  console.assert(b !== 0, '除数不能为 0', { a, b });
  return a / b;
}
divide(10, 0); // Assertion failed: 除数不能为 0 {a: 10, b: 0}

function onScroll() {
  console.count('onScroll 触发'); // 每次调用自增计数
}
// 滚动时可看到: onScroll 触发: 1 / 2 / 3 ...

function a() { b(); }
function b() { c(); }
function c() {
  console.trace('谁调用了我？'); // 打印完整调用栈 c <- b <- a
}
a();

// console.log(domNode) 打印的是渲染后的元素，
// console.dir(domNode) 打印的是可展开的 JS 对象属性
const el = document.querySelector('#app');
console.dir(el);

// 简单的自定义 logger，按环境开关
const isDev = process.env.NODE_ENV !== 'production';
export const logger = {
  log: (...args) => { if (isDev) console.log(...args); },
  warn: (...args) => { if (isDev) console.warn(...args); },
  error: (...args) => { console.error(...args); } // 错误始终保留
};

function calculateTotal(items) {
  let total = 0;
  for (const item of items) {
    debugger; // 每轮循环都会暂停，可观察 item / total
    total += item.price * item.quantity;
  }
  return total;
}

// 条件断点表达式：只有满足才暂停
Number.isNaN(item.price * item.quantity)

// 日志断点内容（不会暂停执行）
'当前用户:', user.id, '余额:', user.balance

# 启动并开启调试端口（默认 9229）
node --inspect app.js

# 在第一行代码前就断住，适合调试启动逻辑
node --inspect-brk app.js

# 进入 Node 自带的 CLI 调试器
node inspect app.js

// 在 CLI 调试器里的常用命令
// cont (c)  继续执行
// next (n)  单步跳过
// step (s)  单步进入
// out  (o)  跳出
// repl      进入交互环境查看变量
// watch('expr')  监视表达式

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "调试当前文件",
      "program": "${workspaceFolder}/src/index.js",
      "skipFiles": ["<node_internals>/**"],
      "env": { "NODE_ENV": "development" }
    }
  ]
}

const util = require('util');
const deep = { a: { b: { c: { d: 1 } } } };
console.log(util.inspect(deep, { depth: null, colors: true }));

async function loadProfile(id) {
  try {
    const res = await fetch(`/api/users/${id}`);
    if (!res.ok) {
      // 手动抛出带上下文的错误
      throw new Error(`HTTP ${res.status} for user ${id}`);
    }
    return await res.json();
  } catch (err) {
    // ES2022 error cause：保留原始错误链，便于溯源
    throw new Error('加载用户资料失败', { cause: err });
  } finally {
    // 无论成功失败都会执行，适合收尾
    console.timeEnd('loadProfile');
  }
}

class AppError extends Error {
  constructor(message, { code, statusCode = 500, context } = {}) {
    super(message);
    this.name = this.constructor.name; // 显示为 AppError 而非 Error
    this.code = code;
    this.statusCode = statusCode;
    this.context = context;
    // 修正堆栈，剔除构造函数自身这一帧（V8 特有）
    if (Error.captureStackTrace) {
      Error.captureStackTrace(this, this.constructor);
    }
  }
}

class ValidationError extends AppError {
  constructor(message, fields) {
    super(message, { code: 'VALIDATION_FAILED', statusCode: 422 });
    this.fields = fields;
  }
}

// 使用
try {
  throw new ValidationError('表单校验失败', { email: '格式不正确' });
} catch (err) {
  if (err instanceof ValidationError) {
    console.error(err.name, err.code, err.fields);
  }
}

// 错误：catch 抓不到 Promise 内部的 reject
try {
  fetch('/api/data'); // 返回 Promise，reject 会逃逸
} catch (e) {
  // 永远进不来
}

// 正确 A：await + try/catch
try {
  await fetch('/api/data');
} catch (e) { /* 能抓到 */ }

// 正确 B：.catch
fetch('/api/data').catch(e => { /* 能抓到 */ });

// 并发场景用 allSettled 避免一个失败拖垮全部
const results = await Promise.allSettled([taskA(), taskB(), taskC()]);
results.forEach(r => {
  if (r.status === 'rejected') console.error('子任务失败', r.reason);
});

// 捕获同步运行时错误
window.addEventListener('error', (event) => {
  const { message, filename, lineno, colno, error } = event;
  report({
    type: 'js-error',
    message,
    stack: error && error.stack,
    filename,
    position: `${lineno}:${colno}`
  });
});

// 注意：资源加载错误（img/script/link）不会冒泡，
// 必须用捕获阶段监听，且 error 事件不带 message
window.addEventListener('error', (event) => {
  const target = event.target;
  if (target && (target.tagName === 'IMG' || target.tagName === 'SCRIPT')) {
    report({ type: 'resource-error', url: target.src || target.href });
  }
}, true); // 第三个参数 true 表示捕获阶段

window.addEventListener('unhandledrejection', (event) => {
  // event.reason 是 reject 的值（通常是 Error）
  report({
    type: 'unhandled-rejection',
    message: event.reason && event.reason.message,
    stack: event.reason && event.reason.stack
  });
  // 可选：阻止默认的控制台报错
  // event.preventDefault();
});

class ErrorReporter {
  constructor({ endpoint, appVersion, sampleRate = 1 }) {
    this.endpoint = endpoint;
    this.appVersion = appVersion;
    this.sampleRate = sampleRate;
    this.queue = [];
    this.seen = new Set(); // 简单去重
    this._bindFlush();
  }

  report(err) {
    if (Math.random() > this.sampleRate) return; // 采样

    const payload = {
      message: err.message,
      stack: err.stack,
      type: err.type || 'error',
      url: location.href,
      ua: navigator.userAgent,
      version: this.appVersion,
      ts: Date.now()
    };

    const key = `${payload.message}|${payload.stack}`;
    if (this.seen.has(key)) return; // 同一错误不重复上报
    this.seen.add(key);

    this.queue.push(payload);
    if (this.queue.length >= 10) this.flush();
  }

  flush() {
    if (!this.queue.length) return;
    const batch = this.queue.splice(0, this.queue.length);
    // sendBeacon 在页面卸载时也能可靠发送
    const body = JSON.stringify(batch);
    if (navigator.sendBeacon) {
      navigator.sendBeacon(this.endpoint, body);
    } else {
      fetch(this.endpoint, { method: 'POST', body, keepalive: true });
    }
  }

  _bindFlush() {
    // 页面隐藏/卸载时把剩余队列发出去
    document.addEventListener('visibilitychange', () => {
      if (document.visibilityState === 'hidden') this.flush();
    });
  }
}

const reporter = new ErrorReporter({
  endpoint: '/api/log/error',
  appVersion: '1.4.2',
  sampleRate: 0.5
});
window.addEventListener('error', e => reporter.report(e.error || e));
window.addEventListener('unhandledrejection', e => reporter.report({
  message: e.reason && e.reason.message,
  stack: e.reason && e.reason.stack,
  type: 'unhandled-rejection'
}));

import * as Sentry from '@sentry/browser';

Sentry.init({
  dsn: 'https://xxxx@o0.ingest.sentry.io/0',
  release: 'my-app@1.4.2', // 与 Source Map 关联的关键
  environment: 'production',
  tracesSampleRate: 0.2,
  beforeSend(event) {
    // 上报前脱敏，去掉敏感字段
    if (event.request && event.request.cookies) {
      delete event.request.cookies;
    }
    return event;
  }
});

// 手动上报 + 附加上下文
Sentry.setUser({ id: 'u_123' });
try {
  riskyOperation();
} catch (err) {
  Sentry.captureException(err, { tags: { module: 'checkout' } });
}

performance.mark('render-start');
renderList(bigData);
performance.mark('render-end');

// 测量两个标记之间的耗时
performance.measure('render-duration', 'render-start', 'render-end');

const [measure] = performance.getEntriesByName('render-duration');
console.log(`列表渲染耗时: ${measure.duration.toFixed(2)}ms`);

// 清理，避免标记堆积
performance.clearMarks();
performance.clearMeasures();

// 监听长任务（阻塞主线程 > 50ms）
const longTaskObserver = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.warn(`长任务: ${entry.duration.toFixed(1)}ms`, entry);
    reporter.report({ type: 'long-task', message: `${entry.duration}ms` });
  }
});
longTaskObserver.observe({ entryTypes: ['longtask'] });

// 监听 LCP
const lcpObserver = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const last = entries[entries.length - 1];
  console.log('LCP:', last.startTime.toFixed(0), 'ms', last.element);
});
lcpObserver.observe({ type: 'largest-contentful-paint', buffered: true });

// 优化前：每行都新建正则和格式化器
function formatRow(row) {
  const re = /(\d)(?=(\d{3})+$)/g; // 每次都编译
  const fmt = new Intl.NumberFormat('zh-CN'); // 每次都创建
  return { ...row, price: fmt.format(row.price) };
}

// 优化后：提到循环外，复用实例
const priceFmt = new Intl.NumberFormat('zh-CN');
function formatRow(row) {
  return { ...row, price: priceFmt.format(row.price) };
}

// 泄漏根因：组件挂载时订阅了全局事件，但卸载时忘了取消
class ChartWidget {
  constructor() {
    this.onResize = this.onResize.bind(this);
    // 订阅后持有对 this 的引用，导致实例无法回收
    globalEventBus.on('resize', this.onResize);
  }
  onResize() { /* 重绘 */ }

  // 修复：提供销毁方法并在组件卸载时调用
  destroy() {
    globalEventBus.off('resize', this.onResize);
  }
}

// 用 WeakMap 缓存与 DOM 关联的数据，DOM 被回收时缓存自动释放
const nodeData = new WeakMap();
function attach(node, data) {
  nodeData.set(node, data); // 不阻止 node 被 GC
}

// FinalizationRegistry 可在对象被回收时收到通知（用于调试验证）
const registry = new FinalizationRegistry((label) => {
  console.log(`对象已被回收: ${label}`);
});
let cache = { big: new Array(1e6) };
registry.register(cache, 'big-cache');
cache = null; // 之后某个时刻会打印 "对象已被回收: big-cache"

// webpack 生产配置
module.exports = {
  mode: 'production',
  devtool: 'hidden-source-map', // 生成 map 但不在 bundle 里引用
  output: { filename: '[name].[contenthash:4].js' }
};

sentry-cli releases new "my-app@1.4.2"
sentry-cli releases files "my-app@1.4.2" upload-sourcemaps ./dist --rewrite
sentry-cli releases finalize "my-app@1.4.2"

const { SourceMapConsumer } = require('source-map');
const fs = require('fs');

async function resolve(mapPath, line, column) {
  const raw = JSON.parse(fs.readFileSync(mapPath, 'utf8'));
  return SourceMapConsumer.with(raw, null, (consumer) => {
    const pos = consumer.originalPositionFor({ line, column });
    console.log(`还原结果: ${pos.source}:${pos.line}:${pos.column} (${pos.name})`);
    return pos;
  });
}
resolve('./dist/main.4f2a.js.map', 1, 88213);