ReaderMX.
谷歌开发者

Web 开发指向标 | Chrome 开发者工具学习资源 (一)

谷Chrome约 6 分钟
Image

Chrome 开发者工具是一套 Web 开发者工具，直接内置于 Google Chrome 浏览器中，帮助您即时修改页面和快速诊断问题，让您能够更快地构建更好的网站。我们将推出一系列指南文章介绍 Chrome 开发者工具，为 Web 开发者提供从入门到实践的学习资源。本文是系列文章的第一篇，欢迎您持续关注 Chrome 开发者工具标签下的更多文章。

  • Chrome 开发者工具

    https://developer.chrome.google.cn/docs/devtools/ai-assistance?hl=zh-cn

  • Google Chrome

    https://www.google.com/chrome/?hl=zh-cn

本视频实时演示了开发者工具的核心工作流，包括调试 CSS、设计 CSS 原型、调试 JavaScript 和分析加载性能。您可以观看视频了解详情。

打开开发者工具

想快速打开开发者工具？Chrome 提供了多种便捷方式，您可以根据自己的需求，直接进入不同的部分:

  • 如需使用 DOM 或 CSS，请在页面上右键点击，然后选择 "检查" 以跳转到 Elements 面板。或者按 Command+Option+C (Mac) 或 Ctrl+Shift+C (Windows、Linux、ChromeOS)。

  • 若要查看记录的消息或运行 JavaScript，请按 Command+Option+J (Mac) 或 Ctrl+Shift+J (Windows、Linux、ChromeOS) 直接跳转到控制台面板。

开始使用

如果您是经验丰富的 Web 开发者，不妨从以下几方面入手，了解开发者工具如何提高工作效率:

  • 查看和更改 DOM:

    https://developer.chrome.google.cn/docs/devtools/dom?hl=zh-cn

  • 查看和更改 CSS:

    https://developer.chrome.google.cn/docs/devtools/css?hl=zh-cn

  • 调试 JavaScript:

    https://developer.chrome.google.cn/docs/devtools/javascript?hl=zh-cn

  • 在控制台中查看消息并运行 JavaScript:

    https://developer.chrome.google.cn/docs/devtools/console?hl=zh-cn

  • 优化网站速度:

    https://developer.chrome.google.cn/docs/devtools/speed/get-started?hl=zh-cn

  • 检查网络活动:

    https://developer.chrome.google.cn/docs/devtools/network?hl=zh-cn

探索开发者工具

开发者工具界面标签页很多，可能会让您感觉无从下手。不过如果您愿意花些时间熟悉每个标签页，了解其各自功能，就可能会发现开发者工具可以大幅提高您的工作效率。

注意: 在开发者工具文档中，顶层标签页称为面板。

设备模式

模拟移动设备。

Image

  • 设备模式: Chrome 开发者工具中一系列功能的统称，可帮助您模拟移动设备。

    https://developer.chrome.google.cn/docs/devtools/device-mode?hl=zh-cn

  • 模拟设备传感器: 使用传感器面板可模拟任何设备的传感器输入。

    https://developer.chrome.google.cn/docs/devtools/sensors?hl=zh-cn

元素面板

查看和更改 DOM 和 CSS。

Image

  • 开始查看和更改 DOM:

    https://developer.chrome.google.cn/docs/devtools/dom?hl=zh-cn

  • 开始查看和更改 CSS:

    https://developer.chrome.google.cn/docs/devtools/css?hl=zh-cn

  • 修改 CSS:

    https://developer.chrome.google.cn/docs/devtools/css/reference?hl=zh-cn#change

  • 修改 DOM:

    https://developer.chrome.google.cn/docs/devtools/dom?hl=zh-cn#edit

  • 查找无效、被替换、无效和其他 CSS 的 CSS:

    https://developer.chrome.google.cn/docs/devtools/css/issues?hl=zh-cn

  • 发掘潜在的 CSS 改进:

    https://developer.chrome.google.cn/docs/devtools/css-overview?hl=zh-cn

  • 模拟浅色/深色主题、对比度和其他 CSS 媒体功能:

    https://developer.chrome.google.cn/docs/devtools/rendering?hl=zh-cn

  • 查找未使用的 CSS:

    https://developer.chrome.google.cn/docs/devtools/coverage?hl=zh-cn

  • 检查动画:

    https://developer.chrome.google.cn/docs/devtools/css/animations?hl=zh-cn

控制台面板

通过控制台查看消息并运行 JavaScript。

Image

  • 开始使用控制台:

    https://developer.chrome.google.cn/docs/devtools/console?hl=zh-cn

  • 控制台实用程序 API 参考文档: Console Utilities API 包含一组便捷函数，用于执行选择和检查 DOM 元素、查询对象、以可读格式显示数据、停止和启动性能分析器、监控 DOM 事件和函数调用等常见任务。

    https://developer.chrome.google.cn/docs/devtools/console/utilities?hl=zh-cn

  • Console API 参考文档: 使用 Console API 从 JavaScript 向控制台写入消息。

    https://developer.chrome.google.cn/docs/devtools/console/api?hl=zh-cn

