15个开发者必须知道的Chrome技巧

Google Chrome是最受欢迎的浏览器之一，尤其对于开发者而言更是如此。下面是15个Chrome技巧，可以极大提高开发者的工作效率和生产力：

1. 勾选"disable cache"

在开发阶段，为了避免缓存干扰，开发者通常需要刷新页面来看效果。打开控制台，选中"disable cache"，可以禁止掉浏览器的缓存。

2. 使用"Preserve log"

当开发者发现自己调试的页面跳转时，没有足够的时间快速检查新页面的请求和相应数据。"Preserve log"可以在跳转到新页面后继续记录控制台信息。

3. 使用复合选择器

复合选择器是指包含多个简单选择器的CSS选择器，使用它们可以用更精简的方式选择目标元素。

/* 在一个规则中使用ID和class选择器 */
#my-id.my-class {
  color: red;
}

4. 使用console.assert

console.assert允许开发者快速检查程序的状态，并在条件不满足时打印信息。

const x = 5;
console.assert(x === 10, "x不等于10");

5. 使用Chrome DevTools的隐藏功能

Chrome DevTools有许多隐藏的功能，比如source命令。在使用source命令时，我们可以更改JavaScript代码并立即查看更改的效果。

6. 使用Shortcuts

通过使用快捷键可以更快地完成许多操作，比如打开控制台、打开DevTools、刷新页面和调试JavaScript代码。

7. 借助 network throttling 加速调试

通过使用network throttling，开发者可以模拟慢速网络，帮助他们在较慢的连接下测试网站的速度和性能。可以在DevTools的Network选项卡中设置。

8. 使用代码片段

代码片段是开发者收集和记录代码的好方法。这是Chrome DevTools的一项隐藏功能。

9. 制作截图

通过使用DevTools的Elements选项卡中的"add user agent stylesheet"，开发者可以非常容易地创建网站截图。

10. 使用$0

$0是一个在控制台命令行中可用的变量，它代表页面上当前选中的DOM元素。可以使用$0直接在控制台中操作DOM元素，而不需要搜索和拖动。

11. 显示JavaScript 内存使用情况

使用Chrome DevTools的"Memory"选项卡可以检查JavaScript代码的内存使用情况，找出内存泄漏并解决。

12. Chrome DevTools 支持断点调试

使用断点调试功能可以检查JavaScript代码的特定部分并在运行时中断程序执行。可以在Sources选项卡中的行号上单击来设置断点。

13. 在line-height和height中使用相对单位

使用相对单位，如em和rem，可以让网站在不同的设备上更好地适应。

div {
  height: 2em;
  line-height: 1.5rem;
}

14. 使用异步JavaScript

使用异步JavaScript可以避免在加载时阻塞页面，并在网站中实现更好的用户体验。

fetch('https://example.com/data.json')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error));

15. 使用多个标签页

当你的工作需要同步多个浏览器窗口时，你可以使用多个标签页使其更容易管理。

以上是15个开发者必须知道的Chrome技巧的攻略，希望可以帮助到大家。