前后端分享之Chrome开发者工具

注:FireBug已经停止开发合并进Firefox的内置开发者工具中;Chrome版本为 78.0.3904.87

在chrome中打开开发者工具:
1、点击右上⻆菜单->更多工具-> 开发者工具
2、在windows系统中默认快捷键 「F12」，在MacOS中默认快捷键 为「Command+Option+I」
3、在⻚面上右键，点击「检查」

Element面板:
Element面板有两大部分组成:
如图，左侧的为DOM树，右侧的为当前所选DOM节点的详细信息，包括:样式，最 终计算的样式结果，事件列表，属性列表等等。

节点选择:
点击面板左上⻆的 图标后，鼠标移 动到⻚面中的某个元素就会显示该元素的盒 模型和基础布局信息，点击选中后会显示该 元素的DOM节点位置、样式等详细信息，你 可以在这个面板中对它进行修改。
你也可以在DOM树中点选对应的DOM 节点，浏览器会在⻚面中高亮显示它所在的 位置，可以实时的编辑，添加，删除节点。


Styles:
这块区域主要功能是显示和调整元素的样式。
有时我们需要在查看样式的时候看一下鼠标悬停或者选中时候的样式，那么我们需要先 选中想要查看的元素，然后在Styles面板中点击 它会展开一个面板

通常情况下在面板中勾选对应的状态即可让所选的元素显示对应的样式:

1. :hover选中此项让所选的元素显示鼠标悬停时的样式
2. :active选中此项让所选的元素显示被用户激活的样式(用户按下按键但是还未松开时) 3. :focus选中此项让所选的元素显示获得焦点时的样式

我们可以在属性上勾选或者取消勾选来控制他是否生效，如果它有一道删除线，代表最终
计算的时候它因为优先级等问题没有实际生效&#