在Chrome DevTools中调试JavaScript的实现


Posted in Javascript onApril 07, 2020

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

一、案发现场

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

点击打开demo;

在num1中输入6;

在num2中输入9;

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

在Chrome DevTools中调试JavaScript的实现

二、熟悉一下 Sources 面板

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

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

Sources 面板包含 3 个部分:

在Chrome DevTools中调试JavaScript的实现

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

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

JavaScript 调试 窗口。 包含检查页面 JavaScript 的各种工具。 如果 DevTools 窗口布局较窄,此窗口会显示在 代码编辑 窗口下方。

三、使用断点暂停代码

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

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

  1. 使用 console.log(),需要手动打开源代码,查找相关代码,插入 console.log() 语句,然后重新加载此页面,才能在控制台中看到这些消息。 使用断点,无需了解代码结构即可暂停相关代码。
  2. console.log()语句中,您需要明确指定要检查的每个值。 使用断点,DevTools 会在暂停时及时显示所有变量值。简言之,与 console.log() 方法相比,断点可以更快地查找和修正 BUG 。

接下来我们开始思考一开始抛出的程序的运作方式,我们可以根据经验推测出,我们在点击num1+num2按钮的时候触发的 click 事件肯定和 6+9=69 计算不正确有关系。 因此,我们可能需要在 click 侦听器运行的时候暂停代码。
Event Listener Breakpoints 可以完成此任务:

在 JavaScript 调试 窗口中,点击 Event Listener Breakpoints 前面的展开按钮。 可以看见 Animation、Canvas、Clipboard 等一系列事件;

在页面输入框中输入num1和num2的值;

展开 Mouse 事件,每个事件旁都有一个复选框。勾选 click 复选框。 DevTools 现在可以在任何 click 事件侦听器运行时自动暂停。

点击页面中的num1+num2按钮。此时页面如下图:

在Chrome DevTools中调试JavaScript的实现

这是因为我装的浏览器插件导致的定位不准,最好在无痕模式进行操作。不过也不影响,我们点击一下最左边页面上的蓝色按钮,再点击中间的打括号(格式化代码),就可以定位准确并且格式化好代码:

在Chrome DevTools中调试JavaScript的实现

四、检查变量的值

1. Scope窗口

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

在Chrome DevTools中调试JavaScript的实现

2. Watch监听变量变化

Watch 标签可监视变量值随时间变化的情况。 并且,监视不仅限于监视变量。 我们可以将任何有效的 JavaScript 表达式存储在监视表达式中。 我们尝试这样:
- 点击 Watch 标签。
- 点击 右边的 + 添加表达式。
- 输入 typeof n。 按 Enter 键。(这里代码是打包后的,n表示num1输入框的值)
- DevTools 会显示 typeof n: "string"。 冒号右侧的值就是监视表达式的结果。

在Chrome DevTools中调试JavaScript的实现

3. 控制台

控制台除了查看 console.log() 消息以外,还可以使用控制台对任意 JavaScript 语句求值。 对于调试,可以使用控制台测试 BUG 的潜在解决方法:

在 Console 中,输入 `parseInt(n) + parseInt(u)`。 此语句有效,因为我们会在特定代码行暂停,其中 `n`(num1的值) 和 `u`(num2的值) 在范围内。

按 Enter 键。 DevTools 对语句求值并打印输出 15,即我们预计demo页面会产生的结果。

五、尝试修改

上一步我们已找到解决 BUG 的方法。 接下来就是尝试通过编辑代码并重新运行demo来使用修正方法。 我们可以在 代码编辑 窗口直接修改代码:

在 代码编辑 窗口中,将代码格式化关掉,然后修改代码,将 n+u 换成 parseInt(n)+parseInt(u)

在Chrome DevTools中调试JavaScript的实现

Command+S (Mac) 或 Control+S(Windows、Linux)以保存更改。

点击 Deactivate breakpoints 取消激活断点。 其将变为蓝色,表示处于活动状态。 在完成此设置后,DevTools 会忽略您已设置的任何断点。

在Chrome DevTools中调试JavaScript的实现

