🧭 Console 入口与布局 >>>

• Ctrl + Shift + J / Cmd + Option + J：打开 Console
• Ctrl + Shift + I / Cmd + Option + I：打开 DevTools
• Esc：切换抽屉 Console
• Ctrl + L / Cmd + K：清空 Console
• console.clear()：清空输出

📢 Console 日志级别 >>>

• console.log()：Info 级日志
• console.info()：Info 级信息
• console.warn()：Warning 级警告
• console.error()：Error 级错误
• console.debug()：Verbose 级调试
• console.assert(expr)：断言失败输出 Error

🧱 Console 分组与结构化 >>>

• console.group() / groupCollapsed()
• console.groupEnd()
• console.table(data)
• console.dir(obj) / console.dirxml(node)

console.group('Auth');
console.info('token ok');
console.groupEnd();

console.table([{ name: 'A', id: 1 }]);

⏱️ Console 计时与统计 >>>

• console.time(label) / timeEnd(label)
• console.timeLog(label)
• console.count(label) / countReset(label)
• console.trace()

console.time('load');
// ...
console.timeLog('load');
console.timeEnd('load');

🎨 Console 格式化与样式 >>>

• %s %d %i %f %o %O %c：格式化占位符
• %c：传入 CSS 样式
• ANSI：\x1B[41;93;4mHello\x1B[m

console.info('User: %s, ID: %d', 'Alice', 42);
console.log('%cAlert', 'color: #ff6f61; font-weight: bold');

🧪 Console 运行 JS >>>

• REPL 即时求值
• Shift + Enter：多行输入
• $_：上一条表达式结果

document.querySelector('h1').textContent = 'Hello Console';

👁️ Live Expressions >>>

• 点击 👁️ 添加表达式
• 支持多条表达式
• 结果约 250ms 刷新
• 点击 ✖ 移除表达式

🧰 Console Utilities API >>>

• $() / $$() / $x()
• $0 - $4：最近选中元素
• keys() / values() / copy()
• queryObjects()
• monitor() / debug()
• monitorEvents() / getEventListeners()

copy($$('img').map(img => img.src));
monitorEvents(window, ['resize', 'scroll']);

🎛️ Console 交互技巧

• 右键对象 → Store as global variable
• Log levels 过滤输出
• Filter 输入文本/正则筛选
• 侧边栏过滤消息来源

🌐 Network 入口与录制 >>>

• Network 面板：DevTools 顶部标签
• ● Record：开始/停止录制
• 🚫 Clear：清空请求列表
• Preserve log：跳转保留请求
• Disable cache：禁用缓存
• Throttling：Fast/Slow 3G/Offline

📋 请求列表字段

• Name：资源名称
• Status：状态码
• Type：资源类型
• Initiator：发起者
• Size：传输/解压大小
• Time：总耗时
• Waterfall：瀑布图

📄 请求详情 Tabs

• Headers：请求/响应头
• Payload：请求参数
• Preview：响应预览
• Response：原始响应
• Initiator：请求链
• Timing：耗时分解
• Cookies：请求/响应 Cookie

🔎 过滤与搜索 >>>

• domain: / method: / status-code:
• scheme: / mime-type: / resource-type:
• priority: / larger-than:
• has-response-header: / has-overrides:
• is:running / is:from-cache
• cookie-name: / set-cookie-name:

domain:example.com method:POST status-code:404
-method:OPTIONS -status-code:200

🧭 排序与搜索

• 点击表头排序
• Activity 阶段排序
• Ctrl + F / Cmd + F 搜索

📎 Copy 与复现

• Copy as cURL
• Copy as fetch
• Copy response

curl 'https://api.example.com/data' -H 'Authorization: Bearer xxx'

⛔ 屏蔽与节流 >>>

• 右键请求 → Block request URL
• Request conditions 抽屉批量规则
• blocked:devtools 状态标识
• 节流图标悬停查看规则

📶 Network Conditions >>>

• Network 面板右上角更多网络状况按钮
• Command Menu：Show Network conditions
• 覆盖 User-Agent
• User agent client hints 调整
• 节流预设与自定义配置

🧪 Local Overrides >>>

• 右键请求 → Override content / Override headers
• 首次使用需授权本地目录
• Response Headers 支持修改/新增
• .headers 文件集中管理规则

🚀 Speculation Rules >>>

• Application → Speculative loads
• 查看 prefetch/prerender 状态
• Network 观察 Sec-Purpose 标头
• 预渲染需切换渲染器查看

💾 HAR 导入导出

• Save all as HAR with content
• 拖拽 HAR 文件导入
• 跨团队复现/性能分析常用

⌨️ 常用快捷键

• Ctrl + L / Cmd + K：清空 Console
• Ctrl + F / Cmd + F：Network 搜索
• Esc：抽屉 Console
• Shift + Enter：Console 多行输入