Java工具使用 Chrome 开发者工具进行 JavaScript 问题定位与调试

　　Google Chrome 是由 Goole 公司开发的一款网页浏览器，自 2008 年 9 月第一个测试版本发布以来，其市场占有率逐步上升，至 2014 年 5 月，Chrome 已超越 Firefox 成为全球市场占有率第二的浏览器。Chrome 的受欢迎程度与其优秀的性能与兼容性密不可分，并且越来越多的网络应用程序都添加了对 Chrome 的支持，也足以体现网络应用的开发人员对 Chrome 的认可与青睐，而其中最重要的原因之一，莫过于 Chrome 所提供的强大的开发者工具。Chrome 开发者工具包含诸多强大的功能模块，适应于多个不同场合的需要。本文先简单介绍 Chrome 开发者工具的各个模块及其基本功能，再着重针对网页脚本调试，阐述如何巧妙运用 Chrome 开发者工具定位与调试问题。（本文所选的 Chrome 开发者工具为 Chrome V35 版本中内置，较之前版本可能略有不同，请留意）

　　回页首

　　虽然对于 Chrome 开发者工具的介绍，Google 以及互联网中都有众多文章进行阐述，但为了有助于读者更好地理解本文后面对如何巧妙运用开发者工具定位及调试脚本的阐述，在此对开发者工具中的各个模块做一个概要性的介绍。如果对其中某些模块特别有兴趣，请参考文末的链接，从中进行深入了解。

　　Chrome V35 版本中的开发者工具分为 8 个大模块，每个模块及其主要功能为：

　　后文会在阐述过程中，会提及使用 Element 标签页探测页面元素并查看该元素的 HTML 内容，也会使用 Source 标签页与 Console 标签页调试脚本及查看调试信息，并不会详细介绍他们的基本功能，请在阅读时提前了解以上相关标签页的基本功能。

　　回页首

　　目前很多的网页应用程序都会使用各种诸如 JavaScript 之类的脚本语言，来增强事件处理、页面展现或是样式控制等方面的功能。很多网站或网络应用系统都已做成单页面模式，该页面只负责加载相关的脚本与样式，这些脚本与样式来负责动态生成更多的子页面或对话框。因此，该类网页应用程序的脚本数量会非常大，从而使开发人员在如此之多的脚本中定位某个问题变得困难起来，但也并非毫无技巧。

　　在 Chrome 开发者工具中，可以开户运行时错误自动暂停这一功能（如图 2 所示），从而使开发者工具能在发现运行时脚本异常时，在异常脚本处暂停运行，跳转至调试页面，供开发人员进一步查找该运行时异常产生的原因。

　　图 2. Source 面板中的自动暂停按钮

　　自动暂停按钮的下方有一个选项，Pause On Caught Exceptions，如果勾选上，则即使所发生运行时异常的代码在 try/catch 范围内，Chrome 开发者工具也能够在错误代码处停住。

　　与 Java 调试类似，Chrome 开发者工具提供了断点设置、删除与断点存储等基本功能。同时，开发者工具也提供了设置条件断点的功能，使开发者可以控制该断点只有在满足某一条件时才会被触发。

　　条件断点的设置如图 4 所示，在所需要设置断点的行最前端的行号处点击右键，选择添加条件断点后，会弹出一个对话框用于输入具体的条件。合理运用好条件断点能够提试的效率与准确性，使开发人员能更专注于在期望的场景下进行调试。

　　图 4. Source 面板中添加条件断点

　　这是 Chrome 开发者工具提供的一种非常实用的功能，即使开发人员可直接对开发者工具的 Source 标签页中的代码进行修改，并将其保存，使浏览器在下次执行该段脚本时，直接加载最新修改的版本。目前的 Firebug 及 IE 自带的开发者工具都不支持对脚本的直接修改，导致在 Firefox 或 IE 中调试脚本时，如果需要对代码进行修改，需要先去修改脚本源文件，再同步至应用服务器，再清理浏览器缓存，最终再次打开应用程序时，才会看到代码修改后的效果。可见 Chrome 开发者工具提供的这一功能，大大提供了开发者调试脚本的效果。

　　需要注意的是，由于这种修改是保存在浏览器缓存中，因此它不会影响到脚本的源文件。当开发人员决定采用修改之后的脚本时，需要将其复制到脚本的源文件中。

　　当断点被触发进入到调试模式时，我们可以将当前任意存在的变量或方法输入到控制台中，按下回车后，控制台便会返回相关的结果。该功能可使开发人员方便了解程序运行至断点处时各个所需要变量或方法的返回值。

　　需要注意的是，当在控制台中输入的方法名字不带括号时，控制台输出的是该方法所包含的代码信息，而并不是运行结果。

　　在网页开发过程中，经常需要在脚本中控制不同条件下页面的样式展示，例如要求某一个按钮的颜色在用户停留十秒钟之后由白色变成灰色。此时我们便需要在脚本中通过具体的数值指定这个灰色该如何表示，一般情况下我们需要查找相关资料或使用其他工具才能得到期望的灰色所对应的 RGB 数值或十六进制数值。然而在 Chrome 开发者工具的 Element 标签页中，其实已经提供了包括该功能在内的一系列对样式进行实时修改的功能，并且在修改之后能够立即从页面中看到变化。

　　图 4 给出的是 Element 标签页的右半部分，当要对某个样式类中的颜色进行修改时，它提供出一个非常直观的图谱供选择，并在下方将其十六进制代码显示出来。开发人员可直接在此进行颜色选择，确定颜色后，在 JavaScript 代码中引用其十六进制数值即可。

　　图 5. Element 面板中的颜色样式编辑

　　回页首

　　Chrome 开发者工具的功能丰富而强大，本文着眼于对 JavaScript 的定位与调试，介绍了其中的技巧与。相对于 Firebug 与 IE 开发者工具而言，Chrome 所提供的一些独特功能如对脚本源码的直接修改，极大方便了开发者对脚本的开发与调试。随着 Chrome 新版本的推出，相信其开发者工具的功能也会日益增强，我们可以通过阅读其更新说明，了解到新功能，借助 Chrome 开发者工具的支持，提高网页应用程序开发与调试的效率。