使用 Chrome DevTools 调试和编辑网页
Google Chrome 开发者工具，也称为 Chrome DevTools，是内置于 Google Chrome 中的高级网络创作和调试工具。开发人员可以使用这些综合工具来迭代、调试和分析您的网站，而无需退出 Chrome 的环境。 DevTools 还可以让您跟踪布局问题、深入了解代码优化并建立 JavaScript 断点。
使用 Chrome DevTools
要使用 Google Chrome 开发者工具，您只需使用 Google Chrome 打开一个页面。从“Chrome 菜单”中，选择“工具”，然后选择“开发者工具”。您还可以右键单击页面元素并选择“检查元素”。您还可以通过在基于 Windows 的设备上选择 ctl+shift+i 或在 Mac 上选择 cmnd+opt+i 来使用键盘。 DevTools 分组在浏览器窗口顶部的工具栏中。然后，您可以在几组工具下使用特定类型的页面或应用程序信息，包括元素、配置文件、控制台、资源、网络、时间线、审计和来源。每个工具都可以让您轻松解决问题、提高网络性能并获取有关需要采取哪些措施来改进您的站点的信息。它们还可以让您通过不同的屏幕尺寸和分辨率查看您的尺寸。
解决问题和改进网站的绝佳工具
Google Chrome 开发者工具让您无需单独的工具即可编辑网页。它拥有使用单个 DOM 树进行检查和编辑的出色功能。 JavaScript 控制台还允许您记录诊断信息并使用 shell 提示来测试页面和应用程序。强大的调试工具还有助于发现和修复 JavaScript 问题，而网络和审计工具可以为您提供有关资源的实时数据，以找出请求耗时较长的原因并了解如何改进响应。
