JavaScript编程实战——1.3　开发工具

好的开发人员总是能用最好的工具完成工作。这些工具能加快开发进程，粉碎bug，并能提升程序的性能。本节会先介绍WebKit开发人员工具。对于这些工具，你可能多少有些了解，但我们会深入剖析，并探讨一些高级特性。接着我们会介绍Weinre，这是一个远程控制台工具，可以为任何平台提供一个WebKit开发人员工具，比如在移动设备或非WebKit浏览器上。最后我会强调使用版本控制和CSS预处理的重要性。 1.3.1　WebKit开发人员工具 在所有的开发人员工具包中，我个人最喜欢WebKit开发工具。Chrome和Safari等基于WebKit的浏览器中内置了这些工具。用这些工具调试JavaScript中的问题更容易，追踪性能问题也更简单，而且它们的好处还不止这些。 Chrome中默认安装了Chrome开发人员工具。可以通过Chrome菜单将它们调出来，或者在页面的任何元素上单击鼠标右键并选择审查元素。 如果你喜欢用Firefox开发，可以试试Firebug或内置的Firefox开发人员工具。 1. 断点 在WebKit开发人员工具中，Sources面板对JavaScript开发特别有用。我们可以用它在脚本中设置任意断点。脚本会在这些断点上暂停，然后我们就可以收集脚本当前运行情况的信息。打开Sources面板，在左侧的弹出菜单中选择一个脚本，如图1-3所示。 然后找你想分析的任何一行代码，点击左侧的行号设置一个断点。断点上就会出现一个蓝色旗标，如图1-4所示。 图1-3　首先选择你要分析的脚本 图1-4　已经在第21行设置了断点 最后让脚本运行。脚本一运行到断点就会暂停，浏览器窗口顶端就会出现Paused in debugger。这时候就能收集任何需要的信息了。在右边栏的Scope Variables部分会输出当前的变量。你也可以点击源码中的任何一个对象查看它的当前值，如图1-5所示。 做完数据分析之后，只需点击一下运行按钮，脚本就会继续执行，直到碰到下一个断点。 图1-5　脚本运行到断点时可以分析任何对象的当前值 对调试而言，设置断点的价值绝对不可估量，因为它可以随时暂停脚本。对于使用了计时函数，或其他在你有机会分析之前就会发生变化的特性的脚本，断点的设置尤其重要。 2. 查看表达式 除了设置断点，还可以在Sources面板中查看表达式。只要像图1-6那样，把表达式加到Watch Expressions栏上就行了。 图1-6　查看表达式的值；在此例中源码面板会跟踪slideshow.currSlide的值 你可以在查看表达式中输入任何表达式，某个特定的对象或自己定制的表达式都可以。处理观察点时，可以点击重载图标刷新所观察的值，也可以点击暂停按钮让脚本在任意一点上暂停。 3. DOM检查器 拜DOM检查器所赐，你可以在页面上点击任何元素以定位该元素在标记中的位置。它还会给出所有应用在那个元素上的CSS样式，如图1-7所示。 图1-7　DOM检查器给出了元素在DOM中的位置及其全部样式 要打开DOM检查器，只需在页面任意元素上单击鼠标右键并选择审查元素就可以了。 另外，你还可以用DOM检查器即时调整样式，修改已经应用的任一样式规则或添加新的样式。DOM检查器既可以帮你追踪繁琐的样式问题，也可以帮你在浏览器中直接试验新样式。 在较新版本的WebKit开发者工具中，也可以激活:hover和:focus这样的伪类。选择你要研究的元素，然后展开右边栏Styles区域中的伪类菜单（点击图1-8中所示的那个虚线矩形图标）。 图1-8　用DOM检查器还可以修改伪类 如果你用DOM检查器做内容的样式，一定要记得及时把工作保存到一个样式表中。否则一旦不小心重新加载了页面或浏览器突然崩溃的话，你就前功尽弃了。 4. Network面板 在Network面板中，可以追踪到每个所请求的资源发送到客户端所用的时间。它帮你把服务器延迟、下载时间和各种资源实例化的时间分解了，如图1-9所示。 图1-9　Network面板给出了下载各种资源所用的时间 Network面板提供了HTML、CSS、JavaScript和图片等资源的信息，你甚至可以根据请求的类型对这些信息进行过滤。在做程序的性能调优时，这些数据就是无价之宝。当你能拿到请求和响应的完整信息，包括头信息时，要找出响应慢的原因就比较容易。 如果你是在本地开发，网络面板中的响应时间就没什么价值。因为浏览器不需要从外部站点下载任何资源。在测试之前先把你的作品上传到工作服务器上。 5. 键盘快捷键 如果你跟我一样经常用开发人员工具，你应该希望能熟练使用一些键盘快捷键以提高效率。  要打开或关闭开发人员工具，在Mac中按Cmd-Option-I，或者在PC中按Ctrl+Shift+I。  要打开控制台，在Mac中按Cmd-Option-J，或者在PC中按Ctrl+Shift+J。  要锁定审查元素模式，在Mac中按Cmd-Shift-C，或者在PC中按Ctrl+Shift+C。 要学习更多的快捷键，请访问https://developers.google.com/chrome-developer-tools/docs/shortcuts。 1.3.2　Weinre 在Chrome和Safari中用WebKit开发人员工具处理问题感觉很好。可是，不管是要解决只出现在某个浏览器中的问题，还是要在移动终端上测试性能，你终究会遇到其他浏览器。 你可以在每个浏览器上安装不同的开发工具。但这些工具用起来都会有所差异，并且有些可能不太好用（比如移动端浏览器上的工具）。所以Weinre应运而生。Weinre是一个远程控制台，有了它，在任何浏览器或平台上都可以使用WebKit开发人员工具。对于移动开发来说尤为理想，因为它可以为所有设备提供一个完整、健壮的测试工具包。 1. 安装 Weinre 首先要在本地机器上装一个Node.js服务器。Node网站（http://nodejs.org/）上有关于如何安装Node的教程，你也可以按照第6章的指导进行安装。 然后用NPM安装Weinre。在命令行中输入下面的命令。 sudo npm -g install weinre 装完之后，在命令行中启动Weinre服务器。 weinre --boundHost -all- 最后还要把script标签加入到测试页面中，将其设置为调试目标。 <script src="http://1.2.3: 8080/target/target-script-min.js"></script> 请用你电脑上的Weinre服务器的真实地址换掉上面代码中的http://1.2.3:8080/。 设置好Weinre之后，只需在移动设备（或者桌面浏览器）上打开要测试的页面，然后在台式机上打开Chrome并访问http://localhost:8080/client。如果一切正常，你应该能看到两个绿色的IP地址，一个是远程目标的（移动设备），一个是远程客户端的（台式机），如图1-10所示。 图1-10　当目标和客户端IP都变绿后Weinre就连上了 2. 使用Weinre 装好Weinre后，用起来就很容易了。使用Chrome中的Weinre控制台，你就能得到本章前面介绍的所有WebKit开发人员工具。你可以用JavaScript控制台、DOM检查器、Sources面板、Network面板，等等，如图1-11所示。 图1-11　我在用Chrome中的Web检查器审查iPhone中的元素。注意看，它甚至对iPhone中的DOM元素做了高亮处理 请记住，使用Weinre得到的数据有些可能会有偏差。比如性能数据，因为设备在运行Weinre。另外Weinre数据也要通过网络传输，所以网络数据也会有偏差。这个问题确实没有办法解决，并且最好记住即便是原生工具也会出现这种问题。 1.3.3　版本控制 如果你开发时不用版本控制工具，那我就不用跟你强调它的重要性了。不过我在每个项目中都会用到，即便是只有我一个人做的微型项目。版本控制能追踪代码库随时间发生的变化。如果你能定期提交代码，就能回退到原来的任何一点上，甚至可以把某次提交中的修改合并到其他提交点上。如果要跟其他开发人员协作，版本控制更是必不可少。不要试图自己搞清楚谁改了哪个文件，让版本控制工具替你跟踪吧。 如果你和其他开发人员修改了同一个文件，版本控制工具可以将你们的改动合并到一起。但偶尔也会发生冲突，比如你们改了同一行代码。出现这种情况时，版本控制工具可以让你们手动合并。不过即便你是独自开发，我也会强烈建议你使用版本控制工具。使用版本控制工具之前，我总是会把当时不再使用的代码注释掉，怕我以后万一还要用。现在如果再有需要，我只要回退那些修改就行了，这样代码库比以前整洁多了。并且如果客户对功能的需求发生了变化，我只要用一行命令就能回退代码库。 在各种各样的版本控制系统中，我个人最喜欢Git。Git应用很广，在选择协作软件时这一点很重要。更重要的是，Git是分布式版本控制系统，不是集中式的。这种版本控制有几个优势。首先，这样每个用户都有自己的存储库，以后可以合并到主库（或其他库）中，因此提供了额外的版本层次。此外，它用起来更容易，因为你无需服务器就可以设置本地的分布式版本控制（可以以后再连到服务器上）。关于如何使用Git，有一本免费的电子书可以参阅——Pro Git（http://git-scm.com/book）。 1.3.4　CSS预处理 我不准备在本书中谈论太多CSS，但程序里肯定要用到样式，所以你真的应该使用CSS预处理器。借助SASS和LESS之类的CSS预处理器，你可以用更精巧的方式编写CSS。它们提供了大量的脚本操作，最终都能编译成静态CSS文件。也就是说，你既能借用动态脚本语言的力量，又能得到任何浏览器都可以识别的标准CSS文件。 在样式比较多的项目中用预处理器是个好主意，要了解CSS预处理的更多内容，请转至附录，我在那里对LESS做了更详细的介绍。 既然CSS预处理器能生成标准的CSS，你可以随时回到静态CSS中。