前言

虽然网上的调试教程数不胜数，但是我还是没有找到什么通俗易懂的文章。我只是试着写一些自己的使用习惯或者经验，希望对那些不知道如何使用断点调试的人有所帮助。

本文将详细介绍指定断点操作的JavaScript的相关内容，并分享给大家参考。下面就不多说了，我们来看看详细的介绍

什么是断点操作

做前端开发的小伙伴可能不太熟悉这个断点操作。但是如果问其他语言的开发者(比如C，C，C #等。)，他们应该熟悉断点操作，这是在XCode或Visual Studio等IDE中提供的。

下面这段话来自知乎

断点操作的含义是设置跟踪点。跟踪点相当于一个带有跟踪功能的临时断点，它将消息打印到输出窗口。

断点操作

选中后面的继续执行，这意味着当跟踪点命中时，调试器不会停止，否则它将在这里停止。在这两种情况下，都会打印消息。

JavaScript说：我需要断点操作

想象这样一个场景，我希望在程序运行的时候，可以观察到某一行上某个变量或者表达式的值。你会说，这不是很简单：

将调试器语句放在指定位置，或在此处设置断点，然后使用控制台或变量侦听来观察变量的值。动态插入console.log代码。似乎第二种方式是更好的方式。当然，动态代码插入可以使用chrome的实时编辑功能。当时，我们想要一种不直接修改代码的方法。此时，你可能会想，设置一个断点操作。

JavaScript如何设置断点操作

前端的童鞋一定知道，JavaScript调试大多是在浏览器中完成的，而这个浏览器大多是Chrome。因为Chrome调试功能强大，方便。我相信你不会反对的。然而，让大家失望的是，chrome根本没有设置断点的功能，自然其他浏览器也没有。我相信你此时的心情是这样的：

说XX不带t。

读者们，别担心，慢慢听我们说。调试Chrome断点时，可以使用条件断点，即所谓的条件断点，来指定一个条件，当这个条件满足时。执行将在断点处停止，否则执行将直接继续。如下图所示，右键单击行号，选择添加条件断点

条件断点

然后，输入条件，如params.value=='value '等条件表达式，如下图所示：

断点条件

对于条件断点的描述，如果还不熟悉，可以自己参考相关资料。

但是这个断点操作和它有什么关系呢？要知道，JavaScript是一种动态语言。事实上，条件判断可以输入任何代码片段。例如，以下代码：

即使express不是布尔值、布尔值表达式或返回布尔值的函数，If(express)也是可以的。这便于我们操作。

JavaScript说：我最机智。

无耻的JavaScript

因此，在条件断点的条件输入框中，我们可以输入想要执行的断点操作，比如console.log如图所示

断点操作

您想要查看的值最终会打印在控制台上，如图所示：

打印结果

由于console.log的返回值是未定义的(最终转换为false)，代码不会在这里停止，而是直接执行，相当于继续执行上面提到的断点操作概念。如果需要在此停止，可以设置以下表达式：

断点操作中断执行

结论

条件断点不是为此目的而设计的。所以这是一个黑客，不是一个标准的方式，不是最初的设计方式。然而，黑客不是被很多Web开发人员使用吗？只要使用方便。

这样，我们可以在不修改代码的情况下临时添加想要执行的代码片段。

很多同学喜欢在项目中直接使用console.log，所以在实际发布中需要删除这些console.log代码，增加了工作量。这样，就有可能减少原始产品代码中的consle.log。

这样，您还可以动态更改一些变量的值。我们知道，有时候，有些bug只能在某个值处重新出现，这个值可能是服务器推送的，调试值可能取决于后端传递的值。其实在首页，这样就可以强行改变一些值，让bug重新出现，不需要依赖背景值。例如：

修改变量

参考

https://www.jb51.net/article/147623.htmhttps://www.visualmicro.com/page/User-Guide.aspx?博士

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。