1.3　浏览器安装和代码环境的准备

本节介绍如何安装浏览器以及准备代码环境。

1.3.1　安装Chrome

作为一本技术研发类的书籍，本书中有很多的代码讲解和演示，建议读者编写并运行这些代码，这样有助于对相关知识点的理解和掌握。

要运行本书中的代码，推荐使用的浏览器为谷歌Chrome，版本为79，如果无法找到指定版本，则尽量使用版本号大于70的版本。

本书中的相关演示代码都是以.html文件的形式承载的，一般情况下双击这些文件即可在浏览器中运行它们，但是也会有一些文件必须通过静态服务器的方式来运行，即采用访问http://localhost/xxx.html的方式来运行，所以读者可以在本地系统安装一个静态资源服务器，推荐使用基于Node.js的轻量级Web服务器——http-server。

1.3.2　安装Node.js和http-server

使用http-server需要安装Node.js。由于本书的演示代码运行和后面的实战项目开发都需要用到Node.js，因此安装Node.js非常必要。Node.js安装起来非常简单，这里我们只讲解Windows平台下的安装步骤。

到Node.js官网下载安装包，Node.js官网地址：https://nodejs.org/zh-cn/download/。

选择长期支持版，并根据自己计算机系统是32位还是64位选择Windows安装包（.msi）文件，如图1-3所示。

下载完成后，双击安装包node-v12.13.1-x64.msi（注意，随着时间的推移，读者下载的最新版安装包可能会比本书中使用的版本要新），进入安装界面，如图1-4所示。

在安装界面中依次单击Next按钮，安装位置可自由选择，如图1-5所示。

图1-3　下载Node.js的Windows安装包

图1-4　Node.js安装（1）

图1-5　Node.js安装（2）

最后单击Finish按钮完成安装，如图1-6所示。

图1-6　完成安装

若要检测Node.js是否安装成功，可以使用CMD命令行工具，在Windows桌面上依次单击“开始→运行”命令，再输入CMD命令来启动这个工具。然后在“命令提示符”窗口输入node -v命令来查看Node.js版本号，如图1-7所示。

如果控制台成功地输出了Node.js的版本号，就表示安装成功。

在完成了Node.js的安装之后，就可以使用它自带的包管理工具NPM来安装http-server了。http-server是一个简单的、零配置的http服务，它的功能强大且使用非常简单，可以用于测试、开发和运行静态页面的服务器。

图1-7　查看Node.js的版本号

启动CMD命令行工具，使用包管理工具NPM安装http-server，输入命令如下：

    npm install spy-debugger -g

安装完成之后，打开CMD命令行工具，进入文件所在的目录，执行http-server命令即可开启本地的http服务，如图1-8所示。

图1-8　运行http-server开启本地的http服务

在浏览器地址栏输入http://127.0.0.1:8081/xx.html或者http://localhost:8081/xx.html即可访问对应的页面。

关于NPM包管理工具的使用会在“第7章　移动Web开发和调试”中具体讲解。

1.3.3　选择合适的代码编辑器

由于本书中有很多的演示代码，因此提前准备一款合适的代码编辑器是很有必要的，关于代码编辑器的选择，完全可以根据个人的喜好来定，在这里笔者介绍几种比较常用的前端代码编辑器。

·　Visual Studio Code：简称VS Code，它是目前使用人数最多的代码编辑器，在2015年由微软发布，是一款比较年轻的代码编辑器，它的功能强大并且支持插件扩展，但占用内存相对较多，适合有一定前端基础的开发人员使用。

·　Sublime Text：目前最新版本是Sublime Text 3，它的界面美观，体积小，运行起来非常快，也不会占用大量内存，在功能上稍逊色VS Code，但同样支持插件扩展，适合新手使用。

·　WebStorm：功能强大，集成度高，想要的功能几乎都有，被誉为最智能的JavaScript代码编辑器，但体积大，占内存多，并且是一款收费的软件，相对于前面两款代码编辑器，因为增加了使用成本，所以使用人数相对少一些。

·　Dreamweaver：中文名称为“梦想编织者”，是老牌子了，伴随前端而生，见证了前端的发展，内置浏览器可以实时预览是这款代码编辑器的一大特色，但其他的功能已经相对落后，现在使用的人并不多，本书不推荐使用。

在本书的实战项目中，会使用Sublime Text 3代码编辑器来编写代码。