目录
前言
一、问题现象与本质分析
[1.1 典型现象描述](#1.1 典型现象描述)
[1.2 本质原因](#1.2 本质原因)
[1.3 实际踩坑结论](#1.3 实际踩坑结论)
二、核心原因与解决方案（重点）
[2.1 重点原因：Sources 中开启了"异常断点"](#2.1 重点原因：Sources 中开启了“异常断点”)
[👉 现象特征](#👉 现象特征)
[📍 详细操作路径（一步一步找）](#📍 详细操作路径（一步一步找）)
[第一步：打开 DevTools](#第一步：打开 DevTools)
[第二步：切换到 Sources 面板](#第二步：切换到 Sources 面板)
第三步：找到"暂停按钮"（关键）
[🧠 三种状态说明（必须搞懂）](#🧠 三种状态说明（必须搞懂）)
[❗ 问题就出在这里](#❗ 问题就出在这里)
[✅ 正确解决方法](#✅ 正确解决方法)
[2.2 更简单的关闭方式（推荐）](#2.2 更简单的关闭方式（推荐）)
[2.3 其他可能原因（补充）](#2.3 其他可能原因（补充）)
[（1）代码中存在 debugger](#（1）代码中存在 debugger)
（2）手动断点
[（3）XHR / fetch 断点](#（3）XHR / fetch 断点)
[2.4 为什么接口调试时更容易出现](#2.4 为什么接口调试时更容易出现)
三、进阶排查技巧
[3.1 利用 Call Stack 精确定位](#3.1 利用 Call Stack 精确定位)
[3.2 快速判断问题类型](#3.2 快速判断问题类型)
[3.3 Chrome DevTools 简要说明（辅助理解）](#3.3 Chrome DevTools 简要说明（辅助理解）)
四、本文总结
[🎯 排查优先级（强烈建议记住）](#🎯 排查优先级（强烈建议记住）)
[💡 一句话总结](#💡 一句话总结)
[🚀 最重要的一点（经验结论）](#🚀 最重要的一点（经验结论）)
五、更多操作
前言
在日常前端开发过程中，很多人都遇到过这样一个"诡异"的问题：页面刷新后，浏览器直接卡住，并在控制台中提示 Paused in debugger 。
没有明显报错、代码里也没有写 debugger，但页面就是无法继续执行。
这个问题在使用 Vue、React、Vite、Element Plus 等现代前端技术栈时尤为常见，尤其是在接口调试阶段，几乎可以说是"必踩的坑"。
我在实际项目（vue-vben-admin + 接口调试）中也完整踩了一遍这个坑：
👉 全局搜索不到 debugger，但页面一刷新就暂停
最终定位：Chrome DevTools 的 Sources 面板设置问题
本文将从实战角度，详细讲清楚：
为什么会出现 Paused in debugger
如何一步一步定位问题
重点：Sources 面板具体在哪、怎么关、点哪里
问题场景：
一、问题现象与本质分析
1.1 典型现象描述
在开发环境中：
-
打开浏览器控制台（F12）
-
刷新页面
出现如下情况：
-
页面卡住不动
-
控制台显示：
Paused in debugger -
自动跳转到 Sources 面板
-
必须点击"继续执行（▶）"页面才恢复
1.2 本质原因
Paused in debugger ≠ 报错
它本质是：
浏览器调试器主动"暂停了代码执行"
触发来源包括：
-
debugger语句 -
手动断点
-
异常断点（最常见）
-
XHR 请求断点
1.3 实际踩坑结论
在我的实际项目中：
-
❌ 全局搜索
debugger→ 没有 -
❌ 接口代码正常
-
❌ 没有手动断点
最终确认：
✅ 是 Chrome 的 Sources 面板开启了"异常断点"
二、核心原因与解决方案（重点）
这一部分是本文核心，手把手教你操作位置
2.1 重点原因：Sources 中开启了"异常断点"
👉 现象特征
如果你符合以下情况，基本就是这个原因：
-
一刷新就暂停
-
没有 debugger
-
常见在接口报错 / Promise 报错时触发
📍 详细操作路径（一步一步找）
第一步：打开 DevTools
F12
第二步：切换到 Sources 面板
顶部菜单：
Elements | Console | Sources | Network
👉 点击：
👉 Sources
第三步：找到"暂停按钮"（关键）
在 Sources 面板中：
👉 看右上角（非常重要）
你会看到一个按钮：
⏸（暂停图标） + ⛔（小停止标志）
👉 这个就是：
Pause on exceptions（异常断点）开关
🧠 三种状态说明（必须搞懂）
点击这个按钮，会有三种状态：
| 状态 | 表现 | 含义 |
|---|---|---|
| 灰色 | ⏸ | ✅ 关闭（正常） |
| 蓝色（一个） | ⏸ | ⚠️ 遇到异常暂停 |
| 蓝色（两个） | ⏸ | 🚨 捕获/未捕获异常都暂停 |
❗ 问题就出在这里
👉 如果是蓝色状态：
-
页面只要有异常（哪怕 try/catch）
-
就会自动暂停
-
显示 Paused in debugger
✅ 正确解决方法
👉 点击这个按钮，直到变成：
灰色（关闭状态）
2.2 更简单的关闭方式（推荐）
如果你找不到按钮，可以用命令：
Ctrl + Shift + P
输入：
Disable pause on exceptions
点击执行即可 ✅
2.3 其他可能原因（补充）
虽然你这次是 Sources 问题，但完整性必须讲清：
（1）代码中存在 debugger
debugger;
解决：全局搜索删除
（2）手动断点
表现：
行号左侧有蓝点
解决：
Ctrl + Shift + F8
清除全部断点
（3）XHR / fetch 断点
位置：
Sources → 左侧：
XHR/fetch Breakpoints
如果配置了：
*
👉 所有请求都会暂停
解决：删除断点
2.4 为什么接口调试时更容易出现
在实际开发中，这个问题经常出现在：
-
接口 400 / 500
-
Promise reject
-
axios 抛错
配合：
Pause on exceptions = 开启
👉 就变成：
每次请求 → 报错 → 自动暂停
三、进阶排查技巧
3.1 利用 Call Stack 精确定位
当页面暂停时：
👉 看右侧：
Call Stack
可以判断：
-
是你代码触发
-
还是第三方库触发
优先点击：
👉 .vue / .ts / .js 文件
3.2 快速判断问题类型
一个简单判断方法：
| 操作 | 结果 |
|---|---|
| 关闭异常断点 | 不再暂停 → 配置问题 |
| 仍然暂停 | 代码问题 |
3.3 Chrome DevTools 简要说明（辅助理解）
重点掌握一个面板即可：
👉 Sources 面板
它的核心能力：
-
断点控制
-
代码执行流程控制
-
调用栈分析
常用按钮：
| 按钮 | 作用 |
|---|---|
| ▶ | 继续执行 |
| ⏭ | 跳过 |
| ⏬ | 进入函数 |
| ⏏ | 跳出函数 |
四、本文总结
这次问题的最终结论非常典型：
不是代码问题，而是 Chrome DevTools（Sources 面板）配置问题
🎯 排查优先级（强烈建议记住）
-
👉 关闭异常断点（最优先）
-
👉 搜索 debugger
-
👉 清除所有断点
-
👉 检查 XHR 断点
💡 一句话总结
Paused in debugger，本质是"调试器暂停"，不是"程序报错"
🚀 最重要的一点（经验结论）
在实际开发中：
👉 90% 以上这个问题，都是因为：
🔴 Sources → Pause on exceptions 被开启
只要把它关掉，问题直接解决。
这类问题看似复杂，但一旦掌握原理和位置，下次遇到基本可以在 10 秒内定位并解决。
五、更多操作
更多前端实战内容，请看，Vue 个人专栏
本文属于 Vue 企业级实战系列，持续更新 Vue2/Vue3、工程化、性能优化、跨域解决方案等干货，欢迎关注我的 CSDN 专栏：
👉 Vue Develop 实战专栏
https://blog.csdn.net/weixin_65793170/category_12116741.html
如果本文对你有帮助，欢迎点赞、收藏、评论，你的支持是我持续输出实战干货的动力！
如果你在项目中也遇到类似问题，欢迎留言交流，分享你的场景与解决方案。
