js调试系列断点和动态调试【基础】

时间：2021-10-03 来源：互联网编辑：宝哥软件园浏览：次

几篇文章已经为大家介绍了js调试系列的一些基本知识。这次乱码兄弟给大家带来了js断点和动态调试方法。有需要的朋友可以参考。

昨天的课后练习1。分析votePost函数如何实现推荐。事实上，我们已经看到了源代码，所以我们可以通过阅读源代码来知道它是如何实现的。

函数votePost(n，t，i) { i || (i=！1);var r={ blogapp : current blogapp，position d :n，voteType: t，isabandone d : I }；$ ('# Digg _ tips ')。CSS('颜色'，'红色')。html('正在提交中.');$.Ajax({ URL : '/MVC/vote blogpost . aspx '，type: 'post '，dataType: 'json '，content type : ' application/JSON；charset=utf-8 '，data: JSON.stringify(r)，success : function(n){ if(n . issueccess){ var I=$(' # ' t . tolowercase()' _ count ')；r.isAbandoned？$(一)。html(parseInt($(i))。html()) - 1) : $(i)。html(parseInt($(i))。html()) 1) } $('#digg_tips ')。html(n.Message) }，error:函数(n) { n.status 0 (n.status==500？$ ('# dig _ tips ')。html('对不起！出现错误！请反馈到[电子邮件保护]') : $ ('# Digg _ tips ')。html(n . response text))})；}差不多是这样的。Ps:我使用了崇高的文本格式的代码，这与chrome控制台格式的结果有点不同。你也可以试试这个在线格式化工具，效果差不多：在线JavaScript美化器。

简单看了一下代码，我们可以大致知道这个函数有三个参数，第一个是postId，是文章Id，第二个是digg或者bury，但是第三个从来没有用过，默认值是false。向下看，他显示字符串“提交…”at #digg_tips，然后通过ajax将数据提交给后台。返回数据后，如果n . IsSuccess为真，则对应的like (#digg_count)或count id(# bury _ count)上为1，但这里可以看到，如果isAbandoned的值为真，则为-1。我们可以猜测第三个参数是用来取消推荐还是反对。简单来说就是点了推荐，现在不想推荐了。我可以通过第三个参数true来取消推荐。我们稍后会测试它。然后，服务器返回的消息信息显示在# dig _ tips。如果ajax有错误，如果是500错误，会提示‘对不起！出现错误！故障反馈到[emailprotected]其他状态，直接提示服务器返回的错误消息。这是一般的流程，因为这个功能简单，一目了然。

可能有新朋友问，你怎么知道currentblogapp，n，t和I的值是多少？让我们进入下一步，动态调试。对于编译项目来说，动态调试是一种非常有用的手段。首先找到votePost源代码。(这是昨天说的。如果不太懂，先回去看看。)

如此简单，我们找到了源代码。接下来，我们点击数字92来执行断点操作。为什么不在91号线停下来？因为第91行是函数声明部分，所以我们不能破断点，所以我们只是在函数要执行的代码处破断点。

我看到91行的行号变成了蓝色，说明这个地方已经破断点了。同时，我们可以在右侧的断点列中看到断点。断点是用来管理所有断点的，所以可以轻松跳转到对应的断点，以后会经常用到。

现在断点结束了，让我们返回并点击推荐。(虽然感觉自己在推荐上作弊，但真的不觉得。我刚找到一个按钮来练习。)当你点击推荐按钮时，一件神奇的事情发生了。您没有运行推荐功能，而是跳到了我们刚刚在控制台的源面板中设置的断点。

现在，您不仅可以在右侧的范围变量列中看到当前变量，还可以将鼠标直接移动到任何变量上，并且可以查看该变量的值。范围变量列将显示当前范围及其父范围，以及闭包。超级方便吗？(当我第一次学习闭包时，范围变量对我帮助很大。)

让我们进入下一步，按F10三次，看到这样的东西。

每次我们向F10施压，我们都会执行一份声明。只需按三次，即$ ('# Digg _ tips ')。CSS('颜色'，'红色')。HTML('正在提交.');所以我们可以在页面上看到# dig _ tips显示了提交中的单词。然而，当我们再次按下F10时，我们发现它一直在继续，但是没有进入ajax内部的回调函数。

这是一个纠结的问题，我想重点讲一下。像这个回调函数，特别是异步的，我们需要在回调函数内部再做一个断点。所以我们可以在第96行再次中断断点。现在我们再次点击推荐，它仍然停留在第92行。我们可以直接按F8，在ajax的回调函数处破掉它。

现在，我们可以调试回调数据，同时，我们可以发现右侧的范围变量中有一个闭包，这就是闭包。如果你现在不能理解，那么，这个东西应该在一个很大的空间里介绍，三言两语解释不了。反正控制台很强大。当我们看到闭包时，我们也看到了ajax的返回数据n。显然，我的IsSuccess属性为false，失败的原因是他返回了一条消息‘我不能推荐我自己的内容’。是不是很有趣？动态调试使得发现bug变得非常容易。

接下来，让我们用第三个参数进行实验。在控制台，我们输入投票帖子(CB _ entryid，' Digg '，true)；然后进入。它也在第92行的断点处停止，因此不会在此框中尝试。F8直接进入ajax的回调函数。