原文：

1 科学的上网

学习前端过程中，最基本和经常的操作就是：搜索和检查。

1.1 搜索

1.1.1 工具：Chrome 浏览器

官网、或百度搜索安装。

1.1.2 让 Chrome 浏览器可以登录国外网站（特别重要的一步）

1.2 检查

后边无论学 HTML、CSS、JS 还是 Ajax 等，这个检查的动作都是最经常用到的动作。

1. 在浏览器中的任何网页上，鼠标右键，然后弹出的选项中选择“检查”；

2. 会出现我们本页面的相关代码——DOM 树（Document Object Model 文档对象模型）；

我们通过 JS 操作页面的元素，进行添加、移动、改变或移除的方法和属性，都是 DOM 提供的。

3. 通过点击代码框左上角图标，可以实时查看网页内任意模块对应的代码（鼠标放在任意地方，代码框里就会显示与之对应的代码）；

4. 按建盘上 Esc 键，或直接点击代码框的 Console，就可以打开 Console ；

作用：用于调试 JS 的；比如：有一个样式没有出来，那么代码框与之对应的代码会报错，可以让我们知道错在哪里。2 Git 的安装

Git 中文使用文档——作为参考手册，需要时翻翻（）

2.1 安装方式

谷歌搜索安装（点击 DOWNLOAD 后，直接下一步）——注：macOS 系统在安装了 Xcode 后会自带 Git 。

2.2 注意事项

针对 windows 用户，Git 最好直接安装在 C 盘。因为 windows下这些软件总会出现些莫名的小问题，直接安装在 C 盘会支持的相对好一些。

2.3 安装完成

安装完成后，里边会相应附带有 Git Bash 。可以打开 Git Bash 客户端（苹果电脑用户打开自有终端），初次使用需要输入相关命令行（先照做，后边文章会具体谈到）：

git config --global user.name xxx →方便产品经理找你（xxx 是输入我们自己的用户名）git config --global user.email yyy →方便产品经理找你（yyy 是输入你的邮箱）git config --global push.default simplegit config --global core.quotepath false →防止文件名变成数字git config --global core.editor "vim" →使用 vim 编辑提交信息

2.4 外观设置

（针对 windows 用户）设置一下 Git Bash 客户端的外观。

2.4.1 将操作界面设置成透明，方便操作、观察变化

2.4.2 将界面滚动条设置在右侧

2.4.3 设置编码方式

3 Node.js安装

3.1 安装方式

谷歌搜索安装（点击 DOWNLOAD 后，直接下一步）；

3.2 注意事项

针对 windows 用户，Node.js 最好直接安装在 C 盘。因为 windows 下这些软件总会出现些莫名的小问题，直接安装在 C 盘会支持的相对好一些。

3.3 安装完成

装了 Node.js 之后我们就可以在 Git Bash 里面使用 node 和 npm 这两个命令了（下载安装 Node.js 后，其附带了 npm），打开 Git Bash 试试看：

3.3.1 查看 node 和 npm 在电脑的哪个位置

which nodewhich npm

3.3.2 查看 node 和 npm 的版本号

node -vnpm -v或node --versionnpm --version

3.3.3 试着用 npm 做一个命令行的翻译工具（这个小工具的名字叫做 fanyi）

npm i -g fanyi

3.3.4 加载完成后，输入

fanyi hello

相关中文解释就会出来，还会给你发音。

⚠️注意：

如果遇到以下“权限问题”：

请如下操作：（参考：处理 npm 权限问题——）

3.3.5 试着用 node 做个算数

node

回车后便进入了 node 运行环境，这时候我们就可以用 node 写 JS 了：

1+2

4 编辑器的安装

4.1 安装方式

谷歌搜索安装（点击 DOWNLOAD 后，直接下一步）。

4.2 编辑器的选择

推荐 Sublime Text 和 VC 。

4.3 Emmet 语法

针对代码编辑器，会引入一个名词： Emmet 语法 。目前所有的前端编辑器都支持 Emmet 。提高代码录入效率。