黑马程序员技术交流社区

标题: 技术交流 [打印本页]

作者: 凭音画温柔 时间: 2019-8-16 19:04
标题: 技术交流
js断点调试心得
1.断点调试是啥？难不难？
断点调试其实并不是多么复杂的一件事，简单的理解无外呼就是打开浏览器，打开sources找到js文件，在行号上点一下罢了。操作起来似乎很简单，其实很多人纠结的是，是在哪里打断点？
用chrome浏览器打开页面 → 按f12打开开发者工具 → 打开Sources → 打开你要调试的js代码文件 → 在行号上单击一下，OK!恭喜你的断点打上了,哈哈~~
2.断点怎么打才合适？
打断点操作很简单，核心的问题在于，断点怎么打才能够排查出代码的问题所在呢？
假设我们现在正在实现一个加载更多的功能，但是现在加载更多功能出现了问题，点击以后数据没有加载出来，这时候我们第一时间想到的应该是啥？（我最先想到的是，我点击到底有没有成功？点击事件里的方法有没有运行？好，要想知道这个问题的答案，我们立马去打个断点试试看，断点打在哪？自己先琢磨一下。
既然想知道点击是否成功，我们当然是在代码中的点击事件处添加一个断点，断点现在已经打上了，然后做什么呢？自己再琢磨琢磨~
然后我们当然是回去点击加载更多按钮啦，为什么？，不点击加载更多按钮，怎么去触发点击事件？不触发点击事件，怎么去执行点击事件里的函数？，点击加载更多按钮后的情况，click事件中的函数被调用了，说明了点击事件生效。那么我们对于这个问题产生的第一个“犯罪嫌疑人”就被排除了。
如果点击事件没有生效呢？那是什么导致点击事件没有生效？大家自己思考思考~
可能导致点击事件没生效的原因很多，比多选择器错误，语法错误，被选择的元素是后生成的等。怎么解决呢？
选择器错误，大家可以继续往后看到console部分的内容，我想大家就知道怎么处理了
语法错误，细心排查一下，不熟悉的语法可以百度对比一下
被选择的元素是后生成的，最简单的处理就是使用.on()方法去处理，这个东东带有事件委托处理，详情可以自行百度。
我们将目光投向事件内部，click事件触发了，那么接下来的问题就是它内部的函数问题了。
好，给大家介绍一个工具，逐语句执行“或者叫”逐步执行“，这是我个人理解的一个叫法，意思就是，每点击它一次，js语句就会往后执行一句，它还有一个快捷键，F10。
这个功能非常的实用，大部分的调试都会使用到它。
最后总结：
本文主要介绍了“逐语句执行”按钮、“逐过程执行”按钮、console控制台这三个工具，以及调试bug时的一些思路。工具的用法我就不再赘述了，大家知道用法就行，具体怎么去更合理的使用，还需要大家通过大量的实践去总结提升~
所以个人认为，我们调试bug的思路应该是这样的：首先，js是否成功的执行进来；其次，js是否存在逻辑问题，变量问题，参数问题等等；最后，如果上述都没有问题，请仔细查看各种符号。。。

作者: 柠檬leung不酸 时间: 2019-8-22 12:53
加油，一起学习丫

作者: 娟呀 时间: 2019-9-9 13:44
加油呀

作者: 夜听雨 时间: 2019-9-18 15:28
不要等待机会，而是要创造机会。现在我来了，希望我们都可以坚持，早日用知识达到暴富

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2