需要建设一个什么样的网站,大型网站建设动力无限,长沙网站开发湖南微联讯点不错,wordpress评论分页不显示大家好#xff0c;我是若川。持续组织了8个月源码共读活动#xff0c;感兴趣的可以点此加我微信 ruochuan12 参与#xff0c;每周大家一起学习200行左右的源码#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外… 大家好我是若川。持续组织了8个月源码共读活动感兴趣的可以点此加我微信 ruochuan12 参与每周大家一起学习200行左右的源码共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外目前建有江西|湖南|湖北 籍 前端群可加我微信进群。作为前端开发我们会经常使用 console.log() 来调试程序中的问题。虽然这种方式也能解决一部分问题但是它的效率不如能执行逐步调试的工具。本文就来学习一下如何使用 Google Chrome developer tools 轻松调试 JavaScript 代码。多数浏览器都提供了DevTools 供我们调试 JavaScript 应用程序并且它们的使用方式类似只要我们学会了如何在一个浏览器上使用调试工具就很容易在其他浏览器上使用它。以下就以 Greet Me 程序为例这个程序非常简单只需输入名字和愿望最后会输出一句话当输入两个表单值之后“愿望”部分没有正确打印而是打印出了NaN。代码在线调试https://greet-me-debugging.vercel.app/。接下来就看看 Chrome DevTools 有什么功能可以调试定位代码的问题。一、了解 Sources 面板 DevTools 提供了许多不同的工具供我们进行调试包括 DOM 检查、分析和网络调用检查等。这里要说的是 Sources 面板它可以帮助我们调试 JavaScript。可以使用快捷键 F12 打开控制面板并单击 Sources 选项卡以导航到 Sources 面板也可以直接使用快捷键 CommandOptionIMac或 ControlShiftIWindows、Linux来打开。Sources 面板主要由三个部分组成文件导航区页面请求的所有文件都会在此列出代码编辑区当我们从文件导航栏中选取一个文件时该文件的内容就会在此列出我们可以在这里编辑代码Debugger区这里会有很多工具可以用来设置断点检查变量值、观察执行步骤等。如果 DevTools 窗口较宽或未在单独的窗口中打开则调试器部分将显示在代码编辑器的右侧二、设置断点 要开始调试代码首先要做的就是设置断点断点就是代码执行暂停以便调试它的逻辑点。DevTools 允许我们以不同的方式来设置断点在代码行在条件语句中在 DOM 节点处在事件侦听器上。1. 在代码行设置断点设置代码行断点的步骤单击切换到 Sources 选项卡从文件导航部分选中需要调试的源文件在右侧代码编辑器区域找到需要调试的代码行单击行号以在行上设置断点。这里就在代码的第 6 行设置了一个断点代码在执行到这里时就会暂停。2. 设置条件断点设置条件断点的步骤单击切换到 Sources 选项卡从文件导航部分选中需要调试的源文件在右侧代码编辑器区域找到需要调试的代码行右键单击行号并选择Add conditional breakpoint来添加条件断点点击之后代码行下方就会出现一个对话框输入断点的条件即可按回车键Enter即可激活断点这时就会在打断点行的顶部出现一个橙色的图标当print()方法中的name变量值为Joe时代码的执行就会暂停。需要注意只有我们确定调试的代码的大致范围时才会使用条件断点。3. 在事件监听器上设置断点在事件监听器上设置断点的步骤单击切换到 Sources 选项卡在debugger区域展开Event Listener Breakpoints选项从事件列表中选择事件监听器来设置断点。我们的程序中有一个按钮单击事件这里就选择 Mouse 事件选项中的click。提示当我们想暂停在事件触发后运行的事件侦听器代码时可以使用此选项。4. 在 DOM 节点中设置断点DevTools 在 DOM 检查和调试方面同样很强大。当在 DOM 中添加、删除或者修改某些内容时可以设置断点来暂停代码的执行。在 DOM 上设置断点的步骤单击切换到 Elements 选项卡找到要设置断点的元素右键单击元素以获得上下文菜单选择Break on选项然后选择Subtree modifications、Attribute modifications、Node removal中的一个即可这三个选项的含义如下Subtree modifications当节点内部子节点变化时断点Attribute modifications当节点属性发生变化时断点Node removal当节点被移除时断点。如上图我们在输出消息的 div 的 DOM 发生变化时设置了一个断点。当点击按钮后问候消息输出到 div 中子节点的内容发生了变化就会发生中断。注意 当我们怀疑是DOM更改导致了错误时就可以使用该选项当 DOM 更改中断时相关的 JavaScript 代码执行将自动暂停。三、逐步调试 现在我们知道了设置断点的方式。在复杂的调试情况下我们可能需要使用这些调试的组合。调试器提供了五个控件来逐步执行代码下面就分别来看看这些控制都是如何使用的。1. 下一步快捷键F9此选项使我们能够在JavaScript代码执行时逐行执行如果中途有函数调用单步执行也会进入函数内部逐行执行然后退出。2. 跳过快捷键F10此选项允许我们在执行代码时跳过一些代码。有时我们可能已经确定某些功能是正常的不想花时间去检查它们就可以使用跳过选项。下面就是单步执行logger()函数时会跳过函数的执行3. 进入快捷键F11使用该选项可以更深入地了解函数。单步执行函数时当感觉某个函数的行为异常并想检查它时就可以使用这个选项来进入函数内部并进行调试。下面就是单步执行 logger() 函数:4. 跳出快捷键ShiftF11在单步执行一个函数时我们可能不想再继续执行并退出它就可以使用这些选项退出函数。下面就是进入了 logger() 函数内部然后立即退出5. 跳转快捷键F8有时我们希望从一个断点跳转到另一个断点而无需在它们之间进行任何调试就可以使用这个选项来跳转到下一个断点四、检查范围、调用堆栈和值 当进行逐行调试时检查变量的范围和值以及函数调用的调用堆栈。在Debugger区可以这三个选项1. 范围Scope可以在 Scope 选项中查看局部范围和全局范围内的内容以及变量还可以看到 this 的实时指向2. 调用堆栈调用堆栈面板有助于识别函数执行堆栈3. 值检查代码中的值是识别代码中错误的主要方法。在单步执行时我们只需要将鼠标悬停在变量上即可检查值。下面可以看到变量 name 在代码执行时的检查值此外我们可以选择打码的一部分作为表达式来检查值。在下面的例子中选择了表达式document.getElementById(m_wish) 来检查值4. WatchWatch 部分允许添加一个或多个表达式并在执行时监视它们的值。当我们想在代码逻辑之外进行一些计算时这个功能非常有用。我们可以组合来自代码区域的任何变量以形成有效的JavaScript表达式。在逐步执行时就能看到表达式的值。以下是添加 Watch 的步骤单击 Watch 上的 按钮添加要监控的表达式。在这个例子中添加了一个希望观察其值的变量另一种观察表达式值的方法是从控制台的console中添加五、禁用和删除断点 可以点击以下按钮来禁用所有的断点注意上述方法不会删除断点只会在暂时停用它们。要再次激活这些断点只需再点一次这个断点即可。通过取消选中的复选框可以从“Breakpoints”面板中删除一个或多个断点。通过右键单击并选择“删除所有断点”选项可以删除所有断点六、使用 VS Code 调试 JavaScript Visual Studio code 中一些实用的插件可以用于 JavaScript 代码的调试。可以安装一个名为“Debugger for Chrome”的插件来调试代码安装之后单击左侧的 run 选项并创建配置以运行/调试 JavaScript 应用程序。这样就会创建一个名为 launch.json 的文件其中包含一些设置信息{version: 0.2.0,configurations: [{type: chrome,request: launch,name: Debug the Greet Me app,url: http://localhost:5500,webRoot: ${workspaceFolder}}]
}可以修改以下参数name : 任意名称url本地运行的 URLwebRoot默认值为 ${workspaceFolder}即当前文件夹。可能将其更改为 项目入口文件即可。最后一步是通过单击左上角的播放图标开始调试这个调试器类似于DevTools主要有以下部分启用调试。按播放按钮启用调试选项。用于单步执行断点以及暂停或停止调试的控件。在源代码上设置断点。范围面板查看变量范围和值。用于创建和监视表达式的监视面板。执行函数的调用栈。要启用、禁用和删除的断点列表。调试控制台读取控制台日志消息。最后回到最开始的问题这里不再一步步调试通过上述的调试方法判定只需要在 wish 变量前面加一个 即可const message Hello name , Your wish wish may come true!;本文翻译自 Tapas Adhikary 的原创文章已获得作者翻译、转载授权作者Tapas Adhikary译者CUGGZ原文链接https://blog.greenroots.info/the-definitive-guide-to-javascript-debugging-2021-edition················· 若川简介 ·················你好我是若川毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》20余篇在知乎、掘金收获超百万阅读。从2014年起每年都会写一篇年度总结已经坚持写了8年点击查看年度总结。同时最近组织了源码共读活动帮助3000前端人学会看源码。公众号愿景帮助5年内前端人走向前列。扫码加我微信 ruochuan02、拉你进源码共读群今日话题目前建有江西|湖南|湖北 籍 前端群想进群的可以加我微信 ruochuan12 进群。分享、收藏、点赞、在看我的文章就是对我最大的支持~
