四、检测性能
在本章中，我们将介绍我们的工作环境和所需的工具; 我们还将涵盖在谷歌 Chrome Web Inspector 中发现的功能和 JavaScript 优化工具，并创建一些测试示例，向我们展示如何使用和测试 JavaScript 和 HTML 页面代码。
在本章中，我们将讨论以下主题:
- 一般的 Web inspector
- 元素面板
- 网络面板
- 时间轴面板
- 这个概要文件面板
- 资源面板
- 审计小组
- 控制台面板
一般的 Web 检查员
在深入探索 Chrome 的 Web Inspector 之前，需要注意的是，针对不同的浏览器有许多不同的 Web Inspector，通常是由浏览器供应商开发的，用于调试网页的应用内容和性能。
理解这一点很重要，对于开发人员来说，正确调试 web 应用，他们应该使用为浏览器设计的检查器来检测问题。
Safari Web Inspector
Apple's WebInspector is aWebKit-based Inspector built for Safari。 Web Inspector 的构建非常类似于 Chrome 的 Web Inspector。 我们将介绍更多的 Safari Web Inspector在第 9 章,优化 JavaScript iOS 混合应用,主要是因为 Web Inspector Safari 的【显示】可以在 iOS 开发调试 Web 内容。
**苹果在https://developer.apple.com/safari/tools/上有关于其工具的相当全面文档，如下图所示:
Firefox 开发工具
Mozilla 的火狐浏览器也有自己的检查器。 最初 Firefox 是唯一带有检查器的浏览器; 它被称为 Firebug，是作为插件开发的，并没有包含在主浏览器中。
自从火狐 3 问世以来，Mozilla 开发了自己的浏览器检查器，不仅用于自己的浏览器，还作为火狐操作系统的调试工具。火狐操作系统是 Mozilla 的移动操作系统，使用 HTML5 进行应用开发。 Firefox开发者工具也允许调试相当新的甚至实验性的 HTML5 和 JavaScript 开发形式。
我们可以查看更多信息的开发者类型Firefox 开发人员工具允许 Mozilla 的开发者网络https://developer.mozilla.org/en-US/docs/Tools,下一个屏幕截图所示:
Internet Explorer 开发工具
在过去，Internet Explorer 被认为是 web 开发人员工具箱中的害群之马。 在 Internet Explorer 11 出现之前，微软为 Internet Explorer 6 及以上版本提供了一个简单的 DOM 检查器插件; 尽管它对 ie 浏览器问题非常有帮助，但它的功能集不如其他供应商的检查工具。
自从 Internet Explorer 11 发布以来，微软将自己定位为比过去更支持 HTML 开发，其新的F12 开发工具正是这样做的。 大多数特性F12 开发工具发现一样好 Chrome 的开发工具和 Safari Web Inspector【显示】,更多释放预期在未来。 我们可以在http://msdn.microsoft.com/en-us/library/ie/bg182326(v=vs.85).aspx上阅读更多关于如何使用这些工具的信息，如下面的截图所示:
Chrome 开发工具
Chrome 的 Inspector 是最初使用开源 WebKit 浏览器的 Web Inspector 开发的，它也一度在苹果的 Safari 中使用。 后来，当 Chrome 决定将 WebKit 分支到他们自己的浏览器运行时称为 Blink，谷歌从头开始重建了 Blink 的检查器，优化了用户界面，并添加了在开源 WebKit 检查器中没有的功能。
重建检查器的另一个原因是 Chrome 用于 Android 和 Chrome OS 应用的引入。 这允许开发人员访问特定于这些平台开发的基于 javascript 的控制台对象。 它还提供了一些工具来优化响应式内容，并在不使用设备的情况下调试移动内容。
因为这里提到了丰富的功能，我们将介绍如何使用 Chrome 的 Web Inspector。 如果你想了解另一个检查器的特性，请参考前面提到的链接并研究本章中列出的主题。
最后，Chrome 的新功能更新周期相当频繁，其测试版 Chrome 金丝雀更是如此，这本质上是 Chrome 启用了实验功能，包括任何早期速度的 Blink 改进。 您可以在https://www.google.com/intl/en/chrome/browser/canary.html下载 Canary，如下图所示:
Chromium 的开发工具包含了许多在 Firefox开发工具中常见的高级功能。 在本章中，我将使用默认的 Chrome开发工具，但请查看 Chromium 的开发工具，以了解未来可用的工具。
https://developer.chrome.com/devtoolsforChrome DevTools Overview，如下图所示:
熟悉 Chrome 开发工具
要安装 Chrome 的开发工具，请从http://www.chrome.com/下载 Chrome，即可! Chrome 的开发工具包含在 Chrome 中，无需额外安装。
首先，在 Chrome 中打开一个新窗口，并在多功能框(或地址栏)中输入about:blank。 接下来,让我们打开开发工具使用击键 Ctrl+【T7 转变】+【显示】我(或命令+【病人】选择+我在 Mac)。 我们应该看到一个空白的屏幕，上面显示了开发工具，如下面的截图所示:
默认情况下，Chrome 的开发工具要么显示在 dock 模式，如之前所示，要么显示在自己的窗口中; 如果您想取消或重新停靠开发人员工具，请选择停靠按钮。
按住 dock 按钮可以让我们将开发工具停靠到浏览器窗口的一侧。 你可以在下面的截图中找到停靠按钮标记:
开发工具被分成不同的面板，显示在窗口的顶部，每个面板包含不同的功能和 web 应用的调试选项。 我们将重点关注 javascript 特定的面板，但我们将为不太熟悉它们的人简要介绍每个面板。
元素面板
Elements面板同时显示 HTML 页面的源代码和 DOM Explorer，允许开发人员检查 DOM 中的更改。 我们可以通过将鼠标放在 DOM 树上或使用如下截图所示的放大镜来突出显示元素:
网络面板
网络面板显示所有资源的页面下载速度及其包含的代码。 让我们进入http://www.packtpub.com/，打开Network面板(位于Elements右侧)进行测试。 点击面板左上方的录制按钮，如下图所示:
现在，让我们打开记录按钮来刷新页面。 我们可以看到哪个页面资源在我们的网页上加载的时间更长。 在考虑用 JavaScript 加载资源时，这一点很重要。 如果我们的目标是 DOM 中还不存在的元素或脚本，则可能会发生错误。
如果我们看一下下面的屏幕，我们可以看到，blog-banner.png图形在http://www.packtpub.com/上加载的时间最长。
我们也可以选择资源; 让我们点击其中一个图像资源。 (我会选择blog-banner.png，这个可能在你的页面上存在也可能不存在。 如果您在第一次加载时进行测试，请给站点一些时间加载)。 当我们选择它时，我们可以看到一个新的子面板显示图像预览，如果它是一个图形或源代码，如果它是一个 JavaScript 或 JSON 文件。
我们在子面板中也有标签，其中一个叫做Response。 这为 DevTools 找到的 POST 事件资源提供了信息。 我们还有一个标签叫做标题。 Headers选项卡显示该文件的请求信息，包括(更重要的)图像是否使用任何服务器端缓存。 在中，我们的blog-banner.png文件有一个Cache-control: max-age值，表示最大缓存时间3153600000秒或 10 年。 我们还可以看到完整的Request URL，注意到它使用了一个cloudfront.netURL，所以我们可以推断图像使用 Amazon S3 进行缓存和分发，如下截图所示:
源面板
在这里，我们将从以下几个方面来了解来源面板，借助的帮助:
调试器基本用法
Sources面板是大多数 JavaScript 开发者的家; 我们调试 JavaScript 应用的地方是。 使用它非常简单; 点击左上方Watch Expressions选项右侧的暂停按钮，如下图所示:
调试器测试
让我们试试调试器。 在 Packt Publishing 网站提供的代码包中的Exercise_Files文件夹中，打开Chapter_4文件夹中的01文件夹。 在它里面，我们可以看到一个非常简单的代码示例，我们也有一个 HTML5index.html页面，它看起来像下面的截图在我们的源视图:
我们可以看到，我们有一个非常空的网页，为 body 标签添加了一些样式; 我们还添加了一个main.js外部 JavaScript 文件来处理所有的页面逻辑。 我们在这里要做的是检查一个内有while循环的函数。
循环将添加document.body与paragraphTag变量标签,每个都有一个索引变量称为一个全局变量命名为my_integer``while外循环,这是包含在一个loopingTo5k()功能.这是呼吁第 14 行,它是由window.onload触发事件,见下截图显示main.js源视图:
有了我们的源代码到位，让我们继续运行我们的页面在 Chrome 中打开我们的源面板。 如果我们看一下屏幕，我们可以看到一组数字以连续的顺序向下移动，在文档的最后一行以5000结尾。
让我们在我们的Sources面板中选择main.js文件，在源代码的第 8 行中添加一个断点，看看Sources面板可以做什么。 现在设置好断点后，让我们刷新页面。 当我们这样做时，我们可以看到页面变灰，顶部有一个黄色的注释，表明我们在调试器中暂停了，并且main.js文件中的第 8 行以蓝色高亮显示，说明调试器在哪里暂停了。
我们还可以看到作用域变量选项，它显示了在执行时给定作用域的所有属性和对象; 在本例中，作用域在loopingTo5k()函数中。 要获得更多信息，我们可以参考Sources面板的右侧部分，并查看 Local 树获取信息，或者我们可以将鼠标移到代码文件中的对象上获取更多信息。 如下面的截图所示，我已经突出显示了函数范围中的document.body对象，在 JavaScript 中创建了一个新的段落对象。
当我们完成调试,我们可以按下播放按钮高亮显示蓝色的面板,或者我们可以在一步函数通过控制播放按钮旁边,继续下一个函数。 请记住，如果我们有任何进一步的断点，它们将进一步分解网页中的源文件。 要删除断点，可以将它们从行号列中拖出，然后按下 play 键继续运行，而无需调试。****
**###### 使用调试器关键字
JavaScript 编程中一个鲜为人知的特性是调试器关键字; 这是一个非常简单的辅助函数。 运行代码时，会触发连接的Sources面板或其他 JavaScript 调试器自动断开; 这在处理大型代码库或在某一行出现中断问题时很有帮助。
假设，在到目前为止的示例代码中，我们有一个 while 循环，导致在my_integer的555迭代时的代码出现问题。 如果我们必须一步一步地完成这一过程，我们需要按 555 次播放按钮才能到达那里。 然而，有一种方法可以解决这个问题。
为了演示，我设置了这些源文件的副本，并将它们保存在 Packt Publishing 网站上提供给你的代码包02文件夹下Exercise_Files文件夹中的Chapter_03文件夹下。 我只在代码中做了一个更改:在第 12 到 14 行中添加了一个条件语句if，确保my_integer等于555。 如果是这样，我将调用调试器简单地写debugger与分号结束行，如下面的截图所示:
现在呼叫debugger很简单。 index.html让我们加载文件再次与我们的调试器的代码,在这里,我们可以看到,没有设置一个断点,我们来源面板自动检测行并设置断点没有遍历每个循环(见下面的截图):
时间轴面板
在这里，我们将从以下几个方面来了解时间轴面板:
使用时间轴面板
Timeline面板允许我们检测整个网页的 JavaScript 性能; 它还允许我们检查浏览器呈现事件。 要使用Timeline面板，我们所需要做的就是点击记录按钮并在 Chrome 中重新加载页面。
在Timeline检查器中，Timeline面板显示了四种类型的事件。 这些是Loading，Scripting，Rendering，和Painting事件。 我已经加载了示例文件(02)，在前面的章节中讨论过，显示了事件通过Timeline面板运行，如下面的截图所示:
加载事件
Loading事件处理请求和响应; 通常情况下，这些是加载外部脚本和文件，以及POST请求数据离开页面。 加载事件还包括 HTML 代码的初始解析。 在谷歌 Chrome 的时间轴中，这些显示为蓝色。
脚本事件
当浏览器读取和解释 JavaScript 代码时，发生Scripting事件。 在Timeline面板中，您可以展开Scripting事件，查看在浏览器中接收函数的时间点。 脚本化事件在谷歌 Chrome 中显示为黄线。
渲染事件
当图像文件和脚本影响 DOM 时，渲染事件发生; 这可能是当一个图像加载时没有指定的大小在一个标签，或如果 JavaScript 文件更新的 CSS 页面加载后。
绘画活动
Painting事件是最后一种事件类型，通常用于更新 UI。 与Rendering事件不同，Painting事件发生在浏览器在屏幕上重绘图像时。 对于桌面 JavaScript 开发，绘制事件通常不是一个问题，但当我们开始着眼于移动 web 浏览器时，就变得非常重要。
通常情况下，当元素的显示从其原始内容更新时，会强制执行Painting事件。 它们也可以由元素的更新触发，例如元素的top或left定位。
配置面板
配置文件面板帮助开发人员分析网页的 CPU 配置文件，并获取使用的 JavaScript 的堆快照。 在检查大型复杂应用以查看哪些文件可能导致对象大小方面的问题时，CPU 概要快照很有帮助。
JavaScript 堆快照是在页面的全部 JavaScript 中找到的对象的编译列表。 这不仅包括我们自己编写的代码，还包括内置在浏览器中的代码，比如文档或控制台对象，给出应用中所有可能的对象的总体列表。
使用Profile面板类似于Timeline面板; 选择Take Heap Snapshot或Collect JavaScript CPU Profile选项，然后点击Start，然后重新加载页面。 在下面的截图中，我选择了Collect JavaScript CPU Profile选项:
资源面板
资源面板列出了在开发工具选项中浏览的与网页相关的所有文件，每个文件可以按文件类型排序; 开发人员可以单独查看每个文件。 它还显示页面上的图像及其信息，如维度，文件大小，MIME 类型，来源URL。
更重要的是,资源面板任何浏览器数据存储,其中包括 Web SQL,IndexedDB,本地存储,会话存储和【显示】饼干。 用户可以在浏览器的存储数据中查看页面的键-值对值。 这对于测试存储状态和在 JavaScript 代码中存储值很有帮助。
查看键值对很容易; 在资源面板中，选择存储类型并查看键值表，如下截图所示，使用 Packt Publishing 的网站查看本地存储:
审计小组
在这里，我们将通过以下几个方面来了解审计面板。
与审计小组互动
审计面板审计整个网页的应用网络利用率和整体网页性能; 这是浏览器提供的开发工具选项中更容易使用和更直接的面板之一。 使用审计面板也很容易。 首先，再次打开 package Publishing 网站，使用Developer tools选项选择auditing面板，然后检查select All选项; 这将测试网络速度和整体网页性能。 最后，一定要设置单选按钮重新加载页面和审计加载，然后点击运行按钮。 这将确保审计测试正确地检查网络使用情况，而不是缓存状态，如下面的截图所示:
获取 JavaScript 质量建议
如果我们只检查的 JavaScript 性能，取消网络利用率选项，并运行测试; 如果要测试应用中的某个特定点，我们需要记住这一点。 我们需要将单选按钮切换到Audit Present State，并点击Run以获取 web 应用当前状态的建议。 让我们在https://www.packtpub.com/上运行测试，然后选择Results下的文件。 让我们看看性能改进建议，如下面的截图所示:
如果我们仔细观察，我们可以看到非常可读的建议，关于我们页面的 JavaScript 代码，影响了整个页面的性能。 在这种情况下，审计检测到 3 个内联脚本，并建议移动内联脚本以提高性能。 还有关于页面中有多少 CSS 规则没有被使用的反馈(至少在这个页面上)。 它还告诉我们，是否在 CSS 中使用了供应商前缀，而不是 web 标准属性。 所有这些建议都非常有用。
控制台面板
最后一个开箱即用的面板是控制台面板。 这是这里最简单的面板，但它也是 JavaScript 开发人员花费大部分时间的地方。 现在我假设我们对控制台面板已经相当熟悉了，所以我不会深入讨论这个面板。 我们可以在控制台中测试代码，并在页面中搜索对象、DOM 元素和属性。 例如，假设我在 Packt Publishing 网站上的控制台输入以下内容:
document.body.classList
这将在下一行返回一个 JavaScript 数组，显示所有可用的类，它确实显示了一个以with-logo作为类名的类，如下面的截图所示:
Chrome 中的控制台面板和控制台API 在 Chrome 的开发工具功能方面不断发展。 跟上一些较新的工具,查看 Chrome 的 DevTools 控制台 API 页面可以在 https://developer.chrome.com/devtools/docs/console,这显示了如何使用定制的控制台输出,如console.table()和console.profile()在【病人】控制台开发更加容易。
小结
在本章中，我们探索了谷歌 Chrome 的消费版开发工具的基本面板; 这些工具中的许多都可以应用到其他检查人员和开发人员工具中(本章前面也介绍过)。 我鼓励你仔细阅读，看看代码是如何在其他检查器以及 Chrome 的开发者工具中检查的。
在下一章中，我们将在没有任何帮助的情况下学习 JavaScript 性能编码。****
版权属于：月萌API www.moonapi.com，转载请注明出处
