JS 跳过 debugger 的几种方法，都在这了

在开发过程中使用调试器排查代码问题是一种高效定位和解决问题的方式。以下是几种常见的调试方法和技术，适用于不同的开发环境和需求。 ### 使用 `debugger` 语句进行调试 在 JavaScript 中，可以直接在代码中插入 `debugger` 语句来触发浏览器的调试器。当执行到该语句时，程序会暂停执行，允许开发者检查当前的状态。 ```javascript var a = 10; function fn() { debugger; // 程序执行到这里时会自动暂停 setTimeout(() => { console.log(123); }, 10000); } console.log(123); for(var i=0; i <=5; i++){ console.log('好好学习'); } fn(); ``` 通过这种方式，可以查看变量的值、调用堆栈以及执行流程等信息[^1]。 ### 使用 VSCode Debugger 调试 React 项目 对于使用 Visual Studio Code (VSCode) 开发的 React 项目，可以通过内置的调试功能来进行调试。首先需要创建一个 `launch.json` 文件，配置调试器的参数。例如： ```json { "version": "0.2.0", "configurations": [ { "type": "pwa-chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}" } ] } ``` 点击 VSCode 左侧菜单栏的“运行和调试”按钮，然后选择 Web 应用（Chrome）表示使用 Chrome 浏览器进行调试，如果想要使用 Edge 浏览器，则选择 Web 应用（Edge）选项即可[^2]。 ### 使用控制台输出信息 除了使用调试器之外，还可以利用控制台输出信息来帮助调试。JavaScript 提供了多种控制台方法，如 `console.log()`、`console.warn()` 和 `console.error()` 来输出不同级别的信息。 ```javascript console.log('这是一个普通颜色的信息'); console.warn('这是一个黄色颜色的信息，警告开发者'); console.error('这是一个红色颜色的信息，显示报错信息'); ``` 这些方法可以帮助开发者快速了解程序运行时的状态，并且可以用来标记可能存在问题的地方[^3]。 ### 使用 `console.dir()` `console.dir()` 方法可以以 JSON 格式列出对象的所有属性，这对于查看 DOM 元素或对象的结构非常有用。 ```javascript const h1 = document.querySelector('h1'); console.dir(h1); const fn = () => {}; console.dir(fn); ``` 这种方法有助于理解对象内部的属性和方法，从而更好地进行调试。