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

发布于 2024-10-30 22:21:24 字数 1083 浏览 4 评论 0原文

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

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

我已经了解了 F12 工具的“全页”编辑功能，您可以将整个页面的 HTML 或所有 CSS 作为一个块进行编辑，但即使在使用该工具几个小时后，阅读在线帮助和许多Google搜索，我仍在努力解决这种更精细的问题-我习惯使用 Firebug 进行颗粒化编辑。

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

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

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

顺便说一句，我提出这个问题的目的并不是要抨击 IE9 开发工具（感谢微软将这些开箱即用的工具包含进来），而是学习如何使用它们来提高工作效率。

顺便说一句，我已经阅读了 20 个左右的其他 StackOverflow 问题，有关 IE 上的 firebug 等效项，但其中大多数似乎与 javascript 调试和只读 DOM 检查有关。我没有找到任何最近（IE9）关于编写 DOM/CSS 的内容。因此，我要问关于这个主题的另一个问题......如果这是一个骗局，我很抱歉。

原文

To solve pesky IE-only layout and CSS issues, I'm trying to use IE9's developer tools to iteratively edit HTML and CSS. Ideally I can get parity with the DOM/CSS-manipulation workflow that I'm used to doing with Firebug and Webkit's Inspector.

In other words, I want to be able to repeatedly edit HTML and CSS of a single element or group of elements, and then see my changes reflected immediately on-screen.

I've figured out the F12 tools' "full-page" editing features, where you can edit the entire page's HTML or all CSS as a bloc, but even after several hours of using the tool, reading the online help and many Google searches, I'm still struggling with the kind of finer-grained editing that I'm used to with Firebug.

Before I give up, does anyone know how to use the F12 tools to...

...edit a particular element and its children, not the entire page at once? (like firebug's "edit HTML" context-menu)
...see changes made in the edit view show up imediately in the browser, rather than having to exit the edit view to see changes?
...easily locate the currently-selected element (the one with the blue square around it) in the edit view?
...remove a single element? (in firebug I can just select the element and click "delete")
...add a new style to a class without having to hunt through every style in the document to find the one that applies to the element I care about? (In firebug I can just double-click on the style in the right pane).

If the things above are not possible with IE's F12 tools, then is there a good alternative plugin for DOM/CSS editing?

BTW, my intent with this question is not to bash the IE9 dev tools (kudos to Microsoft for including these out of the box) but to learn how to be more productive using them.

Also BTW, I've already read through 20-ish other StackOverflow questions about a firebug equivalent on IE, but most of them seem to be about javascript debugging and read-only DOM inspection. I didn't find any recent (IE9) ones about writing DOM/CSS. Hence I'm asking yet another question on this topic... my apologies if this is a dupe.

分享到QQ

分享到微博