Firebug 曾是一个功能强大的 Firefox 插件，用于网页开发和调试。然而，值得注意的是，Firebug 已经停止开发并被合并到 Firefox 自带的开发者工具中。无论如何，这里是如何利用 Firebug（以及类似的现代浏览者开发人员工具）来检查和修改 DOM 结构的基本步骤：

1. 安装和打开 Firebug：

   • 如果你使用的是旧版本的 Firefox 可以安装 Firebug 插件，但当前建议使用 Firefox 内置的开发者工具。
   • 在 Firefox 中打开网页后，右键点击页面上的任何元素，然后选择“检查元素 (Inspect Element)”以打开开发者工具或旧版的 Firebug。

2. 检查 DOM：

   • 打开开发者工具后，默认会定位到“元素”或“HTML”选项卡，这取决于你使用的是哪个版本的工具。这部分专门用于展示和编辑 DOM 树。
   • 通过此面板，你可以查看 HTML 的层次结构。鼠标悬停在结构中的不同元素上，将在页面上高亮显示对应的元素，这方便定位。

3. 修改 DOM：

   • 直接双击元素标签或属性即可编辑。在旧版 Firebug 中，点击“鼠标右键 > Edit”。
   • 可以删除元素：右键某个节点，选择“Delete Node”或直接使用删除键。
   • 添加新元素：右键点击某个节点，选择“New Child Node”来添加子节点，或者选择“Insert Adjacent Element”来在前后插入兄弟节点。

4. 查看实时效果：

   • 任何在开发者工具中所做的更改都会立即反映在网页上，但这些更改仅对当前会话有效，不会保存到服务器上。

5. 使用控制台进行动态修改：

   • 打开控制台（Console）面板，你可以使用 JavaScript 代码动态修改 DOM。
   • 比如，document.querySelector('selector').innerText = 'new text' 可以用来修改页面某个元素的文本内容。

6. 查看并调试样式：

   • 使用“样式”或“样式规则”面板来查看和编辑与所检查的 DOM 元素相关联的 CSS 样式。
   • 这也是直接更改和测试样式的好地方。

尽管 Firebug 本身不再更新和使用，但 Firefox 和其他现代浏览器（如 Chrome）的开发者工具都继承和扩展了 Firebug 的许多功能，所以学习使用这些工具对开发和调试依然十分有用。