点击num1+num2按钮,则会看见正确的结果啦!

Tips: 这样做只能修正在浏览器中运行的代码, 不能为访问您页面的所有用户修正代码。 为此,我需要修改自己服务器上的代码。

六、介绍其他几种断点

断点类型 使用场景
代码行 在确切的代码区域中
条件代码行 在确切的代码区域中,且仅当其他一些条件成立时
DOM 在更改或移除特定 DOM 节点或其子级的代码中
XHR 当 XHR 网址包含字符串模式时
事件侦听器 在触发 click 等事件后运行的代码中
异常 在引发已捕获或未捕获异常的代码行中
函数 任何时候调用特定函数时

1. 代码行断点

直接点击

这是使用最多的一种断点方式,在知道需要检查的确切代码区域时,可以使用代码行断点。 DevTools 始终会在执行此代码行之前暂停。

在Chrome DevTools中调试JavaScript的实现

debugger

在代码中调用 debugger 可在该行暂停。 此操作相当于使用代码行断点,只是此断点是在代码中设置,而不是在 DevTools 界面中设置。

console.log('a');
console.log('b');
debugger;
console.log('c');

条件代码断点
如果知道需要调查的确切代码区域,但只想在其他一些条件成立时进行暂停,则可使用条件代码行断点。若要设置条件代码行断点:

  1. 点击 Sources 标签。
  2. 打开包含您想要中断的代码行的文件。
  3. 转至代码行。
  4. 代码行的左侧是行号列。
  5. 右键点击行号列。
  6. 选择 Add conditional breakpoint。
  7. 代码行下方将显示一个对话框。
  8. 在对话框中输入条件。
  9. 按Enter 键激活断点。 行号列顶部将显示一个橙色图标。

在Chrome DevTools中调试JavaScript的实现

2. DOM更新断点

如果想要暂停更改 DOM 节点或其子级的代码,可以使用 DOM 更改断点。若要设置 DOM 更改断点:

  • 点击 Elements 标签。
  • 转至要设置断点的元素。
  • 右键点击此元素。
  • 将鼠标指针悬停在Break on 上,然后选择 Subtree modifications、Attribute modifications 或 Node removal。

在Chrome DevTools中调试JavaScript的实现Subtree

  • modifications: 在移除或添加当前所选节点的子级,或更改子级内容时触发这类断点。在子级节点属性发生变化或对当前所选节点进行任何更改时不会触发这类断点。
  • Attributes modifications:在当前所选节点上添加或移除属性,或属性值发生变化时触发这类断点。
  • Node Removal:在移除当前选定的节点时会触发。

4. XHR/Fetch断点

如果想在 XHR 的请求网址包含指定字符串时中断,可以使用 XHR 断点。 DevTools 会在 XHR 调用 send() 的代码行暂停。

注:此功能还可用于 Fetch 请求。

例如,在您发现您的页面请求的是错误网址,并且您想要快速找到导致错误请求的 AJAX 或 Fetch 源代码时,这类断点很有用。

若要设置 XHR 断点:

  • 点击 Sources 标签。
  • 展开 XHR Breakpoints 窗格。
  • 点击 Add breakpoint。
  • 输入要对其设置断点的字符串。 DevTools 会在 XHR 的请求网址的任意位置显示此字符串时暂停。
  • 按 Enter 键以确认。

在Chrome DevTools中调试JavaScript的实现

这样就可以拦截包含getUserInfo字符串的请求,如果添加一个空的,则可以拦截所有请求!

5. 事件侦听器断点

如果想要暂停触发事件后运行的事件侦听器代码,可以使用事件侦听器断点。 您可以选择 click 等特定事件或所有鼠标事件等事件类别。

我们一开始使用的例子就是事件侦听器断点,这里就不演示了。

6. 异常断点

如果想要在引发已捕获或未捕获异常的代码行暂停,可以使用异常断点。

  • 点击 Sources 标签。
  • 点击 Pause on exceptions 引发异常时暂停 {:.devtools-inline}。 启用后,此按钮变为蓝色。
  • (可选)如果除未捕获异常以外,还想在引发已捕获异常时暂停,则勾选 Pause On Caught Exceptions 复选框。

