使用 IE9 F12 开发者工具进行精细的 DOM/CSS 编辑：可能吗？答案

【问题标题】：Granular DOM/CSS editing using IE9 F12 developer tools: possible?使用 IE9 F12 开发者工具进行精细的 DOM/CSS 编辑：可能吗？
【发布时间】：2012-06-29 12:02:56
【问题描述】：

为了解决烦人的 IE-only 布局和 CSS 问题，我尝试使用 IE9 的开发人员工具来迭代编辑 HTML 和 CSS。理想情况下，我可以与我习惯于使用 Firebug 和 Webkit 的 Inspector 进行的 DOM/CSS 操作工作流进行比较。

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

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

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

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

如果IE的F12工具无法做到以上几点，那么有没有一个好的DOM/CSS编辑替代插件？

顺便说一句，我提出这个问题的目的不是抨击 IE9 开发工具（感谢 Microsoft 开箱即用地包含这些工具），而是学习如何更高效地使用它们。

另外顺便说一句，我已经阅读了 20 多个关于 IE 上的 firebug 等价物的 StackOverflow 问题，但其中大部分似乎是关于 javascript 调试和只读 DOM 检查。我没有找到任何关于编写 DOM/CSS 的最新（IE9）。因此，我正在就这个话题提出另一个问题......如果这是一个骗局，我深表歉意。

【问题讨论】：

标签： css firebug internet-explorer-9 web-inspector web-developer-toolbar

【解决方案1】：

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

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

希望对你有帮助

【讨论】：

【解决方案2】：

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

【讨论】：

亲爱的 Ben，请提及完整的步骤以使答案有用。

【解决方案3】：

看看this。

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

干杯！

【讨论】：