面试题 关于开发环境

关于开发环境

• 面试官想通过开发环境了解候选人的实际工作情况
• 开发环境的工具，能体现工作出得效率
• 会以聊天形式为主，不会问具体的问题

开发环境

Git基础

什么是版本管理

版本管理是一种记录文件变化的方式，以便将来查阅特定版本的文件内容。

人为维护文档版本的问题

文档数量多且命名不清晰导致文档版本混乱
每次编辑文档需要复制，不方便
多人同时编辑同一个文档，容易产生覆盖

Git 是什么

Git是一个版本管理控制系统（缩写VCS），它可以在任何时间点，将文档的状态作为更新记录保存起来，也可以在任何时间点，将更新记录恢复回来。

Git 安装

下载地址

Git 基本工作流程

git仓库	暂存区	工作目录
用于存放提交记录	临时存放被修改文件	被Git管理的项目目录

Git 使用前配置

在使用 git 前，需要告诉 git 你是谁，在向 git 仓库中提交时需要用到。

1.配置提交人姓名：git config --global user.name 提交人姓名
2.配置提交人姓名：git config --global user.email 提交人邮箱
3.查看git配置信息：git config --list （分别查看 git config user.name || git config user.email）

注意

1.如果要对配置信息进行修改，重复上述命令即可。
2.配置只需要执行一次。

提交步骤

1.git init 初始化git仓库 (mac中Command+Shift+. 可以显示隐藏文件)
2.git status 查看文件状态
3.git add 文件列表 追踪文件
4.git commit -m 提交信息 向仓库中提交代码
5.git log 查看提交记录

撤销

• 用暂存区中的文件覆盖工作目录中的文件： git checkout 文件名
• 将文件从暂存区中删除： git rm --cached 文件名
• 将 git 仓库中指定的更新记录恢复出来，并且覆盖暂存区和工作目录：git reset --hard commitID
  

分支

为了便于理解，大家暂时可以认为分支就是当前工作目录中代码的一份副本。
使用分支，可以让我们从开发主线上分离出来，以免影响开发主线。

分支细分

1.主分支（master）：第一次向 git 仓库中提交更新记录时自动产生的一个分支。

2.开发分支（develop）：作为开发的分支，基于 master 分支创建。

3.功能分支（feature）：作为开发具体功能的分支，基于开发分支创建

功能分支 -> 开发分支 -> 主分支

分支命令

• git branch 查看分支
• git branch 分支名称 创建分支
• git checkout 分支名称 切换分支
• git merge来源分支 合并分支 (备注：必须在master分支上才能合并develop分支)
• git branch -d分支名称 删除分支（分支被合并后才允许删除）（-D 强制删除）

暂时保存更改

在git中，可以暂时提取分支上所有的改动并存储，让开发人员得到一个干净的工作副本，临时转向其他工作。
使用场景：分支临时切换

• 存储临时改动：git stash
• 恢复改动：git stash pop

调试工具

调试是开发过程中必不可少的重要一环。调试工具是那些那些使我们能够监测、控制和纠正其他程序的程序，它们能帮我们快速找到问题的原因，最终达到提高开发效率的目的。本文将针对不同开发者推荐几个较受欢迎的程序调试利器，如果您还有其他更好的选择，欢迎在评论区留言，以供更多开发者学习和讨论。

GDB

官方网站:https://www.oschina.net/p/gdb

GDB（GNU symbolic debugger）是一个功能很强大的调试器，它可以调试多种语言。有一点要说明的是，GDB是一个调试器，而不象VC一样是一个集成环境。你可以使用一些前端工具如XXGDB，DDD等。他 们都有图形化界面，因此使用更方便。

Livepool

官方网站:https://www.oschina.net/p/livepool

LivePool 是一个基于 NodeJS，类似 Fiddler 支持抓包和本地替换的 Web 开发调试工具，是 Tencent AlloyTeam 在开发实践过程总结出的一套的便捷的 WorkFlow 以及调试方案。

AlloyLever

官方网站:https://www.oschina.net/p/alloylever

AlloyLever是腾讯AlloyTeam团队开源的一款Web 开发调试工具。其功能主要有：

1: Console会输出所有的错误信息(脚本错误和网络请求错误)
2: Console会输出所有用户打印的日志如console.[log/error/info/debug/debug]
3: XHR面板会输出所有（XMLHttpRequest）AJAX请求和服务器端返回的数据
4: Resouces面板会输出所有的Cookie信息和LocalStorage
5: TimeLime面板会输出页面相关的生命周期里的时间段耗时情况

CmBacktrace

官方网站:www.oschina.net/p/cmbacktrace

CmBacktrace （Cortex Microcontroller Backtrace）是一款针对 ARM Cortex-M 系列 MCU 的错误代码自动追踪、定位，错误原因自动分析的开源库。

vConsole

官方网站:https://www.oschina.net/p/vconsole

vConsole是一款由微信公众平台前端团队打造的前端调试面板，专治手机端看log难题。

