- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章JavaScript 断点调试技巧由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.
这篇文章将介绍如何使用断点来进行 JavaScript 调试。在读这篇文章之前,需要问一个问题:为什么要使用断点来进行调试?
我们首先需要认可使用断点的是必要的,否则下文介绍的所有断点调试方法都会是废话。console.log 是前端开发最常用的调试手段,它简单直接解决一部分问题。但当遇到十分复杂的问题,console.log 就会变得不趁手。比如:
如果你刷过 leetcode 一定深有体会,算法某个测试用例报错了,有时很难光靠目测找出有问题的那个方法.
花了10分钟好不容易复现了,但是只跟踪到某行代码,需要第二次添加 log 才能继续寻找问题。查看log -@gt; 添加log -@gt; 查看log... 这个过程重复几遍,今天剩下的砖就搬不完了.
有 nodejs 服务端开发经验的同学相信有过在 postman 和 ide 之间反复横跳的经历,如果光靠 log,对于一个巨大的复杂对象,控制台是不好查看全貌的。如果一个接口还涉及到数据库增删、第三方依赖,那么复原上一次请求造成的后果也是一件痛苦的事情.
在这些情况下,断点调试是非常有价值的,将 debug 的时间复杂度从 O(n) 降到 O(1),让搬砖更快乐.
这是文章的内容大纲:
最简单的断点调试,就是在代码中加一句 debugger,然后到浏览器中刷新页面,这时候浏览器就会在 debugger 语句那停止执行.
为了方便理解,引入一个简单例子,在一个文件夹中创建 index.html 和 index.js,然后在 index.html 中引入 index.js。index.js 内容如下:
执行命令:
然后访问 http://localhost:5000并打开开发者工具.
这时候我们的 hello world 断点就打上了,就像这样:
d8090eb4-4a1f-4dfb-bf30-c08c762d66ad 。
图中分为四个区域,蓝色区域用于文件选择,Page 一栏是指当前页面中的 JS 文件,Filesystem 会显示我们系统中的文件。通常我们使用 Page.
粉色是代码的行号和内容。代码的行号处可以通过点击来添加新的断点,再次点击后取消.
黄色区域用于控制代码的执行,只需要掌握前四个按钮的含义,就可以应付绝大多数场景。按钮1是让代码继续执行(resume),如果遇到下一个断点就会再次中断执行。按钮2可以让浏览器执行当前行(图中是第3行),然后在下一行中断代码,按钮3是进入当前函数,查看函数具体内容。假设我们当前停在第7行 greet() ,点击按钮3就会进入 greet 方法中(也就是第2行)。如果不想再看 greet 方法了,就点击按钮4,跳出这个方法,回到第8行.
绿色区域可以查看变量的内容和当前的调用栈.
debugger 是最简单粗暴的打断点方式,但是需要修改我们的代码。需要注意的是,上线前必须删除这些语句。也可以通过配置 webpack 来自动去除。不过终究还是有些不方便,所以我们来看下如何通过 vscode 来简化打断点的方式.
首先我们使用 Vite 来创建一个 Vue 应用用于演示(React步骤类似).
然后在 VS Code 中新建一个文件 .vscode/launch.json,填入这些内容:
然后使用 cmd+q 退出你正在运行的 Chrome(这步很重要,不能跳过),按 f5 启动 VS Code 的调试功能。VS Code 就会帮你启动一个 Chrome 窗口,并访问上述配置的中的 url。这时候我们的断点就生效了,可以一步一步地控制代码的运行,找出 bug 来源.
这里有一个实用的小技巧,就是在 BREAKPOINTS 中,把 Uncaught Exceptions 勾上,这样在代码报错的地方,就会自动中断执行。当我们遇到一个报错时,采用这个方法可以省去定位问题代码的时间.
另外我们可以发现,在 VS Code 断点生效时,Chrome Devtools 也会同步这个展示这个断点.
在 VS Code 中,调试有两种模式,分别是 launch 和 attach。由于真正执行代码的是 Chrome 中的 JS 引擎,所以是否中断代码的控制权是在 Chrome 手里的。那为什么 VS Code 的断点可以控制代码的中断呢?是因为 VS Code 通过 devtools-protocol 向 Chrome 发起指令,告诉 Chrome 需要在哪一行代码暂停执行。这个发送指令的过程,被称作 attach。而 launch 的过程包含 attach ,即先 launch(启动) 浏览器,然后 attach(附加) 断点信息。所以 attach 模式是 launch 模式的子集.
听起来好像 launch 模式会更方便,为我们省去了手动启动浏览器的过程。但是这存在一个问题,如果同时开发多个前端工程会怎样?每个工程启动一个调试进程,就会打开多个浏览器,那么在多个浏览器之间切换就会显得很麻烦。我们可以使用 attach 模式解决这个问题.
首先我们使用命令行启动 Chrome。使用命令行的原因是,我们需要给 Chrome 的启动传参.
VS Code 和 Chrome 是通过 websocket 交流,--remote-debugging-port 指定了 websocket 使用的端口。然后我们将 launch.json 文件修改成这样:
注意在启动 VS Code 调试之前,需要在 Chrome 中打开 http://localhost:3000 这个页面。然后我们在 VS Code 中打上断点,刷新浏览器,代码就成功停在断点处了。第二个、第n个工程都可以采用相同的配置,区别是 url 字段要根据项目配置进行修改.
上文讲的是如何调试页面,接下来我们聊如何调试 nodejs 应用。首先来一个最容易上手的例子,创建一个 hello world:
然后运行这个文件 。
--inspect-brk 表示运行这个 js 文件的同时,在文件的第一行打上断点。然后打开 Chrome,进入 Devtools。点击红框处的按钮,就会打开一个 nodejs 专用的调试窗口,并且代码在第一行中断了.
nodejs 调试窗口:
这个方式的实质是,Chrome Devtool 根据 v8引擎的调试协议 向 nodejs 进程发送指令,控制代码的运行。可以发现,在网页的调试中,Chrome 是接受指令的一方,而在 nodejs 调试中,Chrome 转身变为发送指令的一方。所谓从悲惨的乙方华丽转身成甲方.
node 默认的 websocket 端口是 9229,如果有需要的话(比如端口被占用了),我们可以通过一些方式改变这个端口.
在我们打开 Devtool 时,Chrome 默认检查 9229 端口,但当我们改变了端口号后,就需要手动去指定 Chrome 检查的地址了。点击下图中的 Configure 按钮,输入 127.0.0.1:9228,然后点击 Done。这时候 Remote Target 中就会出现 刚才启动的 node 进程,点击 inspect 就可以进入调试了.
到此为止,我们已经达成调试 node 的目的,但还有些繁琐,不够自动化。我们可以使用 VS Code,来一键启动调试.
用 VS Code 打开刚才的工程,然后在 launch.json 中输入这些:
这时候切换到 index.js 文件,按 f5 启动调试程序,当运行到第二行 debugger 语句的时候,就会自动暂停执行。也可以点击代码行数的左侧来打断点.
另外,这个配置是支持 TypeScript 的,我们只需要 index.js 重命名为 index.ts,然后正常启动调试就行.
在某些情况下,我们不希望打上的每个断点都发挥作用,而是在执行到断点那行,且满足某个条件再中断代码执行。这就是条件断点.
比如上面的代码,假设我们在第二行 console.log 打了断点,那么这个断点总计会中断十次。这往往是我们不希望看到的,可能我们需要的仅仅是其中某一次循环而非所有。这时候可以右键点击并选择 Add Conditional Breakpoint.
这时会有一个输入框出现,我们在其中输入 i === 5.
这时候启动调试,就会跳过 i 为 0 - 4,直接在在 i 为 5 的时候中断代码执行。恢复代码执行后,会略过 i 为 6 - 9 的情况.
Conditional Breakpoint 在调试带有大量循环和 if else 判断时极为有用,特别是当某处的逻辑整体上是符合预期的,仅有个别特殊情况的输出错误,使用条件断点就可以略过这些正常的情况,只在个别特殊情况出现的时候,再中断执行,供我们查看各个变量是否计算正常.
调试是日常工作中非常重要的能力,因为除了开发新功能外,日常有很大一部分都在调整旧的代码,处理特别条件下的逻辑错误。熟练掌握调试可以很好地提升搬砖幸福感,一个复杂的 bug 卡几小时,很容易让人心里崩溃。但也不是说断点调试是任何情况下都适用的银弹,简单的逻辑还是可以愉快地 console.log 的.
文章介绍了使用 Chrome Devtools 和 VS Code 断点调试的方法,整体上还是更推荐使用 VS Code。launch.json 只需要一次配置,后续都可以 f5 一键启动调试。另外,文中提到的各种 launch.json 文件的配置,都可以使用 VS Code 自带的工具一键生成。只要打开 launch.json,编辑器的右下角就会出现 Add Configuration 按钮,点击就可以选择自己需要添加的调试配置.
原文链接:https://mp.weixin.qq.com/s/UJMed_WwdIsYVVL0zoMF5w 。
最后此篇关于JavaScript 断点调试技巧的文章就讲到这里了,如果你想了解更多关于JavaScript 断点调试技巧的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
我是新手。查看 Google 新闻...上下滚动页面时请注意左侧导航栏。 看看它是如何滚动一点,然后在它消失之前粘在页面顶部的? 关于如何做到这一点有什么想法吗? jQuery 和 CSS 可以复制吗
技巧 1:在 Web 服务器上缓存常用数据 技巧 2:在 Application 或 Session 对象中缓存常用数据 技巧 3:在 Web 服务器磁盘上缓存数据和 HTML 技巧 4:避免
我在 excel 中有一个电子表格,其中包含以下行: COLUMN Value1.Value2.Value3 Value4.Value5.Value6 Value7.Value8.Val
GNU Makefile 中是否有任何技巧来获取规则的所有依赖项? 例子: rule1: dep1_1 dep1_2 dep1_3 rule2: dep2_1 dep2_2 rule1 dump_
人们使用什么来追踪内存泄漏?我已经通过代码检查设法解决了一些问题,但我不知道下一步该做什么/当我的程序变大时我将如何管理问题。我知道我在泄漏什么类型的对象,但我不知道是什么让它保持活力。 在 Wind
有什么好的方法可以将“xlSum”、“xlAverage”和“xlCount”等字符串转换为它们在 Microsoft.Office.Interop.Excel.XlConsolidationFunc
我们都见过这个: javascript:document.body.contentEditable='true'; document.designMode='on';无效 0 但我的问题是,这实际上是
我的应用程序将输出一个图形,其布局由用户定义。自定义布局类应该实现我定义的接口(interface)。我应该怎么做?有一个特殊的文件夹,我可以在其中查找布局类?用户是否将类名作为参数传递给应用? 如有
我在弄清楚如何在 Javascript 中自引用表行时遇到了一些麻烦。 这是简化的代码: $( "#listitems tbody" ).append( "" + "" + id.va
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 6 年前。 Improve this q
我正在将代码库从一种编程风格转移到另一种编程风格。 我们有一个名为 Operand 的类型,定义如下: class Operand {...}; 然后我们有 class OperandFactory
我使用以下缩略图类在我的内容包装器中显示 4x3 缩略图: .thumbnail { float:left; width:300px; height:200px; ma
按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我认为这是不可能的,但我想在放弃之前问问你。 我想要类似 constexpr 增量的东西。 #include constexpr int inc() { static int inc = 0;
是否有任何适合 C++ 新手的技术和描述的好列表。我在想一个描述 RAII、RVO、左值的列表……这适用于目前不了解这些技术或来自不适用这些技术的其他语言的新手。 最好是短小精悍的:-) 最佳答案 是
我有一个二进制字符串 '01110000',我想在不编写 forloop 的情况下返回前面的前导零数。有谁知道如何做到这一点?如果字符串立即以“1”开头,最好也返回 0 最佳答案 如果您真的确定它是一
我需要优化我的应用程序的 RAM 使用率。 请省去那些告诉我在编写 Python 代码时不应该关心内存的讲座。我有内存问题,因为我使用非常大的默认字典(是的,我也想快点)。我目前的内存消耗是 350M
有时,当我看到一个我喜欢的网站或来自受人尊敬的人的网站时,我会查看源代码并尝试理解它们(就像我们所有人一样)。 关于 Jeremy Keiths他使用以下代码的网站: [role="navigatio
这是我怎样设置 Git 来管理我的家目录的方法。 我有好几台电脑。一台笔记本电脑用于工作,一台工作站放在家里,一台树莓派(或四台),一台 Pocket CHIP,一台 运行
shell 技巧 表变量 HBase 0.95 版本增加了为表提供 jruby 风格的面向对象引用的 shell 命令。以前,作用于表的所有 shell 命令都具有程序风格,该风格始终将表的名称作
我是一名优秀的程序员,十分优秀!