文章首发公众号：闪光的自留地
知乎：Sp4rkW
GITHUB：Sp4rkW
B站：一只技术君
博客：https://sp4rkw.blog.csdn.net/
联系邮箱：getf_own@163.com

本篇文章使用到了google官方提供的演示站点进行演示，基于google官方教程进行复现整理，在每个步骤都补充了自己的说明与演示截图。

话不多说，直接进入文章内容

第 1 步：重现错误

找到一系列可一致重现错误的操作始终是调试的第一步。

点击 Open Demo。演示页面随即在新标签中打开。
在 Number 1 文本框中输入 5。
在 Number 2 文本框中输入 1。
点击 Add Number 1 and Number 2。按钮下方的标签显示 5 + 1 = 51。结果应为 6。这就是您要修正的错误。

之所以有这一步，主要目的为的就是给自己设立一个调试的问题，google出发的角度是开发的角度，渗透测试中，我们的角度主要是得到js签名串，加密串的生成逻辑。

第 2 步：熟悉 Sources 面板界面

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

通过按 Command+Option+I (Mac) 或 Control+Shift+I（Windows、Linux），打开 DevTools。此快捷方式可打开 Console 面板。（一般最简单的办法还是F12）
点击 Sources 标签。

Sources 面板界面包含 3 个部分：

File Navigator 窗格。此处列出页面请求的每个文件。
Code Editor 窗格。在 File Navigator 窗格中选择文件后，此处会显示该文件的内容。
JavaScript Debugging 窗格。检查页面 JavaScript 的各种工具。如果 DevTools 窗口布局较宽，此窗格会显示在 Code Editor 窗格右侧。

第三个窗格就是断点中最为重要的模块，后续使用较多，但google官方都是英文说明，这里我直接改成通用js断点框

第 3 步：使用断点暂停代码

调试这种问题的常用方法是将多个 console.log() 语句插入代码，以便在执行脚本时检查相关值。例如：

function updateLabel() {var addend1 = getNumber1();console.log('addend1:', addend1);var addend2 = getNumber2();console.log('addend2:', addend2);var sum = addend1 + addend2;console.log('sum:', sum);label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}

虽然 console.log() 方法可以完成任务，但断点可以更快完成此任务。断点可让您在执行代码的过程中暂停代码，并在此时及时检查所有相关值。与 console.log() 方法相比，断点具有一些优势：

使用 console.log()，您需要手动打开源代码，查找相关代码，插入 console.log() 语句，然后重新加载此页面，才能在控制台中看到这些消息。使用断点，无需了解代码结构即可暂停相关代码。
在 console.log() 语句中，您需要明确指定要检查的每个值。使用断点，DevTools 会在暂停时及时显示所有变量值。有时在您不知道的情况下，有些变量会影响您的代码。

简言之，与 console.log() 方法相比，断点可帮助您更快地查找和修正错误。

如果退一步思考应用的运作方式，您可以根据经验推测出，使用与 Add Number 1 and Number 2 按钮关联的 click 事件侦听器时计算的和不正确 (5 + 1 = 51)。因此，您可能需要在 click 侦听器运行时暂停代码。

上面的这段话的通俗解释就是：数字1与数字2相加之后的和，5+1=6而不是计算显示出来的51，所以是点击按钮（Add Number 1 and Number 2）之后出现了问题，所以问题的核心出在，点击这个事件发生之后相应执行的函数里面。所以我们需要操作的就是，点击的时候就让代码执行停滞，一步一步让其执行后续逻辑，进而分析哪里出现了问题。

js断点框中的 Event Listener Breakpoints 可让您完成此任务：

在 JavaScript Debugging 窗格中，点击 Event Listener Breakpoints 以展开该部分。 DevTools 会显示 Animation 和 Clipboard 等可展开的事件类别列表。
在 Mouse 事件类别旁，点击 Expand Expand 图标。 DevTools 会显示 click 和 mousedown 等鼠标事件列表。每个事件旁都有一个复选框。
勾选 click 复选框。 DevTools 现在经过设置可以在任何 click 事件侦听器运行时自动暂停。

返回至演示页面，再次点击 Add Number 1 and Number 2。 DevTools 会暂停演示并在 Sources 面板中突出显示一行代码。 DevTools 应在此代码行暂停：

