第十五章-开发环境

开发环境

• git
• 调试工具
• 抓包
• webpack babel
• linux 常用命令

git相关知识

关于git的安装与配置，可以参考git安装并与远程仓库关联相关配置

常用的 git 命令

命令	描述
git add .	添加修改或增加的文件
git checkout 文件名	撤销修改
git commit -m '提交内容的说明信息'	提交代码到本地仓库
git push origin master	提交到远程服务器
git pull origin master	从远程服务器拉取最新代码
git branch	查看分支
git checkout 分支名	切换分支
git checkout -b 分支名	新建分支并切换到该分支
git merge 分支	合并该分支
git log	查看git日志
git status	查看当前文件状态
git diff	查看修改的文件，按 q 可以退出查看

当多人同时修改一行代码时，会导致代码冲突，而vscode在编辑器中提供了代码冲突的快捷解决方案，可以使开发者快速解决冲突。

如果直接在master分支上修改而忘记切换到新分支该怎么做？

• 由于在master分支修改了代码，因此无法切换分支。
• 使用 git stash 命令，相当于是把修改过的代码放到另一个区域
• 然后就可以使用 git checkout 切换到新分支
• 在新分支上使用 git stash pop 将刚刚暂存的修改过的代码释放出来
• 然后新分支就可以正常使用 git add . git commit -m '提交代码' 提交代码了

使用 chrome 调试代码

一般面试不会考，但是前端工程师必备技能。

Elements： 展示DOM元素，调试css

Console： 控制台，调试 js 代码

Application： 查看和操作 cookie、localStorage、sessionStorage

Network： 资源的加载，包括文档、css、js、ajax加载等

source： 在文件中添加 debugger 相当于打断点，也可以在浏览器中打断点

移动端抓包

---------------实际用到在做总结

• 移动端 h5 页，查看网络请求，需要使用抓包工具
• window 一般用 fiddler
• Mac OS 一般用 charles

过程：

• 手机和电脑连接同一个局域网
• 将手机代理到电脑上
• 手机浏览网页，即可抓包

wbepack 和 babel

---------------一直在使用，后续了解

• ES6模块化，浏览器暂不支持
• ES6语法，浏览器并不完全支持
• 压缩代码，整合代码，以让网页加载更快

ES6模块化

--------------一直在用，但对其概念不是很清楚

export

import

常用的linux命令

• 线上机器一般都是linux系统
• 测试机也需要保持一致用linux
• 测试机或者线上机出了问题，本地又不能复现，需要去排查

命令	描述
ssh 用户名@ip地址	回车输入密码，登陆到 linux 系统
ls (-a)	查看(所有的)文件和文件夹
ll	以列表的形式查看文件和文件夹
clear	清屏
mkdir 文件夹名称	创建文件夹
rm -rf 文件夹名称	删除文件夹以及里面的所有内容
cd 目录名（文件）	切换到该目录下
mv index.html index1.html	修改 index.html 名字为 index1.html
mv index.html ../	移动 index.html 到上一级目录
cp a.js a1.js	将 a.js 拷贝为 a1.js
touch d.js	新建一个 d.js
vi d.js	新建一个 d.js 并且打开
cat 文件名	查看文件的所有内容

vi d.js 可以新建一个 d.js 并且打开，按键盘上的 i 可以进行编辑(左下角显示 INSERT)，编辑完成之后，点击左上角的 esc 键可以退出编辑模式，按 :w 表示保存（写入），按 :q 表示退出。vimtutor 有vim的使用教程