"来源" 面板

Image

调试 JavaScript，在页面重新加载时保留在开发者工具中所做的更改，保存和运行 JavaScript 代码段，并将在开发者工具中所做的更改保存到本地源代码中。

  • 开始调试 JavaScript:

    https://developer.chrome.google.cn/docs/devtools/javascript?hl=zh-cn

  • 使用断点暂停代码:

    https://developer.chrome.google.cn/docs/devtools/javascript/breakpoints?hl=zh-cn

  • 在工作区中编辑和保存文件:

    https://developer.chrome.google.cn/docs/devtools/workspaces?hl=zh-cn

  • 运行 JavaScript 代码段:

    https://developer.chrome.google.cn/docs/devtools/javascript/snippets?hl=zh-cn

  • JavaScript 调试参考文档:

    https://developer.chrome.google.cn/docs/devtools/javascript/reference?hl=zh-cn

  • 在本地替换 Web 内容和 HTTP 响应标头:

    https://developer.chrome.google.cn/docs/devtools/overrides?hl=zh-cn

"网络" 面板

查看和调试网络活动。

Image

  • 检查网络活动:

    https://developer.chrome.google.cn/docs/devtools/network?hl=zh-cn

  • 网络功能参考:

    https://developer.chrome.google.cn/docs/devtools/network/reference?hl=zh-cn

  • 查看网页资源:

    https://developer.chrome.google.cn/docs/devtools/resources?hl=zh-cn

"记录器" 面板

录制、重放和衡量用户流。

Image

  • 录制、重放和衡量用户流:

    https://developer.chrome.google.cn/docs/devtools/recorder?hl=zh-cn

  • 使用扩展程序自定义 "记录器" 应用:

    https://developer.chrome.google.cn/docs/devtools/recorder/extensions?hl=zh-cn

  • 记录器功能参考:

    https://developer.chrome.google.cn/docs/devtools/recorder/reference?hl=zh-cn

性能面板

找到提高加载和运行时性能的方法。

Image

  • 优化网站速度:

    https://developer.chrome.google.cn/docs/devtools/speed/get-started?hl=zh-cn

  • 分析运行时性能:

    https://developer.chrome.google.cn/docs/devtools/evaluate-performance?hl=zh-cn

  • 性能功能参考:

    https://developer.chrome.google.cn/docs/devtools/evaluate-performance/reference?hl=zh-cn

"内存" 面板

查找并修复影响页面性能的内存问题，例如内存泄漏。

Image

  • 解决内存问题:

    https://developer.chrome.google.cn/docs/devtools/memory-problems?hl=zh-cn

应用面板

Image

检查已加载的所有资源，包括 IndexedDB 或 Web SQL 数据库、本地和会话存储、Cookie、应用缓存、图片、字体和样式表。

  • 调试渐进式 Web 应用: 使用应用面板检查、修改和调试 Web 应用清单、Service Worker 和 Service Worker 缓存。

    https://developer.chrome.google.cn/docs/devtools/progressive-web-apps?hl=zh-cn

  • 查看和修改本地存储空间: 使用 Chrome 开发者工具查看、修改和删除 localStorage 键值对。

    https://developer.chrome.google.cn/docs/devtools/storage/localstorage?hl=zh-cn

  • 查看、添加、修改和删除 Cookie: HTTP Cookie 主要用于管理用户会话、存储用户个性化偏好设置以及跟踪用户行为，您可以使用 Chrome 开发者工具查看、添加、修改和删除网页的 Cookie。

    https://developer.chrome.google.cn/docs/devtools/storage/cookies?hl=zh-cn

  • 查看源试用信息: 在 Chrome 开发者工具的应用面板中，查看可供网站使用的源试用相关信息。您还可以使用我们的原始试用 token 解码器查看 token 中编码的数据。

    https://developer.chrome.google.cn/docs/web-platform/origin-trials?hl=zh-cn#de

安全性面板

调试混合内容问题、证书问题等。

Image

  • 了解安全问题: 使用 Chrome 开发者工具中的隐私和安全面板检查和控制第三方 Cookie，以及检查 HTTPS 保护。

    https://developer.chrome.google.cn/docs/devtools/security?hl=zh-cn

社区

在 Crbug (工程团队的 bug 跟踪器) 中提交 bug 报告和功能请求。如需关于使用开发者工具的帮助，Stack Overflow 是最佳渠道。如需在开发者工具文档中提交 bug 或功能请求，请打开 GitHub 问题。

  • Crbug

    https://crbug.com/new

  • Stack Overflow

    https://stackoverflow.com/questions/ask?tags=google-chrome-devtools

  • GitHub

    https://github.com/GoogleChrome/developer.chrome.com/issues/new/choose

想了解更多 Chrome 开发者工具的实用技巧吗？请持续关注我们的系列文章，敬请期待更多精彩内容！

Image

Image

Image

KEEP THE THREAD GOING

更多来源文章