css - 使用 IE9 F12 开发人员工具进行精细 DOM/CSS 编辑 : possible?

Question

为了解决烦人的仅适用于 IE 的布局和 CSS 问题，我正在尝试使用 IE9 的开发人员工具来迭代编辑 HTML 和 CSS。理想情况下，我可以获得与我习惯使用 Firebug 和 Webkit 的 Inspector 进行的 DOM/CSS 操作工作流相同的效果。

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

我已经了解了 F12 工具的“整页”编辑功能，您可以在其中编辑整个页面的 HTML 或所有 CSS 作为一个整体，但即使在使用该工具几个小时后，阅读 online help和许多 Google 搜索，我仍在为我习惯使用 Firebug 的那种更细粒度的编辑而苦苦挣扎。

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

• ...编辑特定元素及其子元素，而不是一次编辑整个页面？ (如 Firebug 的“编辑 HTML”上下文菜单)
• ...看到在编辑 View 中所做的更改会立即显示在浏览器中，而不是必须退出编辑 View 才能看到更改？
• ...在编辑 View 中轻松定位当前选定的元素(周围有蓝色方 block 的元素)？
• ...删除单个元素？ (在 Firebug 中，我可以只选择元素并单击“删除”)
• ...向类添加新样式，而不必遍历文档中的每个样式来找到适用于我关心的元素的样式？ (在 Firebug 中，我只需双击右侧 Pane 中的样式即可)。

如果使用 IE 的 F12 工具无法实现上述内容，那么是否有用于 DOM/CSS 编辑的替代插件？

顺便说一句，我提出这个问题的目的不是抨击 IE9 开发工具(感谢 Microsoft 将这些开箱即用的工具包括在内)，而是学习如何使用它们提高工作效率。

此外，我已经通读了 20 多个关于 IE 上等效的 firebug 的其他 StackOverflow 问题，但其中大部分似乎与 javascript 调试和只读 DOM 检查有关。我没有找到任何关于编写 DOM/CSS 的最新(IE9)。因此，我要就此主题提出另一个问题...如果这是一个骗局，我深表歉意。

Answer 1

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

1. 按 F12 进入开发者工具窗口 (ie9)。
2. 选择 CSS 选项卡(菜单栏下方窗口的左上角)
3. 从下拉列表中选择您要修改的 css 文件。
4. 在适当的地方选择右键，上下文菜单将允许添加/删除任何你喜欢的内容
5. 要修改属性，只需单击值并进行更改

希望对你有帮助