IE11之F12 Developer Tools--调试器(Debugger)

使用调试器工具在代码运行时对其导航、设置监视点和断点，查看调用堆栈，以及提升编译/精简JavaScript的可读性。

调试器能够帮助你了解为什么你的代码片断会出现未按照预期方式运行、未在预期时间运行及在不该运行的时候运行的状况。在调试过程当中能够暂停执行中的代码，让你能够备份和重复代码块，也能够从不一样角度检查代码的状况。

调试器默认布局显示三个窗格，能够调整其宽度和/或高度。

　　脚本窗格：显示网页的HTML和JavaScript的源。
　　监视点窗格(Watches):显示变量值。在断开模式时，以代码形式显示当前位置的本地变量（区域设置），以及要求跟踪的特定变量（监视点）。
　　调用堆栈和断点窗格：
　　　　调用堆栈：显示导向当前执行点的函数调用链
　　　　断点：显示已设置的断点和跟踪点的列表，并提供用于删除、切换和编辑断点的函数。

可使用三种方法启动调试会话：

　　设置断点：当你的代码执行到断点时，进入调试模式，能够逐步运行代码。
　　在代码中断开：在网页正常运行时单击上图中的"||"图标进行调试模式
　　将"异常控制"设置为在未处理的异常处断开并运行网页代码，直处处理异常

　　　　

进入调试模式时，咱们能够从断点处继续执行操做，此时看到的代码若是是一团乱糟糟的格式，记得启用格式化代码。看以下图所示的工具栏：

从左到右依次是：

　　继续：离开调试模式，继续执行到下一个断点，若是断点不存在，则直接向下运行至异常或结束。
　　断开：在下一个运行的语句处断开。
　　单步执行：单步执行调用的函数，若是不是函数，则单步执行到下一个语句。
　　逐过程执行：逐过程执行调用的函数，若不是函数，则逐过程执行下一个语句。
　　跳出：跳出当前函数，并单步执行调用的函数
　　在建立新的Worker时断开
　　异常控制
　　是否格式化代码：若是显示被选中，则代码被格式化，看起来有秩序
　　当代码过长的时候是否启用换行：只有当格式化代码启用以后才能使用此功能
　　是否仅个人代码

当调试模式启用时，也能够右键脚本窗格选择相应的操做。

在上述工具栏中，咱们看到最后一个图标是灰色不可用状态，也并无解释它是作什么用的，在介绍它以前，咱们先来看看源映射。

有时候，咱们使用编译为JavaScript的语言编写代码时，会使用JavaScript压缩器。此时，浏览器中运行的代码与你所编写的代码有很大的不一样，这时候，调试将变得很是困难。即便咱们格式化代码让代码具备更高的可读性，但其函数和变量名称可能和源代码的名称依然不一样。此时，若是错误能够指向原始源代码中存在的问题，而非指向浏览器中运行的大量修改的文件，将会是个不错的方案。

说了这么多，没错，最后一个灰色图标，就是为了源映射而存在的。那么为何它会是灰色呢？若是让它变得可用？右键正在调试的文件名，选择源文件映射文件：

若是没有找到映射，调试器工具不会显示错误，在不少状况下，用户会下载压缩或编译的库且不会想去调试它们。

映射并不是100%完美。调用堆栈和检查器函数在变量名称用在运行的代码中时，显示编译/压缩的变量名称。此外，源映射的质量将根据生成它们的软件而有所不一样。

接下来聊聊断点的设置和管理。不一样类型的点使你能够在调试器工具到达这些点时指示它执行不一样操做。

　　常规断点：最容易设置，单击行号旁的位置便可。
　　条件断点：仅当设置的条件评估为true时，才会断开。
　　跟踪点：相似于临时console.log()命令。
　　事件的断点和跟踪点：由特定事件触发，而不是在执行特定代码块时触发。每一个断点和跟踪点都具备一个可选的条件筛选器，可帮助你将其做用域缩小到要检查的事件的待定实例上：

　　　　

在你关闭浏览器后，断点将保留，这意味着，每次打开浏览器进行调试时无需再设置它们，要想删除它们，在断点窗格手动进行删除。

设置完断点以后，进行调试时，能够查看对象和变量：

　　在脚本窗格，鼠标悬停在任何变量、函数或对象上能够查看覆盖中的详细信息

　　　　
　　在Watches窗格中的区域设置节点将为你提供全部对象和变量的目录（本地和全局范围），可用于当前断开中做为焦点的语句。使用添加监视能够添加想要查看的对象和变量。

　　　　
　　异常调用函数的状况很是常见，这可能致使数据损坏和速度问题。“调用堆栈”窗格显示JavaScript引擎到达该函数所使用的路由。当前函数将显示在顶部，调用的函数按照逆序显示在其下。
　　以异步方式调用函数后，要跟踪调用它的位置会变得更难。

回到脚本窗格，咱们发现脚本窗格提供的是选项卡式的页面，其中调试模式打开的文件咱们能够一目了然，但有时候咱们想查看的文件若是不在选项卡中出现，应该如何查看呢？其实，在最脚本窗格的选项卡中，展开最左侧的文件夹，就能够看到全部的文件：

在顶部，咱们还能够输入筛选条件快速找到咱们须要的文件，而当鼠标在单个文件上方悬停时，还会显示出文件所在的完整路径，单击文件，它将会显示在脚本窗格中。

前面提到，在调试器工具栏中有一个开关时是否启用仅个人代码，仅个人代码，容许你指示某些脚本式应该在调试时忽略的第三方库。这能够防止调试器处理你未编写且不打算更改的代码。当启用时，若执行暂停时库代码包含在调用堆栈中，则调用堆栈窗格右上角的仅个人代码图标能够打开和关闭该执行框架的详细信息。

当咱们打开IE浏览器时，不知道你们是否注意到一个选项：启用InPrivate浏览，以下图所示：

什么是InPrivate浏览呢？

其实InPrivate浏览是使你在浏览时不会在浏览器历史记录中留下任何痕迹，前面咱们提到了不少时候调试的信息都会被保留，可是若是使用这种方式浏览，调试器就可能不会保存某些应该被保留的信息。而对于你在文件中添加的断点，使用仅个人代码功能将文件标记为库代码，或使用调试器打开不是根页面的文件时，调试器依然将保存有关你调试页面和文件的信息。这个须要引发注意。

因为同时运行调试器(Debugger)和探查器(Profiler)须要额外开销，因此分析报告中的值不会反映代码的实际加载和运行时间，所以，不支持尝试同时运行两个函数。

调试器就介绍到这里，更多的学习须要你们在实践中理解。也许有人会说，哦，这个是个开发人员须要学习的技能之一，和测试人员无关。

准确地说，做为网页开发人员，的确须要对这个技能进行掌握，由于它能很好地帮助咱们了解代码的问题所在，而做为测试人员来讲，每每不会去作调试代码的工做，可是实际上，咱们在作测试的过程当中，有时候一个网页开着开着就自动出现了暂停状态，以下图所示，但下图是人为形成的，这里仅做为例子演示：

伴随着网页的黯淡，大大的暂停符号"||"的出现，Developer Tools自动启动，此时，正在测试的你，若是能对Debugger及代码有必定的了解，多是好奇，多是排查问题，你也须要用到这个技能进行进一步的观察。固然，若是你说，我对这个一窍不通怎么办？关闭浏览器从新打开网页可能也是一个看起来不错的途径，只是，万一存在bug，这么作就放肆地让它在你眼皮底下悄悄地溜走了哦~ ^_^