目前vConsole自带有2个面板，默认为“日志”面板，负责展示log，与电脑端的Developer Tools一样，开发者可以通过调用不同的方法来打出不同的颜色，以便快速区分日志类型；第二个是“系统”面板，vConsole会自动将一些基础信息（如系统版本）打印出来，方便开发者定位问题。

Postman

官方网站:https://www.oschina.net/p/postman

Postman 是一个 Chrome 扩展，提供功能强大的 Web API & HTTP 请求调试。它能够发送任何类型的HTTP 请求 (GET, HEAD, POST, PUT…)，附带任何数量的参数+ headers。

抓包

wireshark是非常流行的网络封包分析软件，功能十分强大。可以截取各种网络封包，显示网络封包的详细信息。使用wireshark的人必须了解网络协议，否则就看不懂wireshark了。

为了安全考虑，wireshark只能查看封包，而不能修改封包的内容，或者发送封包。

wireshark能获取HTTP，也能获取HTTPS，但是不能解密HTTPS，所以wireshark看不懂HTTPS中的内容，总结，如果是处理HTTP,HTTPS 还是用Fiddler, 其他协议比如TCP,UDP 就用wireshark.

wireshark 开始抓包

开始界面

wireshark是捕获机器上的某一块网卡的网络包，当你的机器上有多块网卡的时候，你需要选择一个网卡。

点击Caputre->Interfaces… 出现下面对话框，选择正确的网卡。然后点击"Start"按钮, 开始抓包

Wireshark 窗口介绍

WireShark 主要分为这几个界面

1. Display Filter(显示过滤器)， 用于过滤

2. Packet List Pane(封包列表)， 显示捕获到的封包， 有源地址和目标地址，端口号。 颜色不同，代表

3. Packet Details Pane(封包详细信息), 显示封包中的字段

4. Dissector Pane(16进制数据)

5. Miscellanous(地址栏，杂项)

第 2 页 Wireshark 显示过滤

使用过滤是非常重要的， 初学者使用wireshark时，将会得到大量的冗余信息，在几千甚至几万条记录中，以至于很难找到自己需要的部分。搞得晕头转向。

过滤器会帮助我们在大量的数据中迅速找到我们需要的信息。

过滤器有两种，

一种是显示过滤器，就是主界面上那个，用来在捕获的记录中找到所需要的记录

一种是捕获过滤器，用来过滤捕获的封包，以免捕获太多的记录。 在Capture -> Capture Filters 中设置

保存过滤

在Filter栏上，填好Filter的表达式后，点击Save按钮， 取个名字。比如"Filter 102",

Filter栏上就多了个"Filter 102" 的按钮。

过滤表达式的规则

表达式规则

1. 协议过滤

比如TCP，只显示TCP协议。

2. IP 过滤

比如 ip.src ==192.168.1.102 显示源地址为192.168.1.102，

ip.dst==192.168.1.102, 目标地址为192.168.1.102

tcp.port ==80, 端口为80的

tcp.srcport == 80, 只显示TCP协议的愿端口为80的。

4. Http模式过滤

http.request.method==“GET”, 只显示HTTP GET方法的。

5. 逻辑运算符为 AND/ OR

常用的过滤表达式

过滤表达式	用途
http	只查看HTTP协议的记录
ip.src 192.168.1.102 or ip.dst192.168.1.102	源地址或者目标地址是192.168.1.102

封包列表(Packet List Pane)

封包列表的面板中显示，编号，时间戳，源地址，目标地址，协议，长度，以及封包信息。 你可以看到不同的协议用了不同的颜色显示。

你也可以修改这些显示颜色的规则， View ->Coloring Rules.

webpack babel

当我们在webpack中使用babel的时候，首先要安装babel-core，这是babel编译库的核心包。
如果某些代码需要调用Babel的API进行转码，就要使用babel-core模块。

npm install babel-core --save-dev

之后，webpack中对js文件，我们要进行编译，就需要配置，在webpack中，你需要用到babel-loader帮你来使用babel

npm install babel-loader --save-dev

所以webpack.config.js中，你要写好下面的代码：

rules: [
  {
    test: /\.js$/,
    use: {
      loader: 'babel-loader'
    },
    exclude: '/node_modules/'
  }
]

然后我们要理解preset这个概念，也就是在babel编译之前，babel需要知道你的编译规则，到底是以什么样的规范去编译。

比如说，我需要按照es6标准编译，那么你就安装一个 babel-preset-es2015， 同样，如果你要按照es7来编译，那么你就安装babel-preset-es2016:

npm install babel-preset-es2016 --save-dev

一般来说，如果你想用最新的规范做编译，直接安装babel-preset-env就可以了，它包含了 babel-preset-es2015, babel-preset-es2016, and babel-preset-es2017，等价于babel-preset-latest（已废弃），可以编译所有最新规范中的代码：

npm install babel-preset-env --save-dev

有了编译规则之后，我们继续来配置webpack，在babel-loader中我们可以新增配置参数：

rules: [
  {
    test: /\.js$/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['env']  // 也可以写成presets:['babel-preset-env']
      }
    },
    exclude: '/node_modules/'
  }
]

