打造前端MAC工作站（八）配置称手的 chrome 和 safari 浏览器

傷城~ 2022-07-14 15:46 221阅读 0赞

# 打造前端MAC工作站（八）配置称手的 chrome 和 safari 浏览器 #

## 前言 ##

前端工程师绝大部分的工作成果都是需要在浏览器中查看的。当然，浏览器更是我们学习和娱乐的重要窗口，因此，选择和配置一款好用的浏览器，那是必须的。

如果不是考虑在移动办公省电的原因，我想大家都会选择 `chrome` 浏览器作为主力浏览器。不过它比较费电，建议在插上电源的时候使用。如果移动办公，建议使用 `safari` 浏览器，比较省电。

除此之外，当然还有 `firefox` 火狐浏览器，有很多人喜欢用它的控制台的。 `opera` 浏览器自动换了 `webkit` 核心，基本就和 `chrome` 浏览器一致了。除非是情怀，否则我个人认为没必要安装这款浏览器。

如果是 `windows` 重度用户，可能更喜欢国产浏览器。在MAC上国产浏览器相对较少，不过腾讯`QQ`浏览器有MAC版本。如果你喜欢国产浏览器，可以使用它。相对来说，还是比较人性化的。

## 安装和配置 chrome 浏览器 ##

首先，去官方网站下载浏览器进行安装。

网址：[https://www.google.com/chrome/browser/desktop/index.html][https_www.google.com_chrome_browser_desktop_index.html]

不过需要注意的是，需要科学上网才能访问谷歌网站。如何科学上网我只能给一个提示 `ShadowsocksX` 。更多内容请使用 `bing.com` 搜索引擎搜索，这里使用百度是无解滴！

安装浏览器后，我们需要简单的进行一些配置和插件的安装。

首先，建议你在浏览器中登录你的谷歌账户，登录账户后，可以在不同的电脑之间同步你的插件，收藏夹，以及其他内容，跨电脑工作不再是问题

### 让 chrome 支持显示小于 12px 的汉字 ###

> `⌘ + ,` 是技术所有软件的设置面板的快捷按键。MAC一个很大的优势就是快捷键的统一。

按 `⌘ + ,` 打开浏览器设置页面，滚动到设置页面最下方，点击**显示高级设置…**，就可以出现更多的设置选项了。

在这里，我们找到**网络内容 → 字号**，点击后面的 **自定义字体**，将会弹出下面的对话框

![这里写图片描述][SouthEast]

在对话框中，我们把最下面的**最小字号**拉倒最左面，点击完成，即完成了我们的配置。

### 安装一些插件 ###

首先，我们按 `⌘ + ,` 打开设置页面，点击右上方的**扩展程序**，如果你有安装插件的话，那么这里将会显示你的插件列表。如果没有安装的话，我们点击**获取更多扩展程序**打开谷歌的`chrome`扩展程序商城。

然后就可以在里面搜索和安装各种插件或者皮肤了。我推荐安装下面的几款插件

**vimium**

让浏览器操作脱离鼠标的牛逼插件，提高效率必备，黑客必备，装逼必备。

![这里写图片描述][SouthEast 1]

安装好插件后，在任意网页，按下 `f` 键，即可出现如上图的黄色背景的字母，按顺序录入字母，即可打开对应的链接。非常的高效。

当然，这款`vimium`的功能可不仅仅是这么一个。你在任意页面可以按 `shift + ?` 打开帮助页面，

最常用的分别是 `d`,`u`,`f`这三个，更多内容自己研究。

**Adblock Plus**

屏蔽绝大多数网站的绝大多数广告必备插件。

![这里写图片描述][SouthEast 2]

**小黄瓜视频广告拦截**

可以屏蔽优酷，iqiyi，等主流视频网站的广告，虽然MAC客户端中全是免广告的，但不排除我们使用浏览器访问视频网站，所以这个插件也是颇有用处的。

**The QR Code Extension**

将当前网址生成二维码，便于我们在制作页面的过程中用手机来测试页面，直接扫码即可，推荐安装。

**划词翻译**

翻译插件，英文不好者，必备。

**Vue.js devtools**

VUE开发必备插件。继承与控制台中，方便好用。

> chrome 插件万万千千，选择太多那就有选择恐惧症了。建议大家在不断的配置中找到自己所需要的那几款钟情的插件。

### 用 chrome 调试安卓手机页面 ###

将你的安卓手机打开开发者调试模式，然后用数据线连接MAC的USB接口。

打开谷歌浏览器，在地址栏输入`chrome://inspect/`，即可看到你的安卓手机了。

在手机上用浏览器打开任何页面，其控制台均可在 `chrome` 浏览器中调试。

测试移动端必须掌握的 `chrome` 技能。

## 配置 safari 浏览器 ##

`safari` 是一款极佳的浏览器。可惜 `windows` 上的版本太挫了。不过在MAC上，其实它是非常棒的。如果不是习惯使然，用 `safari` 作为主力浏览器也并无不可。

### 开启开发者模式 ###

按`⌘ + ,` 打开设置面板，切换到**高级**选项卡，勾选**在菜单中显示“开发”菜单**，然后在最上面的菜单栏里面就有了**开发**菜单

在开发下面，我们可以完成很多的操作。

### 用 safari 调试 iphone 手机页面 ###

手上没有`iphone`的数据线，暂时先不放图了。把`iphone`插上数据线，连接上`MAC`，就可以在`safari`的开发中找到`iphone`手机，手机上用`safari`打开网页，便可在`MAC`上进行各种调试了。

### 安装 vimme 插件 ###

类似于 `chrome` 下面的 `vimium` 插件，不过没有它好用。聊胜于无。

其它的插件我都没有安装。不过你依然可以在 `https://safari-extensions.apple.com` 页面寻找你喜欢的插件。

我个人建议是，如果不作为主力浏览器，就没必要折腾了。

## 小结 ##

本文主要讲了`chrome`和`safari`浏览器的简单配置，其他浏览器大概其差不多也是这个意思。

顺手的浏览器可以让我们的工作效率更高。另外，`mac`下面是没有IE浏览器的。因此，如果你没有`windows`的电脑，测试IE就必须使用虚拟机了。

本文由FungLeo原创，允许转载，但转载必须附注首发链接。谢谢。

[https_www.google.com_chrome_browser_desktop_index.html]: https://www.google.com/chrome/browser/desktop/index.html
[SouthEast]: /images/20220709/962e0b1b947e4be28dde3026dfabd739.png
[SouthEast 1]: /images/20220709/234875413b5a4466a8a97ba43b7617b0.png
[SouthEast 2]: /images/20220709/9174f26cfb1a40ef9e025d49905aeedb.png