展示图
** 开发工具**
制作页面需要开发工具。凡是任何可以编辑文本的工具，我们都可以用来开发页面。比如系统自带的记事本……
为了提高开发效率，我们会选择适合自己的开发工具。开发工具大概可以分为两类。
- 文本编辑器 ， 比如 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 执行代码……
操作演示
资料
下期预告：前后端分离开发【Puer】
