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

6ed7388f9b3743eba139db0a1a73a377.jpg

 

如何选择开发工具

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

039a3bdfc97e49ebb0039444034c68e3.png

图1  常见的网页开发工具

 

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

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

 

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

 

ae83151838ed4c9aa41e20c3b17fa2ec.png

   

 

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

2611d776c1224f9ea0646089e095ee85.jpg

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

 

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

e6f202f292dc4dcaa27f7dc996f110e2.png

图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的原因。

posted on 2019-09-23 08:50  老码农的一亩三分地  阅读(...)  评论(...编辑  收藏

导航