谷歌开发者工具-元素篇

这个系列会慢一些，年前完成，有遗漏欢迎各位分享

一、官网

https://developer.chrome.com/docs/devtools/open?hl=zh-cn

二、打开Chrome开发者工具

1.Chrome 界面访问

2.快捷键访问 - F12

操作系统	元素	控制台	您上次使用的面板
Windows 或 Linux	Ctrl + Shift + C	Ctrl + Shift + J	F12 / Ctrl + Shift + I
Mac	Cmd + Option + C	Cmd + Option + J	F12 / Ctrl + Shift + I

三、常用操作

1.语言变更为中文

打开控制台即可在头部看到设置图标

注意：这里第一个是浏览器界面语言

设置已更改，需要重新加载才能生效。

2.模拟手机端开发

3.自定义和控制DevTools (变动开发工具位置/打开更多隐藏的工具)

四、元素篇

1.非工具栏操作

（1）检查指定dom节点 Inspect-icon

（2）元素右键功能 - 常用

注意：截取节点屏幕截图，截取的不是当前元素内容，而是基于元素位置截图

（3）元素搜索 - 定位元素及css

1.聚焦元素控制台
2.ctrl + f 搜索指定内容

（4）$0的dom引用 - 控制台js操作

1.在元素板块通过左键选中指定元素，元素后方出现 $0

2.控制台通过==$0==获取

2.工具栏

• Styles 面板:
  • 显示所有可能影响元素的样式规则，包括未生效的规则（灰色显示）。
  • 可以在这里临时修改样式、添加新样式，或者禁用某些样式（点击规则前的复选框）。
• Computed 面板
  • 只显示实际应用到元素上的样式，不显示未生效的规则
  • 可以查看每个样式的来源（如来自哪个CSS文件、哪个类或哪个内联样式）

（1）向元素添加行内样式(优先级高）常用

（2）添加类.cls

!!!注意：如果你添加的类在CSS中尚未定义，那么该类不会对元素的样式产生任何影响，因为还没有对应的CSS规则

（3）伪类状态 常用

!!!这里也需要跟添加类中一样，需要事先存在样式，这里采用官网案例展示

（4）查看盒模型，并修改边距

（5）css值无效 / 不可修改

留意!图标与提示

样式窗格会以斜体文本显示无法修改的属性

（6）Computed - 计算样式 最终生效

Computed 窗格会列出任何以常规字体显示的样式表中声明的属性，包括元素自己的属性和沿用的属性。点击它们旁边的展开图标即可查看其来源。
Computed 窗格以浅文本形式列出了运行时计算的属性值。如百分比宽高

（7）样式跳转源文件链接

（8）颜色选择器设置颜色

1.阴影。
2.取色器。请参阅使用取色器在任意位置对颜色进行采样。
3.复制到剪贴板。将显示值复制到剪贴板。
4.显示值。所选颜色空间的参数。
5.对比度。仅适用于 color 值。这是 color 和 background-color 之间的差值。
6.调色板。点击正方形，即可将其颜色更改为正方形。
7.色域边界。此行仅适用于新颜色空间和 color() 函数。它可以生成高清和非高清颜色。您可以通过条线区分高清和非高清。
9.彩色圆圈。穿过阴影区域拖动此圆圈可更改显示值。
10.色调滑块。
11.不透明度滑块。
12.显示值切换器。从下拉列表中选择颜色空间

（9）检查和调试flexbox布局