作为一个前端小伙伴，对于chrome一定不会陌生的，Chrome是我最喜欢用的一个开发网页的工具，他有许多功能，接下来我将一一记录，希望自己了解的更多，也为初学前端开发的小伙伴指点一个方向，废话少说了，开始吧！

一、打开chrome开发者工具

• 在Chrome菜单中选择 更多工具 > 开发者工具
• 在页面元素上右键点击，选择 “检查”
• 使用 快捷键 Ctrl+Shift+I (Windows) 、 Cmd+Opt+I (Mac)、F12

二、开发者工具面板

面板.png

1.选择页面元素

点击选中这个按钮变为蓝色时，可以选中页面元素，查看元素代码

image.png

2.设备模式、模拟移动设备

使用设备模式构建完全响应式，移动优先的网络体验

image.png

接下来是面板的可操作项：

• 可以选择设备：iphone6/7/8、ipad等等
• 可以自定义设备的宽高
• 设备的显示比例
• 限制网络流量和 CPU 占用率

• 显示为横屏/竖屏

  
  
  image.png

3.元素面板

使用元素面板可以检查页面并自由的操作DOM和CSS来迭代布局和设计页面

image.png

4.控制面板

在开发期间，可以使用控制台面板记录诊断信息，或者使用它作为 shell在页面上与JavaScript交互。

image.png

image.png

image.png

5.源代码面板

在源代码面板中设置断点来调试 JavaScript ，或者通过Workspaces（工作区）连接本地文件来使用开发者工具的实时编辑器。

image.png

6.网络面板

使用网络面板了解请求和下载的资源文件并优化网页加载性能。

image.png

“网络”面板包含五个窗格：

1.控件。使用这些选项可以控制“ 网络”面板的外观和功能。
2.过滤器。使用这些选项可以控制在“ 请求表”中显示哪些资源。提示：按住Cmd（Mac）或Ctrl （Window / Linux），然后单击一个过滤器以同时选择多个过滤器。
3.概述。此图显示了何时检索资源的时间表。如果看到垂直堆叠的多个条，则意味着这些资源是同时检索的。
4.请求表。该表列出了检索到的每个资源。默认情况下，此表按时间顺序排序，最早的资源在顶部。单击资源名称会产生有关该资源的更多信息。提示：右键单击除“ 时间轴”以外的任何表头，以添加或删除信息列。
5.摘要。此窗格一目了然，告诉您请求总数，传输的数据量和加载时间。

image.png

7.性能面板

使用性能面板可以通过记录和查看网站生命周期内发生的各种事件来提高页面的运行时性能。

image.png

使用 Chrome DevTools 的 Performance 面板可以记录和分析您的应用在运行时的所有活动。 这里是开始调查应用中可觉察性能问题的最佳位置。

image.png

8.内存面板

如果需要比时间轴面板提供的更多信息，可以使用“memory”面板，例如跟踪内存泄漏。

image.png

9.应用面板

使用应用面板检查加载的所有资源，包括IndexedDB与Web SQL数据库，本地和会话存储，cookie，应用程序缓存，图像，字体和样式表。

image.png

10.安全面板

使用安全面板调试混合内容问题，证书问题等等。

image.png

希望学习更多的chrome知识，可以访问chrome开发者工具网站