前端工具的高效用法

Whistle 官网

• Whistle 官网：https://wproxy.org/whistle/

• Whistle 的 GitHub：https://github.com/avwo/whistle

Whistle 安装启动

1、Whistle 安装

（1）通过 npm 安装 Whistle

2、启动 whistle

w2 start

然后在浏览器输入http://127.0.0.1:8899/ 即可打开代理配置的页面。

3、配置代理

chrome浏览器配置代理：

可参考官方文档。

Firefox浏览器配置代理：

4、安装证书并添加信任：

证书下载后，双击安装，安装目录选择“登录”这个tab。安装完成后，记得执行 w2 restart重启 whistle。

手机设置代理

连接好指定的wifi后，点击那个wifi里的设置，将「代理」那一项，设置为手动，然后输入ip（电脑上的ip）、端口号（8899）。然后就可以通过电脑上的whistle工具，查看手机的网页请求。

注意，要保证手机和电脑在同一个网络下。

另外，还需要在手机的浏览器，地址栏输入rootca.pro，给手机安装证书。

捕获和拦截https请求

whistle安装证书后，可以拦截 https 请求。但是，我现在又不想拦截https请求了，该怎么卸载证书呢？

我发现，证书无法卸载，正确的操作是：

上图中，把红框部分，去掉勾选，就不捕获https了。谢谢azh童鞋。

参考链接：

• Android 手机如何设置http代理？

• 使用 Whistle 对 iOS HTTPS 进行抓包

移动端调试神器:eruda

手机连接代理时，如何看console.log的日志信息?

现在，代码里有console.log，如果是在电脑浏览器上看，可以直接在控制台查看console.log的内容。但是，如果手机连接代理，在手机上打开网页的话，要怎么查看console.log的内容呢？具体做法如下：

（1）在 whistle中，新建一个名叫Eruda H5的代理，代理中的内容是：

http://xxx.com htmlAppend://{eruda.html}

(2)新建一个values，里面的内容是：

<script src="//cdn.bootcss.com/eruda/1.4.3/eruda.min.js"></script>
<script>
    eruda.init()
</script>

然后就OK了。

解决 Git 不区分大小写导致的文件冲突问题

有些同学在 Git 仓库对文件/文件夹进行命名时，刚开始是小写，后来为了保持团队一致，又改成了大写，然而 Git 不会发现大小写的变化，此时就出了问题：导致仓库里出现了 大小写 同时存在的两个文件。但在 Windows、Mac 的电脑磁盘里，肉眼却能只看到一个文件，实在奇葩。

这个问题的根本原因是，Windows、Mac 的文件系统不区分大小写。

Linux的文件系统是区分大小写的。Git 默认是不区分大小写的，也可以通过改配置项，改为区分大小写。

问题复现路径

（1）新建一个 test 文件(大小写不敏感的状态下)，并提交。

（2）本地修改 test 变为 Test，文件内容无变更，无法提交。

（3）执行 git config core.ignorecase false，设 置Git的规则为 区分大小写（大小写敏感），然后 git push 提交，查看结果，此时远程仓库会存在 大小写 同时存在的文件，但本地仓库却只看到其中一个文件。

（4）甚至可能出现这种异常情况：本地暂存区的文件，怎么删也删不掉。再之后，从 test 尝试改为 Test 时，提示命名冲突。

错误的解决办法

git mv test Test

执行上面的命令时，会报错：fatal: renaming 'Test' failed: Invalid argument

正确的解决办法

# 将本地的 test、Test 目录都删掉，并生成一个新的目录 Temp
git mv Test Temp

# 将 Temp 目录改成 Test 目录。此时，项目中只会存在 Test 目录，不会存在 test 目录。目标达成。
git mv Temp Test

关于 是否区分大小写 的补充说明

我们知道：针对文件/文件夹，Windows 系统和 Mac 系统是不区分大小写的；Linux 系统是区分大小写的；Git 默认是不区分大小写的，也可以通过改配置项，改为区分大小写。

不分区大小写，也有它的好处，比如：文件夹/文件的路径，很多时候就代表了网站地址、页面url的路径。而网站地址也是不区分大小写的，这是很关键的原因之一。

总的来说，根本原因是文件系统、url在底层设计上不区分大小写。磁盘路径、页面地址，本质上都是 url 。

关于 Git是否区分大小写 的补充

前面讲到，Git 默认是不区分大小写的，可以通过命令git config --get core.ignorecase查到，默认值是 true。

我们也可以修改 Git 的这一配置项，改为区分大小写，配置命令为git config core.ignorecase false。

但我建议你保留 Git 的默认配置项，不要随意自行修改，避免产生其他的麻烦。

三、高端访问：命令面板的使用

Mac 用户按住快捷键 Cmd+Shift+P （Windows 用户按住快捷键Ctrl+Shift+P），可以打开快速命令面板。效果如下：

命令面板的作用是希望解放开发者的鼠标，让一些操作和配置可以直接通过键盘进行。如果让开发者记住所有的配置项在菜单的哪个位置是不现实的，而且有些命令并不在菜单中。

有了命令面板之后，如果你需要修改一些设置项，或者进行一些快捷操作，则可以通过「命令面板」来操作，效率会更高。接下来列举一些。

1、VS Code 设置为中文语言

Mac 用户按住快捷键 Cmd+Shift+P （Windows 用户按住快捷键Ctrl+Shift+P），打开命令面板。

在命令面板中，输入Configure Display Language，选择Install additional languages，然后安装插件Chinese (Simplified) Language Pack for Visual Studio Code即可。

或者，我们可以直接安装插件Chinese (Simplified) Language Pack for Visual Studio Code，是一样的。

安装完成后，重启 VS Code。

2、设置字体大小

在命令面板输入“字体”，可以进行字体的设置，效果如下：

当然，你也可以在菜单栏，选择「首选项-设置-常用设置」，在这个设置项里修改字体大小。

3、快捷键设置

在命令面板输入“快捷键”，就可以进入快捷键的设置。

4、大小写转换

选中文本后，在命令面板中输入transfrom，就可以修改文本的大小写了。

5、使用命令行启动 VS Code

（1）输入快捷键「Cmd + Shift + P 」，选择install code command：

（2）使用命令行：

• code命令：启动 VS Code 软件
• code pathName/fileName命令：通过 VS Code 软件打开指定目录/指定文件。

备注：这种方法快捷简单，但是在电脑重启之后就失效了。稍后在第五段，我会介绍更常见的方法。

6、修改特定编程语言的设置项

输入快捷键「Cmd + Shift + P 」打开命令面板，然后输入并执行 Configure Language Specific Settings即可。