使用IE9 F12开发人员工具进行粒度DOM / CSS编辑：可能吗？

Question

要解决讨厌的IE浏览器布局和CSS问题，我正在尝试使用IE9的开发人员工具来迭代编辑HTML和CSS。理想情况下，我可以与我曾经使用过Firebug和Webkit的Inspector的DOM / CSS操作工作流程保持一致。

换句话说，我希望能够重复编辑单个元素或元素组的HTML和CSS，然后立即在屏幕上看到我的更改。

我已经找到F12工具的“整页”编辑功能，您可以在其中编辑整个页面的HTML或所有CSS作为一个集团，但即使在使用该工具几个小时后，阅读{{3和许多谷歌搜索一样，我仍然在努力应对我曾经使用过Firebug的那种更细粒度的编辑。

在我放弃之前，有没有人知道如何使用F12工具......

• ...编辑特定元素及其子元素，而不是一次编辑整个页面？ （如firebug的“编辑HTML”上下文菜单）
• ...看到编辑视图中所做的更改会立即显示在浏览器中，而不是必须退出编辑视图才能看到更改？
• ...在编辑视图中轻松找到当前所选元素（围绕它的蓝色方块）？
• ...删除单个元素？ （在firebug中我可以选择元素并单击“删除”）
• ...为一个类添加一个新样式，而不必搜索文档中的每个样式，以找到适用于我关心的元素的样式？ （在firebug中，我只需双击右窗格中的样式）。

如果使用IE的F12工具无法实现上述功能，那么DOM / CSS编辑是否有一个很好的替代插件？

BTW，我对这个问题的意图不是打击IE9开发工具（感谢微软将这些包装开箱即用），而是要学习如何提高它们的使用效率。

同样顺便说一下，我已经阅读了20个关于IE上的firebug等价的其他StackOverflow问题，但大多数问题似乎是关于javascript调试和只读DOM检查。我没有找到任何关于编写DOM / CSS的最近（IE9）。因此，我要问另一个关于这个话题的问题......如果这是一个骗局，我道歉。

Answer 1

这是可能的，但我同意不是很直观。

1. 按F12以获取开发人员工具窗口（ie9）。
2. 选择CSS标签（菜单栏下方窗口的左上角）
3. 从下拉列表中选择您要修改的css文件。
4. 选择右键单击相应的位置，上下文菜单将允许添加/删除您喜欢的任何内容
5. 修改一个attrbiute只需点击该值并进行更改

希望有所帮助

Answer 2

单击编辑按钮以编辑html。完成后，再次单击它以查看更改

Answer 3

查看this。

我认为它会解决你的问题。

干杯！