使用Chrome DevTools，我们可以立即在代码中看到修改的效果
Chrome DevTools是 谷歌浏览器内置的一组网站创建和调试工具。 当然，我们也可以使用它们 在其开源版本中； 铬。
可以通过按Ctrl + Shift + I组合键来访问开发人员的Chrome工具，也可以将鼠标悬停在元素上并右键单击Inspect。
组件
当我们打开Chrome DevTools时，我们看到您出现了我们正在浏览的页面右侧的n面板。 就此而言，此面板e它分为与每个工具相对应的选项卡。 反过来，这些工具又分为几个部分。
这些部分是：
- 元素：显示页面的不同组件。
- 控制台：使您可以像在Linux终端上一样在开发过程中运行诊断或与Javascript代码进行交互。
- 来源：使调试Javascript代码和使用本地文件变得容易。
- 网络：帮助监视和改善页面性能。
- 时间轴：允许记录和浏览在访问网站期间发生的不同事件。
- 应用程序：调查所有已加载的资源； 其中包括IndexedDB或Web SQL数据库，本地和会话存储，cookie，应用程序缓存，图像，字体和样式表。
- 安全性：检测代码中的安全性问题。
让我们看看我们可以将Chrome DevTools用于
解决不起作用的问题
它发生在每个开发人员身上。 编写代码，确认没有错误，但实际上，页面无法正常工作。 控制台工具 显示执行时发生的错误。
减少加载时间
如果页面加载时间很长，则用户会感到厌倦并转到另一个站点。 幸运的是，Flash网站及其动画介绍的时代已经结束。 无论如何，Chrome DevTools的“网络”标签 可以更轻松地发现哪些元素在延迟负载。 我们可以针对不同的连接速度重复测试。
修改代码
在“元素”标签中，我们可以 查看页面的元素，相关的html代码和CSS属性。 我们也可以更改它们。
我们可以使用以下命令编辑页面的文本
document.designMode = 'on';
尝试不同的屏幕尺寸
平板电脑，智能手机，智能电视，台式计算机。 我们上网冲浪的设备列表正在增长。 借助Chrome DevTools，我们可以 测试页面在不同尺寸下是否看起来不错。
标杆测试
在管理中，基准测试一词意味着向与我们一样的人学习最佳实践。 使用Chrome DevTolls，如果我们喜欢网站的设计，我们可以 查看html代码和CSS样式表，然后将其复制到我们的网站。
获取Chrome DevTools
Chrome DevTools可在Google Chrome浏览器和Chromium浏览器上使用。 铬在主要分布的储存库中。 也可以从以下商店安装 捕捉。 至于谷歌浏览器，您可以 过来。 以DEB和RPM格式