荣顶 - 个人博客打造舒适的前端调试体验
经常使用 Chrome 调试，但是有些功能一直没有用到，这里记录一下。
Chrome 多版本兼容性测试
当我们需要通过旧版 Chrome 用以兼容性测试时，往往需要运行多个版本的 Chrome，但是实际不管在 Mac 还是 Windows 上，我们正常只能安装一个 Chrome，而且只能是最新版的，所以可能需要通过虚拟机或者覆盖本机的 Chrome 才可以使用旧版的，这里分享一种更实用且方便的方法。
下载历史版本的 Chrome
Chrome 浏览器主要包括 Stable 正式版、Beta 测试版、DEV 开发版、Canary 金丝雀版以及鼻祖 Chromium 版 。
从稳定性方面: Stable > Beta > DEV > Canary > Chromium
更新的速度: Chromium > Canary > DEV > Beta > Stable。
https://www.chromium.org/getting-involved/dev-channel/
官方的：
第三方：
我一般用这个：
历史版本 Firefox:
在 Mac 上运行不同版本的 Chrome
一般直接打开下载后的低版本 chrome，查看版本信息，会发现还是最新的。
为了不影响现有的 chrome，避免了来回删除、可以使用命令行的方式运行不同版本的 chrome。
# 以 81 版本为例
# windows
open -n /Applications/Google\ Chrome\ 81.app/ --args --disable-web-security --user-data-dir=/Users/xxx/Downloads/chrome81
# mac
/Applications/Chrome81.app/Contents/MacOS/Google\ Chrome --user-data-dir=$HOME/chrome-profile --chrome-version=81.0.4044.92
/Applications/Chrome81.app/Contents/MacOS/Google\ Chrome --chrome-version=81.0.4044.92
/Applications/Google\ Chrome\ 2.app/Contents/MacOS/Google\ Chrome --chrome-version=68.0.3440.106
# /Applications/Google\ Chrome\ 2.app/Contents/MacOS/Google\ Chrome --user-data-dir=$HOME/chrome-profile --chrome-version=68.0.3440.106
# /Applications/Google\ Chrome\ 2.app/Contents/MacOS/Google\ Chrome —-user-data-dir="/Users/wangrongding/Library/Application Support/Google/Chrome2" --chrome-version=68.0.3440.106
/Applications/Google\ Chrome\ 2.app/Contents/MacOS/Google\ Chrome —-user-data-dir="$HOME/Library/Application Support/Google/Chrome2" --chrome-version=68.0.3440.106
/Applications/Google\ Chrome\ 3.app/Contents/MacOS/Google\ Chrome —-user-data-dir="$HOME/Library/Application Support/Google/Chrome3" --chrome-version=65.0.3325.181
# 如果遇到开发者权限的问题，可以使用
sudo xattr -rd com.apple.quarantine 你的应用程序路径（把应用拖进终端就可以）/Applications/Chrome81.app/Contents/MacOS/Google\ Chrome指定要打开的应用程序在系统中的位置，可以把 Chrome 拖到终端里查看路径--user-data-dir=%HOME/chrome-profile指定用户数据存放的路径--chrome-version=81.0.4044.92指定 Chrome 版本
效果：
使用后的副作用：(需要重新验证，一些网站的登录态会被全部清空)
限制 Chrome 的使用内存
sudo open /Applications/Google\ Chrome.app --args --js-flags="--max_old_space_size=512"chrome args : https://peter.sh/experiments/chromium-command-line-switches/
Chrome DevTools
Snippets
添加 Snippets：
运行 Snippets
在 Snippets 面板中运行或者直接用 cmd + p 通过 ！ 快速运行
浏览器中的自动化测试
Recorder 是一个 Chrome 新出的 devtool，可以录制用户在浏览器中的操作，然后生成代码，可以用于自动化测试。
控制台
自定义 console 格式化输出：
好用的 console 方法：
- console.dir：打印对象的属性
- console.table：打印对象的属性
- console.trace 方法：打印当前调用栈
- 控制台中的 source map
- 生成 sourcemap
- ignore script files
实时表达式
network initiator
查看整个请求的调用栈
source
代理
- 使用 Charles 创建本地代理服务器
- 使用 whistle 代理工具
- 安装 SwitchyOmega 插件，配置代理