在Chrome DevTools中调试JavaScript的实现

7.函数断点

如果想要在调用特定函数时暂停,可以调用 debug(functionName),其中 functionName 是要调试的函数。 您可以将 debug() 插入您的代码(如 console.log() 语句),也可以从 DevTools 控制台中进行调用。 debug() 相当于在第一行函数中设置代码行断点。

function sum(a, b) {
 let result = a + b; // DevTools 会在此行暂停
 return result;
}
debug(sum); // 传递函数对象,而不是字符串。
sum();

如果想要调试的函数不在范围内,DevTools 会引发 ReferenceError

(function () {
 function hey() {
 console.log('hey');
 }
 function yo() {
 console.log('yo');
 }
 debug(yo); // 这行可以成功调用
 yo();
})();
debug(hey); // 这一行不能成功调用 hey() 不在作用域内

如果是从 DevTools 控制台中调用 debug(),则很难确保目标函数在范围内。所以一般还不如直接使用代码行断点!

到此这篇关于在Chrome DevTools中调试JavaScript的实现的文章就介绍到这了,更多相关Chrome DevTools调试JavaScript内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Javascript中eval函数的使用方法与示例
Apr 09 Javascript
javascript 面向对象思想 附源码
Jul 07 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
Apr 15 Javascript
javascript简单实现命名空间效果
Mar 06 Javascript
js实现文字在按钮上滚动的方法
Aug 20 Javascript
javascript中checkbox使用方法实例演示
Nov 19 Javascript
数据结构中的各种排序方法小结(JS实现)
Jul 23 Javascript
AngularJS入门教程之服务(Service)
Jul 27 Javascript
微信小程序实现单选功能
Oct 30 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
Feb 02 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
May 29 Javascript
使用axios请求接口,几种content-type的区别详解
Oct 29 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
Apr 07 #Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
Apr 07 #Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
Apr 07 #Javascript
flexible.js实现移动端rem适配方案
Apr 07 #Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
Apr 07 #Javascript
详解vue-flickity的fullScreen功能实现
Apr 07 #Javascript
小谈angular ng deploy的实现
Apr 07 #Javascript
You might like
删除无限级目录与文件代码共享
2006/07/12 PHP
实用的简单PHP分页集合包括使用方法
2013/10/21 PHP
php中Ctype函数用法详解
2014/12/09 PHP
PHP  实现等比压缩图片尺寸和大小实例代码
2016/10/08 PHP
微信接口生成带参数的二维码
2017/07/31 PHP
PHP并发场景的三种解决方案代码实例
2021/02/27 PHP
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
node.js中的console.trace方法使用说明
2014/12/09 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
2015/03/25 Javascript
在Python中使用glob模块查找文件路径的方法
2015/06/17 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
2016/05/15 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
json格式的javascript对象用法分析
2016/07/04 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
2016/10/12 Javascript
js中获取 table节点各tr及td的内容简单实例
2016/10/14 Javascript
bootstrap警告框示例代码分享
2017/05/17 Javascript
基于EasyUI的基础之上实现树形功能菜单
2017/06/28 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
2018/12/11 Javascript
JavaScript实现打字游戏
2021/02/19 Javascript
python连接MySQL、MongoDB、Redis、memcache等数据库的方法
2013/11/15 Python
Python中实现常量(Const)功能
2015/01/28 Python
Python3.5集合及其常见运算实例详解
2019/05/01 Python
python控制台实现tab补全和清屏的例子
2019/08/20 Python
简单了解Python3 bytes和str类型的区别和联系
2019/12/19 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
python如何代码集体右移
2020/07/20 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
Strawberrynet草莓网新加坡站:护肤、彩妆、香水及美发产品
2018/08/31 全球购物
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
投标邀请书范文
2014/01/31 职场文书
文明演讲稿范文
2014/05/12 职场文书
2015年学生会纪检部工作总结
2015/03/31 职场文书
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
2021/04/01 PHP
Java实现HTML转为Word的示例代码
2022/06/28 Java/Android