居家写代码不抓瞎：这几款实时调试工具真香

在家改网页、调小程序，或者帮孩子看 Python 作业，最怕啥？——改完代码刷新页面，还是白屏、报错、数据没出来……手忙脚乱翻控制台，半天找不到哪行漏了个分号。别硬扛，用对实时调试工具，问题当场就露馅。

浏览器自带的，别小看

Chrome 和 Edge 的开发者工具（F12 打开）就是最强免费调试器。改 CSS 实时预览效果，改 JS 也能打断点、看变量值。重点推荐「Sources」标签页里的「Live Sourcing」功能：改完 JS 文件保存，页面自动重载并保留断点，不用手动刷新——写表单验证、动态加载逻辑时特别顺手。

VS Code + Debugger 插件，本地开发神器

装个「Debugger for Chrome」或「Debugger for Edge」插件，再配个 launch.json：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

点个绿色三角，代码跑起来的同时就能在 VS Code 里单步跳、鼠标悬停看变量、修改后热更新——就像在 IDE 里直接“摸”着网页运行一样。

前端小项目，试试 Vite 自带的 HMR

新建一个 HTML 页面，用 vite preview 启服务，改完 JS 或 CSS，保存即生效，连刷新都不用。家里孩子学 JavaScript 做个小计算器，改个按钮颜色、加个点击弹窗，改完立刻看见结果，成就感拉满。

手机网页调试也不难

安卓手机连电脑，Chrome 地址栏输 chrome://inspect，选中你打开的页面，就能远程调试；iPhone 用 Safari 开发者菜单，连上 Mac 就能看 console 和 DOM。老人微信里点开你做的节日贺卡网页，出问题了？拿自己手机连电脑，5 分钟定位到图片路径写错了。

工具不在多，在顺手。挑一个你常写的环境配好，下次遇到“怎么又不显示”，别急着删代码，先点 F12，看看控制台第一行红字在说什么。