Chrome 小技巧 -- 小米整理

一些小技巧希望能帮助到大家

调试Flex布局

还在为Flex布局弄晕头脑吗，Flex调试器前来拯救你。
效果如上图所示。
在Flex的元素上，点击display:flex;或者display:inline-flex;右边的按钮，即可打开该调试器。
温馨提示，该功能需要Chrome 90版本以上。

打印调试模式

在工作中，如果你有需要调试打印时的效果，这个技巧能帮助到你。

1. 首先打开控制台（win: F12 / Mac: Option+Command+I）
2. 打开命令模式（Win: Ctrl+Shift+P / Mac: Control+Shift+P）
3. 输入rendering 并回车打开面板
   
4. 找到 Emulate CSS media 组，在下拉中选中 print 选项
   
   到此，你就进入到的打印预览模式，在这个模式下，可以开心的调试打印后的样式，从此不在盲写打印样式。

调试Grid布局

同Flex调试器，触发条件为在Grid的元素上，点击display:grid;或者display:inline-grid;右边的按钮，即可打开该调试器。

截长图

1. 首先打开控制台（win: F12 / Mac: Option+Command+I）
2. 打开命令模式（Win: Ctrl+Shift+P / Mac: Control+Shift+P）
3. 输入Capture full size screenshot 并回车打开面板

如此页面长图就截图完成。PS：针对页面内滚动元素，效果并不太好。

字体调试器

1. 开启
   1. 点击开发者工具中的配置按钮 Setting
   2. 在Experiments 中 勾选 Enable new Font Editor tool within Styles Pan
2. 使用
   1. 在Style面板中，class的右下角 ，点击这个字体的按钮即可。

ps: 很方便的调整，字体，字号，线高，字重等待