如何选择开发工具

有许多可以编辑网页的软件,事实上你不需要用任何专门的软件来建立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的原因。

IT兄弟连 HTML5教程 HTML5的基本语法 如何选择开发工具的更多相关文章

  1. Xamarin.Forms教程下载安装Windows版的Xamarin开发工具

    Xamarin.Forms教程下载安装Windows版的Xamarin开发工具 下载安装Windows版的Xamarin开发工具 本节将讲解如何下载并安装Windows版的Xamarin开发工具. 下 ...

  2. IT兄弟连 HTML5教程 HTML5的基本语法 了解Web

    HTML也是计算机编程语言,但由于功能简单易用,不涉及业务逻辑,算是编程语言中最简单的了.其实学习HTML这门语言,就是在学习一个个HTML标记的使用,标记的名称和使用不是自定义的,它的功能及用法是已 ...

  3. IT兄弟连 HTML5教程 HTML5的学习线路图 第一阶段学习网页制作

    学习HTML5技术可并不是简单学会几个新增的标签而已,HTML5现在可以说是前端所有技术的代名词.需要学习的语言和工具不仅多,对于刚接触他们的新人会感觉很乱.另外,前端开发也会细分很多个开发岗位,不同 ...

  4. IT兄弟连 HTML5教程 HTML5和JavaScript的关系

    JavaScript可是实现HTML5重要语言.长久以来,JavaScript一直都是在HTML中实现动态效果的不二之选,而JavaScript在一些程序员眼里都是编程语言中的二等公民.早先,它经常是 ...

  5. IT兄弟连 HTML5教程 HTML5的基本语法 小结及习题

    小结 一个完整的HTML文件由标题.段落.列表.表格.文本,即嵌入的各种对象所组成,这些逻辑上统一的对象称为元素.HTML文档主体结构分为两部分,一部分是定义文档类型,另一部分则是定义文档主体的结构框 ...

  6. IT兄弟连 HTML5教程 HTML语言的语法 1

    HTML是文本类型的语言,和其他任何一门语言相比,语法都是最简单的.但在编写HTML文件时,必须遵循HTML的语法规则.一个完整的HTML文件由标题.段落.列表.表格.文本,即嵌入的各种对象所组成,这 ...

  7. IT兄弟连 HTML5教程 HTML5的基本语法 简单HTML实例制作

    现在学习HTML5的方式 目前HTML还处于HTML4与HTML5之间的过渡使用阶段.移动端的Web界面开发已经全面使用HTML5的技术,而在PC端由于用户升级浏览器周期较长,面临着页面的兼容性问题, ...

  8. IT兄弟连 HTML5教程 HTML语言的语法 2

    HTML颜色值的设置 大多数浏览器都支持颜色名集合,颜色值是一个关键字或一个RGB格式的数字,在网页中用得很多.仅仅有16种颜色名被W3C的HTML 4.0标准所支持,它们是:aqua.black.b ...

  9. IT兄弟连 HTML5教程 HTML5的基本语法 了解HTML及运行原理

    了解HTML HTML(HyperText Marked Language)即超文本标记语言,是一种用来制作超文本文档的简单标记语言.我们在浏览网页时看到的一些丰富的影像.文字.图片等内容都是通过HT ...

随机推荐

  1. mysql 8.0 忘记root密码后重置

    最近状态很不好,一直晕晕晕晕晕晕乎乎的,一个测试实例,下班前修改了一下root的密码,接着就下班走人,第二天来发现root密码忘了 刚好自动化安装脚本整理好了,本来想着算了直接重装实例得了,简单省事也 ...

  2. centos7在线yum安装mysql时官方镜像下载过慢的解决方案

    帮客户调试数据库,搭建一测试环境,centos7最小化安装后,在线安装mysql. 步骤: 1. wget -i http://dev.mysql.com/get/mysql57-community- ...

  3. 数据治理的王者——Apache Atlas

    一.Atlas是什么? 在当今大数据的应用越来越广泛的情况下,数据治理一直是企业面临的巨大问题. 大部分公司只是单纯的对数据进行了处理,而数据的血缘,分类等等却很难实现,市场上也急需要一个专注于数据治 ...

  4. Linux系统学习 十六、VSFTP服务—本地用户访问—基本用户基础配置

    缺点,ftp密码是和系统密码是一致的,并不安全 先设置两个测试用户 test1      123123 test2      123123 基本用户基础配置 1.本地用户基本配置 local_enab ...

  5. CCPC 2019 秦皇岛 Angle Beats

    题目 给出P个点,然后给出Q个询问,问从P中选出两个点和给的点能组成直角三角形的方法个数.-O2,时间限制5秒. \[2\leqslant P\leqslant 2000,\qquad 1\leqsl ...

  6. gitlab-CI作业-yml

    stages: - build - deploy before_script: - echo "Restore NuGet Packages..." - echo "do ...

  7. vue-router之前端路由的学习总结

    什么是路由 路由就是通过互联网把信息从源地址传输到目的地的活动 --维基百科 举例路由器: 路由器提供了两种机制:路由和转送 路由是决定数据包从来源到目的地的路径 转送将输入端的数据转移到合适的输出端 ...

  8. 【第二章】Zabbix3.4监控SQLServer数据库和H3C交换机思科Cisco防火墙交换机教程笔记

    监控SQLServer数据库 SSMS执行相关SQL SQL模板命名规则 Zabbix客户端导入模板 添加SQLServer监控图形 SQLServer服务器关联模板 监控思科Cisco防火墙交换机 ...

  9. 【docker构建】基于docker构建wordpress博客网站平台

    WordPress是使用PHP语言开发的博客平台,用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站.也可以把 WordPress当作一个内容管理系统(CMS)来使用. WordPre ...

  10. Java学习笔记之面向对象、static关键字

    一周Java学习总结 今天就总结理清一下关于面向对象和面向过程的程序设计的一些不同特点,以及讲下static关键字. 面向对象 现在接触的Java是面向对象的,现在的程序开发几乎都是以面向对象为基础的 ...