IT兄弟连 HTML5教程 HTML5的基本语法 如何选择开发工具

 

如何选择开发工具

有许多可以编辑网页的软件，事实上你不需要用任何专门的软件来建立HTML页面，你所需要的只是一个文本编辑器（或字处理器），如Office Word、记事本、写字板等。制作页面初学者通常都会选择一个集成开发环境（IDE），例如Dreamweaver，入门快、见效快，在不知不觉中已经完成了页面制作。但是随着学习的深入，你就会发现步入了一种窘境，因为过分的依赖IDE导致我们不清楚其实现的本质，知其然但不知其所以然。特别是页面出现BUG时，不用工具你便手足无措，更不用提如何进行页面优化以及完成一些更高级的应用了，所以越聪明的IDE越使我们忽略了华丽网页背后最本质的代码。这里笔者建议学习阶段最后还是选择简单的工具，例如vi或Notepad++之类的工具，只用一些基本的编辑功能，和能使开发语言中关键字高亮显示即可。这样就可以学习到开发语言的本质，对学习非常有帮助，但还是建议在实际开发中多使用功能齐全的IDE，毕竟能提高一定的开发效率。一些常在学习中使用的网页开发工具如图1所示。

图1  常见的网页开发工具

 

认识浏览器中的开发者工具

使用浏览器解析HTML代码，就像使用音乐播放器听歌曲，用视频播放器看电影一个原理。对于普通用户来说，使用浏览器就是浏览网页，只用到浏览器最基本的功能。而浏览器的厂商可不光为普通用户考虑，还专为开发者提供了很多调试页面的工具，对网页开发、升级、维护都非常有帮助。浏览器开发工具一直是Web开发者最得力的工具，它能够与Web浏览器和谐相处，允许我们在当前窗口中实时地操作页面元素、样式和前端程序，以及获取一些其他的有用信息。开发工具最大的特点就是很容易使用，但很多开发者们因为不了解则常常错过了它们所提供的大部分功能。当然浏览器的种类很多，浏览器内核也不统一，以前开发者使用Firefox的一个名叫Firebug的扩展，来开发和调试网站。但是现在，各个浏览器都开发了一套它们自己的工具，并且每一个都有自己的优势和劣势。如表1所示，列出常用浏览器和它的开发工具集。

 

表1　常用浏览器和它的开发者工具

 

   

 

如果没有这些方便的工具，构建一个网站真的十分困难。因为本书主要使用谷歌的Chrome作为演示浏览器，所以重点讲解Chrome中开发者工具的使用，如果你喜欢使用Firefox浏览器，可以下载安装Firebug工具插件。激活开发工具通常是按下“F12”键（Mac系统为Cmd + Option + I），或通过右键点击页面，选择弹出菜单中的“审查元素”，或者在Chrome的工具中找到，如图2所示：

图2  Chrome开发者工具的几种启动方式

 

打开的开发者工具就是如图3所示的样子，也可以通过鼠标拖拽进行放大和缩小的操作，或通过一些按钮改变位置，以及弹出作为一个独立的窗口存在，当然也可以关闭。

图3  Chrome开发者工具的样式

 

通过Chrome浏览器中的开发者工具可以查看、编辑页面上的元素，包括HTML和CSS，直接对工具中元素的HTML进行编辑，或者删除某个元素，所有的修改都会即时在页面上得到呈现，即修改即时生效。你还可以对某个元素进行监听，在JS对元素的属性或者HTML进行修改的时候，直接触发断点，跳转到对改元素进行修改的JS代码处。还可以点击左侧某一个具体去请求URL，可以看到该请求的详细HTTP请求情况，包括HTTP请求头、HTTP响应头、HTTP返回的内容等信息，对于开发、调试，都是很有用的。还有你可以打开Javascript控制台，做一些JavaScript代码的查看或者修改，除了查看错误信息、打印调试信息、写一些测试脚本以外，还可以当作Javascript API查看用。

 

Chrome除了简洁、快速，现在的Chrome的插件也非常的丰富。而对于web开发者来说，Chrome对于HTML5、CSS3等一些新标准的支持也是比较完善的，开发者工具非常好用，这就是为什么笔者向Web开发者推荐使用Chrome的原因。