Chrome分享

作为浏览器的霸主Chrome，最近迎来了96版本，本次分享主要针对Chrome 96版本。

两个小技巧

标签页分组

右键添加标签页到分组，可以更容易找到对应的页面
阅读清单

对标签页右键添加到阅读清单

一些好用的插件

比chrome自带的下载器更棒

嗅探页

4. 插件管家/市场

油猴(Tampermonkey)

一些大神写的插件在插件市场中

比如说可以屏蔽掉一些广告热榜之类的，避免被吸引注意力😂，自己也可以写一些js脚本玩玩

5. 定制化新标签页

新开标签页快捷键：Command+T

infinity新标签页

可以方便的设置常用页面，支持自定义页面的图标，可以用qq登录，并且支持云同步所有书签。

设置壁纸

添加页面链接
掘金

可以看一些掘金的推送，有笔记功能，根据页面去对应的笔记。

目前我采用的是共存方案，在掘金新标签页的设置中如下设置，然后再安装infinity就可以了。

当你想看掘金推送的时候就在常用中左键点击即可

6. 前端调试工具

Vue/React/Redux

DevTools

首先是DevTools已经支持中文了。可以在设置中的Preferences的Language中切换。

导航栏

根据导航栏，主要分为以下几个模块 Elements, Console, Sources, Network, Performance, Application

Elements
- flex
- 追踪变更 tools>changes
  
  比如说你要改多个样式的时候，可以直接在changes里看，就不用来回切着看了。
- 标尺设置>preference>Show rules
  
  控制台设置中选中
  
  手机端还可以打开这个设置，两个刻度不同，前面的是每5一个刻度，这个rulers是每10一个刻度

Console

花里胡哨的输出

console.log('%c Oh my gods! ', 'background-image: linear-gradient(#FFCF02, #FF7352);background-clip: text;-webkit-background-clip: text;color:white;border-radius:5px;','more text');

如何方便的输出，可以用搜狗输入法的快捷短语，也可以在编译器里设置代码模板来快捷调用(更推荐)。

Source
- debug代码但是平时的话还是ide的更强大一些。
Network
- 模拟网速
- 最新版chrome96支持payload ，这样我们可以直接看到请求的路径和入参，不需要在Headers里下拉了
- 格式化Response 更方便快捷的查看返回的json的大体格式，而不需要再preview中依次打开层级
  
  使用前
  
  使用后
- 打开screenshot，可以看到网页加载页面的顺序截图
Performance
- 也可以看到页面加载的顺序截图，但是更详细
- Main指标 time.geekbang.org/column/arti…
Application
- 各种缓存