浏览器开发者工具的 console 和 sources 面板可直接实时调试 js：console 支持交互式执行、console.table、变量修改、console.trace、分组日志；sources 可设断点、条件断点、监控表达式、debugger 语句；结合 network 和 elements 辅助定位外部依赖问题。
直接用浏览器开发者工具的 Console 和 Sources 面板配合，就能实时调试 JS 前端代码。不需要额外安装插件，打开 F12 就能开始。
在 Console 里快速验证和干预
按 Esc 可唤出底部控制台，输入任意合法 JS 表达式（比如 document.title、userList.length）回车，立刻看到结果。它不是只看日志，而是个可交互的运行环境。
- 打印结构化数据：对数组或对象用
console.table(data)，比console.log更清晰 - 临时改变量值：比如输入
apiBase = "https://test.example.com"回车，后续请求就会走测试地址 - 查调用栈：在可疑函数里加
console.trace()，执行时自动输出谁调用了它 - 分组折叠日志：用
console.group("登录流程")+console.groupEnd()避免信息混杂
在 Sources 面板设断点逐行观察
切换到 Sources → Page 标签，找到你的 JS 文件（如 main.js 或 index.bundle.js），点击行号左侧空白处打上蓝色断点。刷新页面，代码运行到该行就会暂停。
Wjs Uploading Video
下载
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
- 断点生效后，右侧“Scope”区域显示当前作用域所有变量值，鼠标悬停也能看
- 用 F10（跳过）、F11（步入）、Shift+F11（跳出）控制执行节奏
- 右键断点选“Edit breakpoint”，输入条件如
userId > 100，只在满足时暂停 - 在 Watch 区域手动添加表达式，比如
response?.data?.length，持续监控变化
用 debugger 语句精准触发暂停
在源码中插入 debugger;，等效于在该行手动加断点。适合调试动态生成的回调、内联脚本或难以定位的逻辑分支。
- 它只在 DevTools 打开时起作用，关掉就自动忽略，不影响线上运行
- 建议配合条件使用，例如：
if (env === "dev" && status === "error") debugger; - 上线前全局搜索
debugger并清理，避免被用户意外触发
结合 Network 和 Elements 辅助判断上下文
很多 JS 问题其实源于外部依赖。比如函数没执行，可能是接口 404；样式错乱导致元素获取为空，document.querySelector 返回 null。
- 在 Network 面板勾选 “Disable cache”，刷新看真实请求是否发出、响应是否成功
- 在 Elements 面板用左上角箭头选取目标元素，确认 DOM 是否已渲染、class 是否正确
- 修改某个 CSS 属性（如
display: none改为block），立刻验证 JS 是否因元素不可见而失败
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
