Chrome开发工具 技巧和窍门

特性的内容，比如 Snippet，该特性可以用于保存并执行开发工具内置的特定的 JavaScripts 片段。元素启用尺子在 Setting > General > Show rulers 下可以启用一个尺子，当你鼠标悬停在某个元素上或者选中一个元素的时候，它会显示出来。CSS 属性的自动完成开发者工具支持 CSS 属性以及值的自动完成（包括那些需要前缀的），这对于决定为当前元素设置什么属性是很有帮助的。当你开始为属性或者值输出一个名称的时候就会弹出建议，而且你也可以使用右键在可用的属性列表中滚动。要知道，选中的选项会直接应用到页面样式表中因此它的效果是可以直接看到的。在样式面板中，使用已命名的字段（比如：“red”）,HSL，HEX 或者 RGB 值可以定义颜色。如果需要的话，你可以按住 shift/鼠标点击以在这些值之间迭代选择。如果你想要展示所有支持的属性，你可以使用 Ctrl + space 来展示一个建议列表。建议列表是和特定内容相关的并且在特定情况下（比如，针对字体的时候）数字，已命名或者带前缀的值也是也可以显示出来的。在开发者工具中的颜色选择器开发者工具中包含了一个内置的颜色选择器，当你点击任何有效颜色的预览方块时，就会显示出来。你可以 Shift + 点击，来更改选中颜色的格式。添加新的 CSS 样式在 CSS 规则的代码块(包括 "element.style")内点击任何地方都可以添加一个新的 CSS 属性，并且该属性会立即应用到当前页面。一旦你已经成功添加了一个属性，你可以按下 tab 键来设置下一个属性。点击 按钮，新的选择器将会被添加到右边的 Style 子面板中。这样可以定义一个选择器，同样地，你可以用这种方式添加新的属性以及值。注意：你也可以通过单击一个选择器的名称来编辑 Style 面板中的任何选择器。一旦名称发生改变，选择器已经存在的属性将会被添加到新的选择器定义的元素中。新的伪类选择器可以通过一种类似的方式来添加，就是将他们加入到选择器的名称之后。同样需要注意的是点击新建选择器按钮旁边的 “toggle element states” 按钮后，将转换到 "Force element state" 面板中。返回到 “Matched CSS Rules” 面板中，点击规则后面样式表的链接将会进入 Sources 面板。在该面板中会显示完整的样式表定义，并且会跳转到相应规则所在的行。在元素面板中拖曳在元素面板中你可以拖拽一个元素来改变他在父类中的位置，或者将它移动到文档中一个完全不同的地方。强制元素状态想要强制元素适应某种特定状态？右键一个子元素然后选择 “Inspect Element”在元素面板中右键其父元素，并选择 “Force Element State”可以选择其中一个：active，:hover，：focus，：visited 来强制进入其中一种状态。通过开发者工具编写并调试 Sass注意：要在 Chrome 中编写 Sass 你必须要有 3.3.0（预览版)版本的 Sass 编译器，这是现在仅有的支持源映射的版本。调整一个含有预编译的 CSS 样式的文件可以算是一种挑战，因为在开发工具中对 CSS 样式做出的修改并不会返回到 Sass 源文件中。这意味着，当你做出更改后，如果你希望这些改动能够生效，那就必须返回到源文件中通过外部编辑器手动做出更改。最近 Sass 开发工作流做出了改进，使得这不再是问题。要获取 Sass 支持：确认你有在开发者工具使用 about:flags 的经验接下来，进入 Setting cog > Experiment 然后启用 “Sass stylesheet debugging”（注意，这个特性很快将会结束实验阶段）进入 General menu > Settings > Check 选中 “Enable source maps” 和 “Auto-reload CSS upon Sass save“。你可以将超时为默认值。这取决于 Sass 编译器需要花费多长时间编译，你可能需要调整这个自动重载的延迟。如果有必要你也可以让自动重加载失效，改用手动刷新页面。导航到你想在 Chrome 上对 Sass 进行调试的工程页面（通过开发者工具打开）接下来，通过使用下面的标示开启 Sass 编译器（也可以指定一个目标 CSS 编译器）：sass --watch --sourcemap sass/styles.scss:styles.css。这将会让 Sass 观察你对 Sass 源文件的更改，然后为每一个生成的 CSS 文件创建源映射文件（.map）。接下来，你看到的就像是在控制台中的一样：这就证明了 Sass 调试器确实在工作如果按照预期启动了工作，你可以进入元素面板。首先你将会注意到你的样式的文件名现在显示的是相应的 .scss 源文件，并且源文件中对应的行号也显示出来了。在这里点击文件名将会直接进入到 Sources 面板中去，并且会高亮显示相应选择器所在的行。现在你就可以再开发工具内调整 Sass 源文件了，并且该内置编辑器支持语法高亮。如果你想要在 Source 面板中编辑一个 Sass 文件，首先需要确保的就是开发工具能够知道相应文件存在于本地文件系统的哪个位置。在编辑器中右键，然后选择 ”Save As“ 可以用当前正在编辑的文件重写原本的文件。由于自动重加载已经开启并且 Sass 已经在后台运行，所以我们做的更改会马上的显示在 Chrome 和开发者编辑器中。更多有关使用元素和样式的技巧，请进入编辑样式和 Dom 在这里，你可以学习如何查看页面的实际结构。比如，你可能对一个图片是否有 HTML id 属性很好奇，并且想知道这个属性的值是什么。了解如何观察 DOM 树中的每一个信息，包括检查以及快速编辑 DOM 元素。如果你需要确认页面某个部分的 HTML 片段时你可能会经常访问元素选项卡。网络重新发出 XHRs 请求也许你可能知道，网络面板会展示你的页面上所有的请求，包括 XHRs。在请求上右键点击会显示上下文菜单，之后选择 “Replay XHR”，就可以重新发出 XHRs 请求(POST 或者 GET)清除网络缓存和 cookies在网络面板的任何地方，右键点击/ 按住 Ctrl 键然后点击会弹出菜单，在菜单中选择 Clear Browser Cache / Network Cache。记录一个追踪栈 & 导出 waterfall点击 “record” 捕捉一个多页面痕迹要导出 meta-data 请求：右键然后选择 “Copy Entry as HAR”要导出全部 waterfall：右键然后选择 “Copy All as HAR”更多：等等，开发者工具可以做什么？| Igvita.com使用网络时间轴上的 large resource rows 查看更多细节通过启动在网络面板底部的 “Use large resource rows” 图标，你可以在面板中显示 campact/smaller resource rows 视图中看不到的额外信息。对比 smaller resource rows 视图：以