如何在Chrome DevTools中实现JavaScript代码的详细调试？

本文共计3234个文字，预计阅读时间需要13分钟。

通过浅入深出地讲解，如何在使用Chrome DevTools调试JavaScript。一、案例发现场景，为了方便理解，我编写了一个小demo。点击打开demo；在num1中输入6；在num2中输入9；点击num1和num2，按下方按钮。

由浅入深说一说怎么样在 Chrome DevTools 中调试 JavaScript。

一、案发现场

为了方便理解，我写了一个小demo。

点击打开demo；

在num1中输入6；

在num2中输入9；

点击 num1+num2，按钮下方的标签显示 69，结果应为 15，这就是我们需要断点调试找出的 BUG 。

二、熟悉一下 Sources 面板

DevTools 可为更改 CSS、分析页面加载性能和监控网络请求等不同的任务提供许多不同的工具。 我们就在 Sources 面板中调试 JavaScript。

通过按 Command+Option+I (Mac) 或 Control+Shift+I（Windows、Linux），打开 DevTools。 此快捷方式可打开 Console 面板。点击 Sources 面板。

Sources 面板包含 3 个部分：

文件预览 窗口。 此处列出页面请求的每个文件。

代码编辑 窗口。 在 文件预览 窗口中选择文件后，此处会显示该文件的具体内容。