Console Ninja 自动捕获 console 输出但需开发服务器或调试协议启动；不支持终端直运行或静态 HTML；依赖 source map、调试连接及浏览器上下文，验证应先用最小 Express 示例确认链路。
Console Ninja 不需要手动“使用”，它在项目运行后自动捕获并内联显示 console 输出——但前提是你的运行环境能产生标准控制台日志，且 VSCode 能连接到它。
为什么 console.log 没出现在代码行旁？
最常见原因不是插件没装好，而是日志源头没被 Console Ninja 捕获到。它不监听终端里手动 node app.js 的输出，也不解析打包后的静态 HTML 中的 script 标签。
- 前端项目：必须通过开发服务器启动（如
vite dev、npm run dev），且页面实际在浏览器中打开（Console Ninja 会注入脚本监听window.console） - Node.js 项目：需用支持调试协议的方式启动，例如
npm run dev调用nodemon --inspect或 Vite/Next.js 的 dev 模式；纯node index.js不触发捕获 - 确认浏览器 DevTools 的 Console 标签里能看到日志——如果那里都看不到，Console Ninja 更不可能显示
- 检查 VSCode 右下角状态栏是否出现 “Console Ninja: Connected” 提示；没出现说明连接失败，常见于跨域、HTTPS 页面或禁用 JS 的环境
console.log 显示了，但值没内联在代码右侧？
Console Ninja 默认只在「调用点」附近显示日志，不是所有 console.log 都会贴着代码行浮出。它依赖 source map 和执行时的堆栈位置，对某些场景会降级为仅在输出面板展示。
- 确保项目构建时生成了有效的 source map（Vite 默认开启，Webpack 需确认
devtool: 'source-map'） - 避免压缩或混淆代码（如 Terser 在 dev 模式下启用
mangle: true会导致行号错乱） - 异步代码中，比如
setTimeout(() => console.log('x'), 100)，可能无法精确定位到原始行；改用console.log('x', new Error().stack)辅助定位 - Vue/React 组件中，
console.log写在setup()或useEffect外部（模块顶层）时，不会内联——因为执行时机早于组件挂载，无 DOM 上下文
如何快速验证 Console Ninja 是否正常工作？
别靠猜，用最小可验证动作确认链路通不通：
- 新建一个空文件夹，初始化
npm init -y，安装express，写一个最简 server：const express = require('express');<br>const app = express();<br>app.get('/', (req, res) => {<br> console.log('✅ 请求来了');<br> res.send('ok');<br>});<br>app.listen(3000); - 在
package.json中加脚本："dev": "node --inspect-brk index.js" - VSCode 中按
F5启动调试（会自动 attach 到--inspect端口），然后访问http://localhost:3000 - 看到
✅ 请求来了出现在console.log行尾，就说明整个链路（Node → Inspector → Console Ninja → 编辑器渲染）已跑通
真正容易被忽略的是：Console Ninja 的内联效果高度依赖运行时上下文的完整性。source map 错位、调试器未 attach、浏览器禁用第三方 cookie（影响 iframe 注入）、甚至 VSCode 工作区启用了多根文件夹但插件作用域受限——这些都会导致“看起来装了，却没反应”。先跑通上面那个 Express 小例子，再往复杂项目里迁移，比对着文档反复开关设置更省时间。
