摘要：审查元素，选中需要hover的标签 点击“Styles”菜单中的“:hov”，弹出 Force element state 选中相应的 :hover :active :focus :visited 等伪类 阅读全文

摘要：模拟和测试其他浏览器 您的任务不只局限于确保网站在 Chrome 和 Android 上出色运行。即使 Device Mode 可以模拟 iPhone 等多种其他设备，我们仍鼓励您查看其他浏览器模拟解决方案。 如果您没有特定设备，或者想要执行抽检，最佳方式就是直接在浏览器中模拟设备。 利用设备模拟器 阅读全文

摘要：模拟传感器：地理定位与加速度计 由于大多数桌面设备都没有 GPS 芯片和加速度计，所以测试它们比较困难。Chrome DevTools 的 Sensors 模拟窗格可以通过模拟常见的移动设备传感器来降低测试的开销。 模拟地理定位坐标以测试地理定位替换值。 模拟设备方向以测试加速度计数据。 访问传感器 阅读全文

摘要：使用 Device Mode 模拟移动设备 使用 Chrome DevTools 的 Device Mode 打造移动设备优先的完全自适应式网站。了解如何使用 Device Mode 模拟多种设备及其功能。 警告：Device Mode 可以让您了解您的网站在移动设备上的大致显示效果，但要获得全面的 阅读全文

摘要：检查资源 使用 Application 面板的 Frames 窗格可以按框架组织资源。 您也可以在 Sources 面板中停用 Group by folder 选项，按框架查看资源。 要按网域和文件夹查看资源，请使用 Sources 面板。 在 Network 面板中按名称或其他条件过滤资源。 按框 阅读全文

摘要：检查和删除 Cookie 从 Application 面板检查和删除 Cookie。 TL;DR 查看与 Cookie 有关的详细信息，例如名称、值、网域和大小，等等。 删除单个 Cookie、选定网域的 Cookie 或所有网域的全部 Cookie。 使用 Cookies 窗格可以查看和删除 Co 阅读全文

摘要：检查和管理存储、数据库与缓存 查看和修改本地存储与会话存储。 检查和修改 IndexedDB 数据库。 对 Web SQL 数据库执行语句。 查看应用缓存和服务工作线程缓存。 点击一次按钮即可清除所有存储、数据库、缓存和服务工作线程。 本地存储 如果您使用本地存储存储键值对 (KVP)，则可以从 L 阅读全文

摘要：编辑 DOM Chrome DevTools 的 Elements 面板中的 DOM 树视图可以显示当前网页的 DOM 结构。通过 DOM 更新实时修改页面的内容和结构。 DOM 定义您的页面结构。每一个 DOM 节点都是一个页面元素，例如，标题节点或段落节点。 通过渲染的 DOM 实时编辑页面的内 阅读全文

摘要：检查动画 使用 Chrome DevTools 动画检查器检查和修改动画。 通过打开动画检查器捕捉动画。检查器会自动检测动画并将它们分类为多个组。 通过慢速播放、重播或查看动画源代码来检查动画。 通过更改动画时间、延迟、持续时间或关键帧偏移修改动画。 概览 Chrome DevTools 动画检查器 阅读全文

摘要：检查和编辑页面与样式 使用 Chrome DevTools 的 Elements 面板检查和实时编辑页面的 HTML 与 CSS。 在 Elements 面板中检查和实时编辑 DOM 树中的任何元素。 在 Styles 窗格中查看和更改应用到任何选定元素的 CSS 规则。 在 Computed 窗格 阅读全文

摘要：Main Menu Click More to open the Main Menu. Settings To open Settings, do one of the following: Press F1 while DevTools is in focus. Open the Main Men 阅读全文

摘要：Sources 面板中 代码段是您可以从任何页面运行的小脚本（类似于小书签）。 使用“Evaluate in Console”功能可以在控制台中运行部分代码段。 请注意，Sources 面板中的常用功能（如断点）也可与代码段结合使用。 创建代码段 要创建代码段，请打开 Sources 面板，点击 S 阅读全文

摘要：Security 面板 使用 Security Overview 可以立即查看当前页面是否安全。 检查各个源以查看连接和证书详情（安全源）或找出具体哪些请求未受保护（非安全源）。 Security Overview 要查看页面的整体安全性，请打开 DevTools，然后转至 Security 面板。 阅读全文

摘要：Application 面板 使用 App Manifest 窗格检查您的网络应用清单和触发 Add to Homescreen 事件。 使用 Service Worker 窗格执行与服务工作线程相关的全部任务，例如注销或更新服务、模拟推送事件、切换为离线状态，或者停止服务工作线程。 从 Cache 阅读全文

摘要：注意：如果你是一个网页开发者同时想要获得最新版本的开发工具，那么你应该使用谷歌浏览器（金丝雀）Canary 版。 Chrome 开发者工具 打开Chrome 开发者工具 选择浏览器位于浏览器窗口右上方的菜单栏的工具目录，选择开发者工具选项。 右击页面任何位置并选择审查元素。 选择浏览器位于浏览器窗口 阅读全文