到这一步，打包的时候，babel就会自动按照最新语法规范，对我们的代码进行编译了。

那么问题来了，我们要把我们的代码编译称什么样子呢？如果是一个只要求兼容chrome浏览器的项目，chrome对很多es6语法支持的很好，所以不用做很多编译，代码就可以在chrome下运行了。如果我的项目要兼容到很低的浏览器版本，那么肯定要把es6，7，8的语法编译成es4或者es5的语法。到底编译到什么程度，我们可以通过preset的配置项继续设置：

rules: [
  {
    test: /\.js$/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: [
            ['babel-preset-env', {
                targets: {
                    browser: ['> 1%']
                }
            }]
        ],
      }
    },
    exclude: '/node_modules/'
  }
]

在presets里面，我们对babel-preset-env增加了一个配置项叫做browser，值是>1%，它的意思是，让babel做编译的时候，编译出来的语法支持所有市场占有率超过1%的浏览器。或者你可以写成这样：

rules: [
  {
    test: /\.js$/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: [
            ['babel-preset-env', {
                targets: {
                    browser: ['chrome']
                }
            }]
        ],
      }
    },
    exclude: '/node_modules/'
  }
]

把参数变成chrome，那么打包出的代码，只能保证在chrome上运行正常，其他浏览器能不能跑就不好说了，因为你配置的打包程度就是兼容chrome即可。

这部分的配置参数很灵活，大家可以参考官方文档继续调整：Env preset · Babel

那么接下来我们继续说babel-polyfill是个什么东东。babel官网上写了很明确一句话，babel只负责对语法进行编译。当我们写箭头函数，babel会帮你把它编译成普通函数，这没有任何问题，但是，比如说我们代码里使用了promise，babel打包出来的代码其实还是promise，在低版本浏览器里，promise并不支持，但是babel并不会帮你处理，因为这不是语法编译层面需要做的事情。不转换新的API包括，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象。

于是，如果我们要让打包出来的代码能兼容低版本浏览器，还要考虑到promise，Set这样的新语法低版本浏览器不兼容的问题，这时候babel-polyfill就出场了。你只需要全局安装一下babel-polyfill：

npm install --save-dev babel-polyfill

然后在项目中使用一下它，你的代码就不存在刚才提到的兼容性问题了。

import 'babel-polyfill'

但是，直接用babel-polyfill会有一些坑，第一个坑是污染全局环境，比如说低版本浏览器没有Set，但是babel-polyfill会在全局变量里加一个Set。再一个问题是，会造成代码冗余，举个例子，多个模块用到Promise，每个模块里都有可能独立存在一个对Promise做兼容性的代码。所以，使用babel-polyfill可以解决兼容性问题，但并不是最佳方案，于是，出现了babel-plugin-transform-runtime，使用这个插件，就可以解决上面的问题了。

npm install --save-dev babel-plugin-transform-runtime
npm install --save babel-runtime

先安装插件，然后再安装babel-runtime, 之后，我们改一下配置

rules: [
  {
    test: /\.js$/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: [
            ['babel-preset-env', {
                targets: {
                    browser: ['> 1%']
                }
            }]
        ],
        plugins:['transform-runtime']
      }
    },
    exclude: '/node_modules/'
  }
]

增加一个plugin的配置，好了到此，整个babel的配置差不多了。最后我们可以在工程目录下创建一个.babelrc文件，把关于babel的配置放进去：

{
  presets: [['babel-preset-env', {
    targets: {
      browser: ['> 1%', 'last 2 versions']
    }
  }]],
  plugins:['transform-runtime']
}

然后，webpack.config.js 可以精简为：

rules: [
  {
    test: /\.js$/,
    use: {
      loader: 'babel-loader'
    },
    exclude: '/node_modules/'
  }
]

补充几点，

一般来说，在自己写框架或者库的时候，使用babel-plugin-transform-runtime是个很好的选择，主要是不污染环境。而如果自己写项目，不使用它，使用babel-polyfill会更简单一些。

还有就是transform-runtime不能完全替代babel-polyfill。transform不支持实例方法，例如，代码：[1, 2, 3].includes(3)，Array，Object以及其他”实例”下es6的方法，因为babel-runtime只支持static方法。

另外，babel-polyfill和babel-plugin-transform-runtime是独立的，两者没有依赖关系，不要两个一起安装，没意义。

linux 常用命令

查看硬件信息相关命令

ifconfig free fdisk ethtool mii-tool dmidecode dmesg lspci

其它（19个）

echo printf rpm yum watch alias unalias date clear history eject time nohup nc xargs exec export unset type

系统性能监视高级命令(12个)

uptime top free vmstat mpstat iostat sar chkconfig

内存:

top free vmstat mpstat iostat sar

CPU:

top vmstat mpstat iostat sar

I/O:

vmstat mpstat iostat sar

进程:

ipcs ipcrm lsof strace lstrace

负载:

uptime mount umount df du fsck dd dumpe2fs dump