在Chrome DevTools中调试JavaScript的实现
168 浏览量
2020-10-15
11:07:54
上传
评论
收藏 1.55MB PDF 举报
在在Chrome DevTools中调试中调试JavaScript的实现的实现
主要介绍了在Chrome DevTools中调试JavaScript的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起
学习学习吧
由浅入深说一说怎么样在 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 个部分：
文件预览文件预览 窗口。 此处列出页面请求的每个文件。
代码编辑代码编辑 窗口。 在 文件预览 窗口中选择文件后，此处会显示该文件的具体内容。
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按钮。此时页面如下图：
资源评论
weixin_38689551
- 粉丝: 9
- 资源: 920
最新资源
- Screenshot_20240430_144340_com.ss.android.ugc.live.jpg
- 回到山沟沟.mp3
- 111111111111111111
- 基于matlab实现关于语音信号声源定位DOA估计所用的一些传统算法.rar
- 基于ultralytics-yolov8, 将其检测/分类/分割/姿态等任务移植到rk3588上
- Screenshot_2024-04-30-21-47-24-26.jpg
- 基于matlab实现波束形成，包括线阵、平面阵和圆阵
- Python自动生成excel周期报告源码
- 基于matlab实现DOA 估计和自适应波束形成.rar
- 一个基于yolov8的火灾检测部署
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
