JavaScript交互式网页设计（微课版）
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

1.3.4 浏览器中的开发者工具

浏览器中的开发者工具是为专业的Web应用和网站开发人员提供的工具，可以帮助开发人员对网页进行布局、帮助前端工程师更好地调试脚本，还可以用来查看网页加载过程、获取网页请求（这个过程也叫抓包）等。总之，浏览器中的开发者工具是进行JavaScript脚本编程必不可少的强大工具。下面以Chrome浏览器为例，介绍开发者工具的常用功能及使用方法。

1.启动开发者工具

在打开的Chrome浏览器中，按Ctrl+Shift+I组合键或F12键，或者在浏览器窗口中右击，然后从弹出的快捷菜单中选择“检查”命令，即可打开开发者工具面板，如图1-4所示。

图1-4 Chrome浏览器的开发者工具面板

2.认识开发者工具的选项卡及其功能

在开发者工具面板中，可通过单击标签进行选项卡的切换。在JavaScript开发中，开发者工具常用的选项卡及其功能如表1-1所示。

表1-1 开发者工具常用的选项卡及其功能

3.查看HTML或CSS的元素——Elements选项卡

在Elements选项卡中，主要查看实时的DOM树，查看和编辑页面元素及元素属性。例如，选择页面中某个元素，然后在右侧的Style面板中就可以查看选中元素使用的样式。在编辑元素和样式时，浏览器会实时显示结果，这大大方便了元素和样式的调整。

4.调试脚本——Sources选项卡

在Sources选项卡中，单击代码左侧的行号即可设置断点，再次单击可删除断点。右击断点，在弹出的快捷菜单中选择“Edit breakpoint”命令，可以给断点添加中断条件。断点是指在运行中让脚本暂停或者显示停止的点。调试的基础便是使用断点中断脚本并查看这个断点处的脚本状态。

在设置完断点后，单击执行按钮，就会以行为单位执行代码。当JavaScript代码运行到断点处时会中断（添加了中断条件的断点在符合条件时中断），可以将鼠标指针移至变量上，此时在Watch面板中就可以查看变量的状态。在Sources选项卡中，有继续执行、单步跳过、单步进入、单步跳出等按钮，其功能及快捷键如表1-2所示。

表1-2 代码执行相关按钮的功能及快捷键

当在Sources选项卡中编辑文件时，单击选项卡中状态栏上的“{}”，可以将代码格式化为换行缩进的易于阅读的代码。选中一个字符或字符串，按Ctrl+D组合键，当前选中内容的下一个与之匹配的字符或字符串也会被选中，有利于同时对它们进行编辑。

说明：也可使用debugger语句调用可用的调试功能。

5.查看信息和操作对象——Console选项卡

Console选项卡主要提供查看错误信息、日志和以交互方式运行代码的功能。在Console选项卡中输入JavaScript表达式后按Enter键，即可得到表达式的值。在Console选项卡中输入命令时，会弹出相应的智能提示框，可以按Tab键帮助补全当前未输入完的代码。

Console选项卡支持使用某些变量和函数来选择DOM元素。选择元素的方法如表1-3所示。

表1-3 选择元素的方法

常用的输出信息的方法如表1-4所示。

表1-4 输出信息的方法

参数说明如下。

●支持printf()的占位符格式，支持的占位符有字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）。例如：console.log("%d年%d月%d日",2011,3,26)。

查看对象的所有属性和方法可以使用console.dir()方法，直接将它们输出到控制台。例如，console.dir(window)可以查看window对象的所有属性和方法。

在Chrome浏览器的开发者工具中，可以使用copy()函数将在控制台获取到的内容复制到剪贴板，然后使用Ctrl+V组合键或粘贴命令，粘贴复制的内容。

【训练1-5】在Console选项卡中输入代码实现变量的复制。

打开浏览器，启动开发者工具，选择Console选项卡，输入以下代码。

let x={name:'frank',age:20,run:function(){return 1}};
copy(x);

结果为：{name:'frank',age:20}。

说明：结果返回的只是JavaScript对象的属性部分，也就是说JavaScript对象的方法部分不会被复制到剪贴板中。

Web应用越来越重要，JavaScript的性能也日益受到重视，掌握性能测试的相关知识，对优化代码很有帮助。

跟踪代码执行消耗的时间，使用console.time()和console.timeEnd()两个方法来实现。console.time()方法是计算的起始方法，一般用于计算程序执行的时长。console.timeEnd()方法为计算的结束方法，将程序的执行时长显示在控制台。

【训练1-6】跟踪代码执行消耗的时间，代码如下。代码清单为code1-6.html。

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8">
    <title>跟踪代码执行消耗的时间</title>
</head>
<body>
    <script>
         console.time();
         let arr = new Array(10000);
         for (let i = 0; i < arr.length; i++) {
               arr[i] = new Object();
         }
         console.timeEnd();  //default: 0.705078125 ms（因运行环境不同，时间可
能不一样）
    </script>
</body>
</html>
上一章目录下一章