基本开发、调试工具

展示图

** 开发工具**

制作页面需要开发工具。凡是任何可以编辑文本的工具，我们都可以用来开发页面。比如系统自带的记事本……

为了提高开发效率，我们会选择适合自己的开发工具。开发工具大概可以分为两类。

• 文本编辑器 ， 比如 Sublime Text 、Notepad++、EditPlus……
• IDE(集成开发环境) ，比如 WebStorm、IntelliJ IDEA、Eclipse……

两者相比，文本编辑器比较轻量级，相对于IDE，功能也比较简单。对于我们日常生活中的前端开发，文本编辑器就已经够用了。我在这里进行独裁专政，命令你们选用 Sublime Text 。下面我们就认识它。

之所以这么推崇它，是因为它给了我们价值。

• 跨平台、启动快；
• 多行选择方便操作；
• 安装很多插件提高开发效率；
• 可以新建Snippets，就是代码片段，可以省去Ctrl+C 和 Ctrl+V的操作。

重要插件只有一个：

• Package Control ，安装插件之前，需要先安装这个插件。通过它就可以添加、更新和卸载相应的插件。

** 调试工具**

你不需要安装任何软件，因为你肯定有浏览器，每个浏览器都自带了调试工具。我们主要以 chrome 浏览器为主要调试工具。

操作演示

• Elements 这个面板主要用来调试HTML/CSS
• Network 可以看到网站的所有网络请求
• Sources 汇集了网站的所有资源，比如CSS，图片Image……
• Console 类似一个命令行工具，可以直接写Js代码执行
• Resources 网站的本地数据资源，比如Cookies……
• 其余三个主要是用来调试页面的性能……

和我们页面制作相关的主要就是Elements，在这个面板我们可以对HTML/CSS进行增、删、改、查操作。其次是Source，在这个面板当中，我们可以进行Js代码的书写操作……

• 打开 Google Chrome；
• 用快捷键 Fn + F12 打开 开发人员面板；
• 选择 Source 标签；
• 在左侧边栏选择 Snippets 标签；
• 创建 .js 文件，比如，test.js；
• 在中间的代码书写区域编写代码；
• 使用 Ctrl+ Enter 执行代码……

操作演示

资料

• Chrome 调试器文档
• Sublime Text 官方网址 和 插件网址
• Firefox调试器文档，也可以用Firebug来调试
• 国外的一个Sublime Text的教学视频，有兴趣的可以看下。

下期预告：前后端分离开发【Puer】