Chrome
开发者工具
计算机
使用Elements面板通过自由操作DOM和CSS来反复调整您的网站的布局和设计。
检查和编辑页面与样式-检查和实时编辑 DOM 树中的任何元素(html标签)。要实时编辑 DOM 节点，只需双击选定元素，然后进行更改。DOM 树视图会显示树的当前状态；可能会与最初因其他原因加载的 HTML 不匹配。 例如，您可以使用 JavaScript 修改 DOM 树；浏览器引擎会尝试修正无效的作者标记并生成意外的 DOM。
检查和编辑页面与样式-实时编辑样式。在"Styles"窗格中实时编辑样式属性名称和值。所有样式均可修改，除了灰色部分（与用户代理样式表一样）。要编辑名称或值，请点击它，进行更改，然后按 Tab 或 Enter 保存更改。默认情况下，您的 CSS 修改不是永久的，重新加载页面时更改会丢失。 如果您想要在页面加载时保留更改，请设置永久制作。
检查和编辑页面与样式-检查和编辑框模型参数。使用 Computed 窗格检查和编辑当前元素的框模型参数。 框模型中的所有值均可修改，只需点击它们即可。同轴矩形包含当前元素 padding、border 和 margin 属性的 top、bottom、left、right 值。
检查和编辑页面与样式-撤消更改。如果您未设置永久制作，每次您重新加载页面时，所有的实时编辑都会丢失。假设您已设置了永久制作，要撤消更改，请执行以下操作：(1)使用 Ctrl+Z (Windows) 或 Cmd+Z (Mac) 通过 Elements 面板快速撤消对 DOM 或样式所做的细微更改。(2)要撤消对文件所做的所有本地修改，请打开 Sources 面板，然后选择文件名旁的 revert。
编辑样式。利用 Styles 窗格，您可以在本地以尽可能多的方法更改 CSS，包括修改现有样式、添加新样式，以及为样式添加规则。如果您希望样式可以保持（不会在重新加载后消失），则需要将其保存到您的开发工作区中。
编辑样式-检查应用到元素的样式。选择一个元素以检查其样式。 Styles 窗格可以显示应用到选定元素的 CSS 规则，优先级从高到低。下图上的标签与下方带编号的项目对应。(1)与元素匹配的选择器的关联样式。(2)用户代理样式表清晰标记，并且在网页上经常被 CSS 替换。(3)已被级联规则替换的规则将显示为带删除线的文本。(4)继承的样式将在“Inherited from
编辑样式-编辑现有属性名称或值。点击 CSS 属性名称或值可以对其进行编辑。在名称或值突出显示时，按 Tab 可以向前移动到下一个属性、名称或选择器。按 Shift+Tab 可以向后移动。编辑数字式 CSS 属性值时，可以使用下面的键盘快捷键增大和减小值：(1)使用向上键和向下键能够以 1 为增量增大和减小值（如果当前值介于 -1 和 1 之间，则增量为 0.1）。(2)使用 Alt+向上键和 Alt+向下键能够以 0.1 为增量增大和减小值。(3)使用 Shift+向上键能够以 10 为增量增大值；使用 Shift+向下键能够以 10 为增量减小值。(4)使用 Shift+Page Up（Windows、Linux）或 Shift+Function+向上键 (Mac) 能够以 100 为增量增大值。使用 Shift+Page Down（Windows、Linux）或 Shift+Function+向下键 (Mac) 能够以 100 为增量减小值。
编辑DOM。Chrome 开发者工具的 Elements 面板中的 DOM 树视图可以显示当前网页的 DOM 结构。通过 DOM 更新实时修改页面的内容和结构。
编辑DOM-检查元素。使用 Elements 面板可以在一个 DOM 树中检查页面中的所有元素。 选择任何元素并检查应用到该元素的样式。
编辑DOM-DOM 导航。(1)点击一次可以突出显示节点。(2)要展开节点，请双击节点上的任何地方，或者点击节点旁边的箭头。(3)要折叠节点，请点击节点旁边的箭头。
使用控制台。当一个页面在浏览器中的时候，该控制台允许使用标准的JavaScript语句和特定于控制台的命令来帮助您调试页面。控制台可以查看诊断信息，显示原始和结构化数据，控制和过滤输出，检查和修改页面元素，测量执行时间等。
从命令行交互。控制台是一个完整的终端，您可以在开发过程中与页面进行交互。使用控制台的命令，您可以选择DOM元素，配置CPU，监视事件等。
使用断点进行调试。Chrome 开发者工具包含强大的断点功能，可帮助您发现和修复JavaScript代码中的逻辑错误。脚本执行中使用不同的断点类型来控制满足什么条件时可以触发暂停。在您开发网页时，您将需要定位和更正JavaScript中的错误。但是在执行脚本中，错误代码毫无疑问会被处理，然后才能识别它。在各个点暂停运行JavaScript，以便您可以确定其进度或检查其变量值。
使用开发者工具的工作区设置持久化。在 Chrome 开发者工具中设置永久制作，以便立即查看更改和将这些更改保存到磁盘中。利用 Chrome 开发者工具，您可以更改网页上的元素和样式并立即查看更改。默认情况下，刷新浏览器后更改消失，除非您将其手动复制并粘贴到外部编辑器中。
使用开发者工具的工作区设置持久化-将本地源文件添加到工作区。要将本地文件夹的源文件设置为可以在 Sources 面板中修改，请执行以下操作：(1)右键点击左侧面板。(2)选择 Add Folder to Workspace。(3) 选择您想要映射的本地文件夹的位置。(4) 点击允许，授予 Chrome 访问该文件夹的权限。通常，本地文件夹包含网站的原始源文件，用于在服务器上填充网站。如果您不希望通过工作区更改这些原始文件，请复制文件夹并将其指定为工作区文件夹。
使用开发者工具的工作区设置持久化-本地文件管理。除了修改现有文件外，您还可以在为工作区使用的本地映射目录中添加和删除文件。1.添加文件。要添加文件，请执行以下操作：(1)右键点击 Sources 左侧窗格中的文件夹。(2)选择 New File。(3)为新文件键入一个包含扩展名的名称（例如 newscripts.js）并按 Enter；文件将添加到本地文件夹中。2.删除文件。要删除文件，请执行以下操作：(1)右键点击 Sources 左侧窗格中的文件。(2)选择 Delete 并点击 Yes 确认。3.备份文件。对文件进行重大更改前，复制原始文件进行备份非常有用。要复制文件，请进行以下操作：(1)右键点击 Sources 左侧窗格中的文件。(2)选择 Make a Copy...。(3)为文件键入一个包含扩展名的名称（例如 mystyles-org.css）并按 Enter。4.刷新。直接在工作区中创建或删除文件时，Sources 目录将自动刷新以显示文件更改。要随时强制刷新，请右键点击文件夹并选择 Refresh。如果您在外部编辑器中更改当前正在打开的文件，并且希望更改显示在 DevTools 中，刷新操作也非常有用。DevTools 通常可以自动捕捉此类更改，但是如果您希望确保万无一失，只需按上文所述刷新文件夹。5.搜索文件或文本。要在 DevTools 中搜索已加载的文件，请按 Ctrl + O 或者 Cmd + O (Mac) 打开搜索对话框。您仍然可以在工作区中进行此操作，不过，搜索范围将扩展到 Workspace 文件夹中的远程已加载文件和本地文件。要在多个文件中搜索某个字符串，请执行以下操作：(1)打开搜索窗口：点击 Show Drawer 按钮 Show Drawer ，然后点击 Search；或者按 Ctrl + Shift + F 或 Cmd + Opt + F (Mac)。(2)将字符串键入搜索字段并按 Enter。(3)如果字符串是一个正则表达式或者需要不区分大小写，请点击相应的框。
Network面板基础知识。Network面板记录每个网络操作的信息，包括详细的时间数据，HTTP请求和响应头，cookies，WebSocket数据等。
Network面板概述。当开发者工具打开时Network面板自动记录所有的网络活动。当你第一次打开它时是空的。重载页面开始记录，或者等着你的应用发起新的网络活动。每个请求资源被添加为Network table中的新的一行，包含下表中的列。
Network Throttling(网络模拟器工具)。很容易忽视您的用户在使用移动设备时遇到的网络条件。使用开发者工具可以模拟不同的网络条件。解决全部的加载时间问题。这是开发者工具内的网络模拟器工具。利用网络调节，您可以在不同的网络连接（包括 Edge、3G，甚至离线）下测试网站。这样可以限制出现最大的下载和上传吞吐量（数据传输速率）。延迟时间操控会强制连接往返时间 (RTT) 出现最小延迟。可以通过 Network 面板开启网络调节。从下拉菜单中选择要应用网络节流和延迟时间操控的连接。启用节流后，面板指示器会显示一个警告图标，在您位于其他面板时提醒您已启用节流。
如何看待性能。RAIL 是一种以用户为中心的性能模型。每个网络应用均具有与其生命周期有关的四个不同方面，且这些方面以非常不同的方式影响着性能：响应 (Response)、动画 (Animation)、空闲 (Idle) 和加载 (Load)。我们要了解如何根据RAIL模型测试性能，并使用浏览器分析工具。
分析运行时性能。使用Chrome 开发者工具的 Timeline 面板（以后Timeline 面板将更名为 Performance面板）可以记录和分析您的应用在运行时的所有活动。 这里是开始调查应用中可觉察性能问题的最佳位置。例如：测试JavaScript性能的最简单方法是在Timeline面板时间轴中查看脚本事件。
Profiles面板概述（以后Profiles面板将更名为Memory面板）。如果您需要比Timeline面板提供的更多信息，例如跟踪内存泄漏，请使用“Profiles”面板。如果在你的JavaScript中发现了很多jank现象，请收集JavaScript CPU profile。CPU profiles展示了页面上函数执行所花费的时间。左侧的侧边栏列出了您录制的profiles，右侧的树状视图显示了选定的profile收集的信息。
Application 面板概述。使用Application面板检查加载的所有资源，包括IndexedDB与Web SQL数据库，本地和会话存储，cookie，应用程序缓存，图像，字体和样式表。
Security面板概述。HTTPS 为您的网站和将个人信息委托给您的网站的人提供了重要的安全性和数据完整性。在 Chrome开发者工具中使用 Security 面板调试安全问题，确保您已在自己的网站上恰当地实现 HTTPS。包括以下功能：(1)使用 Security Overview 可以立即查看当前页面是否安全。(2)检查各个源以查看连接和证书详情（安全源）或找出具体哪些请求未受保护（非安全源）。
Audits（审计）面板概述。Audits的是用来分析页面加载的过程，进而提供减少页面加载时间、提升响应速度的方案。对网络和页面性能进行检测，根据测试的结果进行优化。但是检测结果只是参考，在实际的项目中肯定有特殊情况存在，并不能为了满足某项测试结果而忽略特定情况的存在。(1)基本操作：选择左侧栏Audits，单击Run
使用设备模式构建完全响应式，移动优先的网络体验。使用 Chrome 开发者工具的 Device Mode 打造移动设备优先的完全自适应式网站。了解如何使用 Device Mode 模拟多种设备及其功能。警告：Device Mode 可以让您了解您的网站在移动设备上的大致显示效果，但要获得全面的了解，则应始终在真实设备上测试您的网站。开发者工具无法模拟移动设备的性能特性。
切换 Device Mode。切换 Device Mode 按钮可以打开或关闭 Device Mode。(1)当 Device Mode 打开时，该图标呈蓝色。(2)当 Device Mode 关闭时，该图标呈灰色。您还可以通过按 Command+Shift+M (Mac) 或 Ctrl+Shift+M（Windows、Linux）来切换 Device Mode。要使用此快捷键，鼠标焦点需要位于开发者工具(DevTools )窗口中。