- 当前位置：首页 >人工智能 >使用Chrome DevTools调试JavaScript
使用Chrome DevTools调试JavaScript
发布时间：2025-11-05 15:31:24 来源：创站工坊 作者：系统运维
不要再使用 console.log! 学会在 Chrome Developer Tools 中使用断点来调试代码。使用
作为一名新的调试开发人员，发现和修复 bug 挺难的使用。 您可能会试图随意使用 console.log() 来调试代码使代码正常工作。调试 不要再这样了。使用
这篇文章将讲述正确调试的调试方法! 您将了解如何使用 Chrome 开发人员工具来设置断点并逐步完成代码。这是使用更有效的在代码中查找和修复 bug 的方法。
本教程将向您展示如何调试一个具体 bug，调试您学到的使用方法将有助于您调试以后遇到的的 JavaScript 错误。
步骤 1：重现错误
重现错误是调试调试的***步。 “再现错误”意味着找到一系列持续导致错误出现的使用动作。 您可能需要重复该错误多次，调试所以尝试消除任何不必要的使用步骤。
按照以下说明重现您将在本教程中解决的调试 bug。
这是使用我们将在本教程中使用的网页。 确保在新标签页中打开此页面： 打开本页. 在 Number 1 输入 5。 在 Number 2 输入 1。 点击 Add Number 1 and Number 2。IT技术网 看看输入和按钮下方的标签。 显示 5 + 1 = 51。哎呦。结果是错的。 结果应该是 6。 这是您要修复的错误。
步骤 2：用断点暂停代码
DevTools 允许您在执行过程中暂停代码，并在此时检查所有变量的值。 暂停代码的工具称为断点。 现在就试试：
返回例子并按 Command + Option + I(Mac)或 Control + Shift + I(Windows，Linux)打开DevTools。 点击 Sources 面板。 点击 Event Listener Breakpoints 打开该面板。DevTools 展示了所有事件的列表， 例如 Animation 和 Clipboard。 然后找到 Mouse 事件类别，点击打开该列表。 选中 click 复选框。
返回例子 ，再次点击 Add Number 1 and Number 2 。DevTools 暂停代码，高亮显示 Sources 面板中一行代码。如下：
function onClick() {为什么?
当你选中 click，你为所有 click 事件设置了一个基于事件的云服务器提供商断点。 当任意节点被点击，并且该节点有一个 click 事件， DevTools 将自动暂停在该节点的 click 事件。
步骤 3：跳到下一行
错误的一个常见原因是脚本以错误的顺序执行。 通过代码，您可以一行一行遍历代码执行，并确定其与预期执行不同的位置。 现在就试试：
在 DevTools 的 Sources 面板上，单击 Step into next function call 按钮
，该按钮允许您逐步执行 onClick() 函数，一次一个函数。 当 DevTools 突出显示以下代码行时停止： if (inputsAreEmpty()) { 现在点击 Step over next function call 按钮
，DevTools 执行 inputsAreEmpty() 而不进入它。 注意DevTools 如何跳过这几行代码。 这是因为 inputsAreEmpty() 返回 false，所以 if 语句的代码块没有执行。 这是跳过函数基本思想。 如果您查看 get-started.js 中的代码，您可以看到该错误可能在 updateLabel() 函数中的某个位置。 您可以使用其他类型的断点来暂停代码逐步靠近错误的服务器租用位置，而不是逐步遍历每行代码。 步骤 4： 设置另外的断点
行断点是最常见的断点类型。 当你想暂停某一行代码，可以使用行代码断点。 现在就试试：
看看 updateLabel() 中的***一行代码，如下所示： label.textContent = addend1 + + + addend2 + = + sum;在这段代码的左边，你可以看到这行代码的行号： 32 。 点击 32 。 DevTools 将一个蓝色的图标放在 32 的顶部。 这就意味着这行上有一个行代码断点。 DevTools 现在总是在执行该代码行之前暂停。
点击 Resume script execution 按钮
，该脚本将继续执行，直到到达设置断点的代码行为止。 看看已经执行的 updateLabel() 中的代码行。 DevTools 打印出 “addend1”，“addend2” 和 “sum” 的值。“sum” 的值看起来很可疑。 它似乎被当做一个字符串，它应该是一个数字。 这可能是错误的原因。 步骤 5：检查变量值
错误的另一个常见原因是当变量或函数产生与预期不同的值。 许多开发人员使用 console.log() 来查看变量如何变化，但由于两个原因，console.log() 可能是乏味和无效的。 其一，你可能需要手动编辑你的代码大量的调用 console.log() 。 其二，您可能不知道哪个变量与错误有关，所以您可能需要打印许多变量。
DevTools 的一个 console.log() 替代是 Watch 表达式。 使用监视表达式来监视变量随时间的变化。 顾名思义，Watch 表达式不仅限于变量。 您可以在 Watch 表达式中存储任何有效的 JavaScript 表达式。 现在就试试：
在 Sources 面板, 点击 Watch。 点击 Add Expression 按钮
。 输入 typeof sum。 按回车。 DevTools 显示 “typeof sum："string"”。 冒号右侧的值是您的观察表达式的结果。 
如预测那样，sum 被当做 string 类型 。
console.log() 的另一个替代方法是控制台。可以使用控制台来评估任意的 JavaScript 语句。 开发人员通常使用控制台在调试时覆盖变量值。 在您的情况下，控制台可以帮助找到啊修复 bug 的方法。 现在就试试：
如果您没有打开控制台抽屉，请按 Esc 键将其打开。 它将在您的 DevTools 窗口的底部打开。 在控制台中，输入 parseInt(addend1)+ parseInt(addend2)。 按回车。 DevTools 执行该语句并打印出 “6”，这是您期望演示生成的结果。
步骤 6：修复
您已经确定了该 bug 的潜在修复方法。 剩下的是通过编辑代码并重新运行演示来尝试修复。 您不需要离开 DevTools 来修复 bug。 您可以直接在 DevTools UI 中编辑 JavaScript 代码。 现在就试试：
在 DevTools 的 Sources 面板，用 var sum = parseInt(addend1) + parseInt(addend2); 替换 var sum = addend1 + addend2;，这是您当前暂停的一行。 按 Command + S(Mac)或 Control + S(Windows，Linux)保存更改。 代码的背景更改为红色，表示脚本已在DevTools 中更改。 点击 Deactivate breakpoints 按钮
，它变蓝色表示它是激活的。DevTools 忽略您设置的任何断点。 点击 Resume script execution 按钮，尝试使用不同的变量，现在 sum 可以正确计算了。 - 上一篇：也许还有不少人不知道MultiSystem，它是一个用来在Linux系统中创建多启动usb盘的小型的开源软件。使用这个工具，我们可以在USB中创建任意多的可启动Linux发行版。你所需要的只是网络链接（只在MultiSystem安装的时候需要），以及一个足够大的USB盘，这取决于你想在USB盘中放入发行版的数量。在 Ubuntu 14.10/14.04 安装MultiSystem手动安装:下载 MultiSystem脚本，并解压到任意地方。进入解压的地址，使用下面的命令运行脚本。复制代码代码如下:sudo ./install-depot-multisystem.sh使用 PPA 安装:当然，你也可以用下面的命令来更简单地使用PPA来安装MultiSystem。复制代码代码如下:sudo apt-add-repository deb http://liveusb.info/multisystem/depot all main wget -q -O - http://liveusb.info/multisystem/depot/multisystem.asc | sudo apt-key add - sudo apt-get update sudo apt-get install multisystem安装完之后，它会自动打开MultiSystem。只要点击关闭按钮退出。安装之后MultiSystem 安装完成后，可以插入你的USB，并通过Unity Dash或者菜单运行MultiSystem。第一次启动时，MultiSystem界面看起来会像下面这样。选择USB设备，点击确认按钮。假如你看到下面的错误窗口，不必担心，它说的是USB设备没有标签。点击OK让MultiSystem自动设置标签。那么，拔出/重新插入USB，再次运行MultiSystem。选择USB盘，再次点击确认。现在，你被要求确认在USB中安装Grub2.点击OK继续。最终，你会高兴地看到MultiSystem的界面。现在，时候创建多启动USB盘。使用MultiSystem非常容易使用。将ISO文件拖入MultiSystem窗口中。假如不行的话，点击底部的cd 按钮来选择ISO文件。现在，MultiSystem会从ISO中拷贝文件，并让USB可启动。相似地，你可以在你的USB中加入任意多的发行版。我这次加入了两个Linux发行版：CentOS 6.5和Android。加完ISO文件后，你会在MultiSystem的主窗口中看到可启动的发行版列表了。就是这样。我们的多启动USB盘就可以使用了。重启系统，并在BIOS中设置USB优先启动。选择你想要安装的发行版并开始安装系统。此外，MultiSystem含有一些其它的选项： Grub 设置 Grub 和 Burg 的bootloader更新 下载 LiveCD VirtualBox 安装 格式化USB盘 还有更多选项这些额外选项可以在MultiSystem的菜单标签里面看到。同样，你也可以在Ubuntu中使用QEMU或者Oracle VirtualBox测试多启动USB盘。MultiSystem工具是我测试到现在最棒和最有用的一款工具。这款工具对那些想要在他们的机器上安装多个系统的人是非常有用的。在你外出的时候，你不必再携带CD/DVD袋了。只要买一个16GB或者32GB的USB就行，并下载所有你想要的系统，随心所欲的安装系统即可。并且，一个对于Windows系统用户的好消息是它也支持Windows系统。我在Windows 7上测试过，它可以工作！享受吧！
- 下一篇：小米手机配置怎么样？（深入探究小米手机的配置性能）
- Mac电脑数据迁移教程（轻松迁移你的数据到新的Mac电脑）
- MySQL数据库备份常识，不得不看
- MySQL-Server连接在MySQL-Client下
- MySQL运算符与其获得更多相关数据的比较功能
- 儿童手工电脑套装教程（以儿童手工电脑套装为学习工具，启发孩子创造力和逻辑思维）
- MySQL alter 语句的实际操作
- 2025年最受欢迎的19 个VSCode 主题排行榜：推荐使用13号vs code主题
- MySql数据库中正确添加远程控制用户实操
- 下载了Fedora 11 DVD ISO镜像文件，参考了XP下硬盘安装Fedora 10的方法，我把安装过程稍微整理一下供Linux新手参考。先看看Fedora的版本是Fedora 11了吧，见下图（图1），点击下图看大图。图1我电脑中原先安装的操作系统是Windows XP SP2，C盘是NTFS格式，F盘也是NTFS格式的。网上都说要把它放到fat32分区下，我现在把它放到了F盘(NTFS格式的)，测试下可以的。我在F盘下新建了一个Fedora11目录，把Fedora-11-i386-DVD.iso里面的images文件解压出来放到刚才新建的fedora11目录中，另外再解压isolinux文件夹中的initrd.img和vmlinuz二个文件也放到fedora11目录下，把Fedora-11-i386-DVD.iso文件也放在fedora11目录中（见图2），还要把initrd.img和vmlinuz复制到C盘的根目录下。图2下载GRUB4DOS，我们只要里面的2个文件，解压后把grldr与menu.lst放到C盘根目录下。再修改menu.lst，在menu.lst最后加上title Install Fedora 11kernel (hd0,0)/vmlinuzinitrd (hd0,0)/initrd.img打开C盘的根目录，找到boot.ini，（通常虽隐藏的），在最后面加上c:grldr=GRUB重新启动系统，选择GRUB（见图3）。回车图3再选择最后的Install Fedora 11（见图4）就可以到安装界面了图4进入语言选择，中文用户选择见图5图5下一步应该是键盘布局的选择，默认好了，再下一步比较重要，选择安装方式，硬盘安装Fedora 11选中Hard drive（见图6）。图6这一步更重要，对于许多新手来说，不知道如何硬盘安装Fedora 11的关键所在，我把Fedora-11-i386-DVD.iso及相关安装文件都放在F盘的fedora11的目录中，所以要找到这里来，我的F盘是/dev/sda10分区 。假如你不知道，可以从/dev/sda1开始一个一个试过去，下面的地址也很重要，输入安装镜像文件所在的路径，/fedora11/images/install.img （见图7）。图7点击OK后就开始真正的安装，下面还有一个地方要注意，假如你想保留原来系统上资料，特别要注意下面的地方，要选择建立自定义分区结构。（见图8）下面就简单了，你自己看吧，假如还不懂，在下面的留言中提出。
- 如何通过css实现多层浮动叠加
随便看看
- Copyright © 2025 Powered by 使用Chrome DevTools调试JavaScript,创站工坊 滇ICP备2023006006号-44sitemap