标签：
虽然网上已经有多的数不清的调试教程了，但仍然没有发现哪篇文章写的通俗易懂，索性自己尝试写写自己的一些使用习惯或者说是心得，希望对那些还不是很懂得使用断点调试的孩子有一些帮助（大神请无视~）。
断点调试其实并不是多么复杂的一件事，简单的理解无外呼就是打开浏览器，打开sources找到js文件，在行号上点一下罢了。操作起来似乎很简单，其实很多人纠结的是，是在哪里打断点？（我们先看一个断点截图，以chrome浏览器的断点为例）
步骤记住没？
打断点操作很简单，核心的问题在于，断点怎么打才能够排查出代码的问题所在呢？下面我继续举个例子方便大家理解，废话不多说，上图：
假设我们现在正在实现一个加载更多的功能，如上图，但是现在加载更多功能出现了问题，点击以后数据没有加载出来，这时候我们第一时间想到的应该是啥？（换一行写答案，大家可以看看自己的第一反应是啥）
我最先想到的是，我点击到底有没有成功？点击事件里的方法有没有运行？好，要想知道这个问题的答案，我们立马去打个断点试试看，断点打在哪？自己先琢磨一下。
接着上图：
各位想到没？没错，既然想知道点击是否成功，我们当然是在代码中的点击事件处添加一个断点，切记不要添加在226行哦，因为被执行的是click方法内的函数，而不是226行的选择器。断点现在已经打上了，然后做什么呢？自己再琢磨琢磨~
继续上图：
然后我们当然是回去点击加载更多按钮啦，为什么？额。。。如果你这么问，请允许我用这个表情
，不点击加载更多按钮，怎么去触发点击事件？不触发点击事件，怎么去执行点击事件里的函数？咆哮状。。不过我相信大家肯定不会问这么low的问题~不瞎扯了~
继续正题，上面的图就是点击加载更多按钮后的情况，我们可以看到左侧的页面被一个半透明的层给盖住了，页面上方还有一串英文和两个按钮，右侧代码227行被添加上了背景色，出现这个情况，先不管那些按钮英文是啥意思有啥作用，你从这个图得到了什么信息？继续琢磨琢磨~
如果出现了上图这个情况，说明一点，click事件中的函数被调用了，进一步说明了点击事件生效。那么我们对于这个问题产生的第一个“犯罪嫌疑人”就被排除了。
那么接下来”犯罪嫌疑人“的身份锁定在哪里呢？
我们将目光投向事件内部，click事件触发了，那么接下来的问题就是它内部的函数问题了。如果你要问为什么？请给我一块豆腐。。。
打个比方，给你一支笔，让你写字，然后你在纸上写了一个字，发现字没出来，为啥？你说我写了呀，纸上都还有划痕。那是不是可能笔没有墨水或者笔尖坏了了？这个例子和点击加载更多一个道理，写字这个动作就是点击操作，而内部函数就是墨水或者笔尖。明白了不~
接着我们分析下点击事件里面的内容，里面包含三句话，第一句话是变量i自增长，第二句话是给按钮添加一个i标签，第三句话是调用请求数据的方法。
就通过这三句话的本身作用，我们可以将较大一部分嫌疑放在第三句话，一小部分放在第一句和第二句话上，有人可能会疑惑，第二句话怎么会有嫌疑呢？他的作用只不过是添加一个标签，对于数据完全没有影响啊，确实，这句话对于数据没有影响，但是出于严谨考虑，它仍然有可能出错，例如它要是少了一个分号呢？或者句子内部某个符号错误呢？往往就是这种小问题浪费我们很多时间。
好，为了进一步锁定”犯罪嫌疑人“，给大家介绍一个工具，也是上图出现两个图标之一，见下图：
这个小图标的功能叫”逐语句执行“或者叫”逐步执行“，这是我个人理解的一个叫法，意思就是，每点击它一次，js语句就会往后执行一句，它还有一个快捷键，F10。下图示范一下它被点击以后的效果：
我单击了两次这个按钮（或者使用F10快捷键），js代码从227行执行到了229行，所以我管它叫”逐语句执行“或者”逐步执行“。这个功能非常的实用，大部分的调试都会使用到它。
太晚了，明天继续写，好戏还在后头~
——————————————————————分割线————————————————————
标签：
原文地址：http://www.cnblogs.com/mqfblog/p/5397282.html
