Chrome开发者工具-Elements

概述

Chrome开发者工具，简称DevTools，内嵌于Google Chrome浏览器中，是一组网页制作和调试工具。用Chrome打开一个web应用，在任意位置右键点击"检查"即可访问DevTools。

• Ctrl + Shift + I 打开DevTools
• Ctrl + Shift + J 打开DevTools中的控制台
• Ctrl + Shift + C 打开DevTools的审查元素模式

Mac对应的快捷键可查看https://leeon.gitbooks.io/devtools/content/learn_basic/overview.html

DevTools中八个主要功能组

• Elements
• Resources
• Network
• Sources
• Timeline
• Profiles
• Audits
• Console

可通过 Ctrl + [ 和 Ctrl + ] 快捷键在不同面板之间进行切换。

审查DOM元素和样式

在Elements中查看DOM元素和样式。

1. 如果点击左上角的检查图标可以点击页面的某个部分直接定位到所在代码

2. 当在Elements中的DOM树选中一个节点后，可以通过 left 收回该元素的子节点；right 展开该元素的子节点；up 上移一行；down 下移一行

3. 如果页面划到了最底部，但你想查看Elements中间部分的一个元素在页面的位置，则点击该行元素右键点击"Scoll into view"可实现快速定位

4. 搜索节点：在该面板按 Ctrl + f ，搜索栏会在 DOM树 和 CSS样式 之间打开

5. 可以在面板中双击元素进行修改，以查看这些更改如何影响页面，但它并不会影响源代码，刷新页面这些修改将消失

6. 拖动节点可以重新排序它们

7. 点击元素右键选择"Force State"，可以强制选择 :active, :hover等状态（非常有用！！）

8. 选择元素按H键隐藏，再按回显；选择元素点击delete键删除节点

9. 在控制台中用 $0 引用当前选中的节点，当点击面板中的某一元素时，右边会浮现 “== $0”，在控制台输入 $0 并回车，结果显示的是当前选中的节点

   

10. 将某个多次引用的节点存储为全局变量：选择节点右键点击 “Store as global variable”，默认第一个变量给你命名为 temp1，第二个为 temp2…并且会在控制台自动打印出来（控制台第二行是自己验证打印出来的，前一行是自动打印的）

    

11. 复制节点的JS路径：选中节点右键点击 “Copy > Copy JS Path"，点击后，你的剪切板中就会有 “document.querySelector(JS路径)” ，粘贴到控制台打印出来是个节点

    

Elements使用技巧

1. 使用标尺：点击 “Settings > Preferences > Elements" 勾选 “Show rulers” 开启标尺，当鼠标悬浮在面板中的元素上标尺会自动显示出来
2. 切换颜色格式：在Styles面板中，可以通过按住 “Shift” 点击前面的颜色小方块切换颜色的格式，如颜色英文单词、HSL、HEX或RGB。如果是单击颜色小方块，会开启颜色选择器（在参考某个页面的配色时非常有用）
3. 在 Styles 中点击大括号中任何位置可以为当前元素添加一个新的CSS属性，添加后属性会立即生效；可以通过 tab 键切换属性；点击右下侧的加号可以添加新的选择器；通过点击右上角的链接可以直接定位css文件中的那一行
4. 编写调试Sass

鸣谢💖：

1. Chrome DevTools 中文手册
2. Chrome Developers