function onClick() {

上面这个图就是我执行之后的截图，可以看到其成功在对应处暂停。

Event Listener Breakpoints 只是 DevTools 提供的多种断点类型之一。您需要记住所有不同的类型，因为每种类型最终都可帮助您尽快调试不同情景的问题。如需了解使用每种类型的时机和方式，请参阅使用断点暂停代码。

第 4 步：单步调试代码

一个常见的错误原因是脚本执行顺序有误。可以通过单步调试代码一次一行地检查代码执行情况，准确找到执行顺序异常之处。立即尝试：

在 DevTools 的 Sources 面板上，点击 Step into next function call 单步执行时进入下一个函数调用，{:.devtools-inline} 以便一次一行地单步调试 onClick() 函数的执行。 DevTools 突出显示下面这行代码：

if (inputsAreEmpty()) {

点击 Step over next function call 单步执行时越过下一个函数调用 {:.devtools-inline}。 DevTools 执行但不进入 inputsAreEmpty()。请注意 DevTools 是如何跳过几行代码的。这是因为 inputsAreEmpty() 求值结果为 false，所以 if 语句的代码块未执行。

这就是单步调试代码的基本思路。如果看一下 get-started.js 中的代码，您会发现错误多半出在 updateLabel() 函数的某处。您可以使用另一种断点来暂停较接近极可能出错位置的代码，而不是单步调试每一行代码。

其实这块也很好理解，点击这个事件对应绑定的操作函数里面就这么几行代码，前面几行都没执行，之后又进入了另一个函数，肯定是跟这个函数里面的代码有关系。这块我简单继续跟进入 updateLabel() 看一下

很容易找到问题是字符串相加而不是数字相加

第 5 步：设置代码行断点

代码行断点是最常见的断点类型。如果您想在执行到某一行代码时暂停，请使用代码行断点：

看一下 updateLabel() 中的最后一行代码：

label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;

在这行代码的左侧，您可以看到这行代码的行号是 32。点击 32。 DevTools 会在 32 上方放置一个蓝色图标。这意味着这行代码上有一个代码行断点。 DevTools 现在始终会在执行此行代码之前暂停。
点击 Resume script execution 继续执行脚本 {:.devtools-inline}。脚本将继续执行，直到第 32 行。在第 29 行、第 30 行和第 31 行上，DevTools 会在各行分号右侧输出 addend1、addend2 和 sum 的值。

这块首先要把之前的那个断点给删了，之后的话，打上代码行断点，步骤如下：

进入source中目标js文件
找到目标代码行，点击行号数字的位置，之后那块就会出现一个蓝色标签，这也就代表断点已经打成功了
执行相应操作，触发断点。比如这里点击网页的那个计算结果按钮即可。

第 6 步：检查变量值

addend1、addend2 和 sum 的值疑似有问题。这些值位于引号中，这意味着它们是字符串。这个假设有助于说明错误的原因，现在可以收集更多信息。 DevTools 可提供许多用于检查变量值的工具。

方法 1：Scope 窗格

在某代码行暂停时，Scope 窗格会显示当前定义的局部和全局变量，以及各变量值。其中还会显示闭包变量（如果适用）。双击变量值可进行编辑。如果不在任何代码行暂停，则 Scope 窗格为空。

方法 2：监视表达式

Watch Expressions 标签可让您监视变量值随时间变化的情况。顾名思义，监视表达式不仅限于监视变量。您可以将任何有效的 JavaScript 表达式存储在监视表达式中。立即尝试：

点击 Watch 标签。
点击 Add Expression 添加表达式。
输入 typeof sum。
按 Enter 键。 DevTools 会显示 typeof sum: “string”。冒号右侧的值就是监视表达式的结果。

方法 3：控制台

除了查看 console.log() 消息以外，您还可以使用控制台对任意 JavaScript 语句求值。对于调试，您可以使用控制台测试错误的潜在解决方法。立即尝试：

如果您尚未打开 Console 抽屉式导航栏，请按 Escape 将其打开。该导航栏将在DevTools 窗口底部打开。
在 Console 中，输入 parseInt(addend1) + parseInt(addend2)。此语句有效，因为您会在特定代码行暂停，其中 addend1 和 addend2 在范围内。
按 Enter 键。 DevTools 对语句求值并打印输出 6，即您预计演示页面会产生的结果。

Escape 按钮就是键盘最左上角的那个退出按钮ESC

第 7 步：应用修正方法

您已找到修正错误的方法。接下来就是尝试通过编辑代码并重新运行演示来使用修正方法。您不必离开 DevTools 就能应用修正。您可以直接在 DevTools UI 内编辑 JavaScript 代码。立即尝试：

点击 Resume script execution 继续执行脚本 {:.devtools-inline}。
在 Code Editor 中，将第 31 行 var sum = addend1 + addend2 替换为 var sum = parseInt(addend1) + parseInt(addend2)。
按 Command+S (Mac) 或 Control+S（Windows、Linux）以保存更改。
点击 Deactivate breakpoints 取消激活断点 {:.devtools-inline}。其将变为蓝色，表示处于活动状态。在完成此设置后，DevTools 会忽略您已设置的任何断点。
尝试使用不同的值运行演示。现在演示可以正确计算。

后续

本教程仅介绍两种设置断点的方法。 DevTools 还提许多其他方法，其中包括：

仅在满足您指定的条件时触发的条件断点。
发生已捕获或未捕获异常时触发的断点。
当请求的网址与您提供的子字符串匹配时触发的 XHR 断点。

如需了解使用每种类型的时机和方式，请参阅使用断点暂停代码。

有几个代码单步执行控件未在本教程中予以说明。如需了解详情，请参阅单步执行时越过代码行。

chrome浏览器动态调试js（一）相关推荐

chrome浏览器断点调试js代码和 idea断点调试java代码
文章目录 chrome调试js代码 idea调试java代码 chrome调试js代码 Chrome调试快捷键总结快捷键功能 F10 (step over) 单步调试.步过,遇到函数时也当成一个语 ...
Chrome浏览器及调试教程
==>(微信公众号:IT知更鸟)欢迎关注<^>@<^> Chrome浏览器及调试教程在web开发过程中,我们在写JavaScript脚本时难免会遇到各种bug,这时,我 ...
360浏览器如何调试html,360js是什么？360浏览器如何调试js？
js是什么?360浏览器如何调试js? javascript简称JS,是网页的前端开发语言,直接运行在浏览器上,以前我刚开始学的时候,并不懂这个,所以我每次开发或调试它,都是在vs.net里面,现在想 ...
Chrome浏览器安装Vue.js devtools插件
Chrome浏览器安装Vue.js devtools插件 1.浏览器访问极简插件 2.右上角搜索框搜索vue DevTools插件 3.在本地文件夹中解压刚刚下载的插件,解压后如下所示 4.打开谷歌浏 ...
Chrome 浏览器客户端调试
Chrome 浏览器客户端调试在开发者界面中,你可以使用打开快捷输入Ctrl + Shift +P运行常用命令. 一.Elements 1.箭头按钮:用于在页面选择一个元素来审查和查看它的相关信息, ...
Chrome浏览器开发调试系列(一)
// 计划写一个 Chrome 浏览器以及调试器的系列文章,我慢慢写. 边写边改,发觉博客真是个打草稿的好地方. // 本文针对的是当前最新的浏览器Chrome34,如果你的版本不够新,希望你能够更 ...
PC端chrome浏览器如何调试多点触控事件/chrome浏览器远程调试手机上的网页
PC端chrome浏览器如何调试多点触控事件/chrome浏览器远程调试手机上的网页最近学习移动端网页开发的时候,遇到了一个问题,如何在真机上看到控制台输出的内容. 虽然现在的桌面浏览器提供了模拟手 ...
如何在浏览器中调试JS代码，debug
如何在浏览器中调试JS代码,debug 首先需要一段js代码,我将它放进html文件里面: 创建一个html文件,<script>标签里面放入需要调试的js代码,html文件如下: < ...
chrome浏览器，调试详解，调试js、调试php、调试ajax
1.可以看到js报错 2.可以看到php报错 3.可以看到ajax返回的信息,以及报错情况 4.可以看到调用了那些内容以及顺序 5.可以调试js代码 6.可以查看session等等功能非常之强大. ...

chrome浏览器动态调试js（一）