chromeF12 谷歌开发者工具详解 Elements篇

Elements面板

实时编辑DOM节点和CSS样式

• 双击DOM树视图里面的节点，可以实时编辑标签属性，修改的效果会立刻反应在浏览器里面

• 点击右侧Style面板，可以实时修改CSS的属性值，这里面的所有样式Name和Value都是可以编辑的;在每个属性后面单击可以添加新的样式，如下图：

• 点击右侧Computed面板，可以编辑左侧选中的盒子模型参数，所有的值都是可以修改的;点击不同的位置(top、bottom、left、right) 就可以修改元素的padding、border、margin属性值。

• 查看网页的本地修改历史
• 点击Styles面板中修改过属性的文件名，会跳转到Source面板
• 在文件位置右击选择Local modifications,可以查看本地的所有修改记录
• 点击指定的时间点可以看到粉红背景的删除内容和绿色背景的添加内容