数字营销
加载的结果……
Firebug< / >Mozilla Firefoxweb浏览器的开源web开发工具扩展，功能非常强大，具有广泛的超级有用和实用的功能，对任何web设计师或开发人员都有好处。事实上，这个浏览器扩展(也可在其他网页浏览器功能有限)是如此有用和流行，它已经自己的浏览器扩展< / >．这个实时编码工具减少了调试网页的猜测，在许多其他事情中，如网页布局检查/测试和网页性能分析，以加快您的工作流程。
无论你是建立一个网页，添加新的CSS响应式网页设计< / >、故障排除网络布局< / >问题，或检查其他网站是如何构建的，Firebug将是一个有价值的工具在你的武器库。让我们来仔细看看这个不可或缺的浏览器扩展是如何帮助网页设计师的。我们只关注某些方面Firebug的功能对网页设计师特别有帮助。
Firebug入门
首先，您需要下载并安装Mozilla Firefox< / >如果你还没有的话。
然后还需要下载并安装Firebug。一旦你有扩展安装，你已经准备好开始解剖任何网站。您可以通过摆弄它来试验它是如何工作的，也可以花些时间阅读Firebug的官方文档(它是一个wiki)。
打开Firebug面板
有几种方法可以打开Firebug面板。当它打开时，应该如下图所示。
使用键盘快捷键打开Firebug按F12，这是切换Firebug的键盘快捷键(参见其他Firebug键盘快捷键)。
在浏览器的上下文菜单中打开Firebug在任何网页上，右键单击页面或特定的HTML元素(如超链接、文本标题、图像、表单按钮等)，然后选择检查元素从出现的上下文菜单中。
Firebug图标您还可以单击Firebug图标来打开Firebug面板。取决于你的Firefox版本，它会在底部的状态栏，或在上方的chrome搜索栏右侧。
提示:在自己的窗口中设置Firebug
打开Firebug后，可以随意地将其从浏览器中分离出来，并通过按在新窗口中打开Firebug图标。这是完美的大显示器或多显示器计算机设置< / >．
现在你已经准备好制造破坏了。
接下来，我们将讨论一些有用的Firebug特性和技术。
检查网页的布局和标记
这是你在开发网页时最常被问到的问题:“漏洞在哪里?”(简称“WTF”)。Firebug最常见的用途是检查。
一旦Firebug打开，你就会进入HTML面板默认情况下。这个面板将帮助你检查和理解网页的HTML元素。
HTML面板中有两个窗格。
让我们简要地讨论一下这些窗格。
节点视图窗格
首先，左边是节点视图窗格，显示当前所处页面的生成源。
节点视图允许您在web页面上编辑HTML元素/代码，然后实时查看结果。
当您在节点视图中将鼠标移到HTML标记上时，浏览器实际上会突出显示正在检查的web页面上的元素。这是一个非常有用的功能——它向你展示了浏览器是如何处理你的HTML元素的，以及特定元素在实际网页上的位置。例如，这可以帮助您可视化边距/填充问题和浮动问题。
当您在节点视图中单击HTML元素时，它将在窗格上方显示元素的堆叠顺序。这对于你必须编写的任何CSS都是有帮助的，这些CSS需要更加具体，以防止在你网站的其他地方设置类似的元素样式。我经常检查哪些CSS规则被继承。
为了帮助您快速找到HTML元素，请尝试HTML面板右侧的搜索功能，该功能将在节点视图中以灰色突出显示匹配的文本。
HTML侧面板
右边的第二个窗格是侧板．这些面板提供了关于突出显示元素的更多信息。
HTML面板中有四个侧面板。
- 风格
- 计算
- 布局
- DOM(代表文档对象模型)
的风格侧面面板显示了CSS样式声明对特定元素的影响。它还显示样式规则所在的样式表(以及行号)，以防您有多个样式表。的计算侧面板显示HTML元素的CSS属性，如字体大小，颜色，text-align等。
这将为您提供有关web浏览器如何呈现元素的信息。
的布局侧面面板直观地显示您所单击的元素的框模型。如果你像我一样是视觉学习者，看到这样的填充、边框和页边距真的很不错。
双击显示的值允许您实时进行更改和实验。
的DOM侧面面板显示所选元素的文档对象模型信息。它对于使用JavaScript/客户端脚本的前端web开发人员特别有用。
即时编辑HTML
当你可以访问服务器上的文件时，或者当你在本地服务器环境中使用web服务器堆栈时，有一百种不同的方法来管理你的HTML工作流XAMPP< / >或WampServer< / >．我认为大多数人更喜欢在自己的代码编辑器中工作，这样就可以随时保存代码。但是，对于快速的浏览器内测试和无法访问HTML文件的情况(例如您不拥有的网站或当您不在开发计算机时)，Firebug是完美的选择。
在HTML面板的Node View中，您可以单击任何HTML元素并编辑它。添加或删除任何你喜欢的东西，然后看看你的改变对网页产生了什么结果。我用这种方法完成的一些常见任务包括:
- 添加/删除整个HTML元素(例如:“如果我把这个移走，浮标会发生什么
div?”) - 向元素中添加/删除类或ID(例如:“如果我移除这个CSS类，渲染问题会得到修复吗?”)
- 将标题和按钮上较长的文本替换为测试换行
- 添加临时内联样式用于快速测试
风格HTML属性(例如:“这个超链接会更好看吗风格= "颜色:# 00 aeef "或风格= "颜色:# 067时尚”?”)
Firebug不会保存你在其中编写的任何代码;当您单击链接或刷新页面时，您所做的更改就消失了。(你不会想要任何其他方式!)所以，保留一个文本编辑器< / >方便粘贴代码，你已经尝试或可能想保留。
在飞行中编辑CSS
在Firebug中编辑CSS才是真正的工作，至少对网页设计师来说是这样。
如前所述，检查页面上的HTML元素将在HTML面板的Node View中显示其继承的样式。这些样式按字母顺序列出，并通过样式侧面板上的选择器分组。
选择器以呈现的CSS顺序显示:最近的声明位于顶部(例如，样式表开头的某些内容将位于CSS窗格的底部，而内联样式将显示在顶部为element.style）.
如果使用多个样式表，它也会做同样的事情。例如，我经常使用Eric Meyer的CSS重置< / >作为网站上的第一个样式表，所以我经常会在样式侧面板底部看到一个很长的选择器。Firebug通过划掉已被另一个CSS属性声明取代的CSS属性，明确了哪些样式正在积极影响HTML元素。
如果有一行穿过它，那么这意味着另一个CSS规则已经覆盖了它，通过在前一个规则之后声明，或者通过重要的!．
样式侧面板中的CSS的伟大之处在于它是可编辑的。想看看如果你改变了元素的网页会是什么样子padding-top财产22 px?
单击属性值并更改它。你也可以改变属性本身(例如changepadding-top来padding-bottom）.
您还可以禁用/隐藏CSS属性/值对，以查看如果没有该规则，页面会是什么样子。这对于查看网页中不需要的CSS行，确定属性声明是否是导致呈现问题的原因等非常有用。
当您在样式侧面板中编辑CSS时，Enter键将跳转到下一个可编辑单元格—从属性到值，再向下跳转到下一个属性。
当你在选择器的最后一个属性时，按Enter会给你一个新的行，在那里你可以添加一个新的CSS属性/值对。现在，如果你想给一个没有类或ID的元素添加CSS(因此不会出现在样式侧面板中)，你可以在节点视图中添加内联样式，或者冒险进入CSS面板。CSS面板显示您将附加到站点的各种样式表的页面视图。
在源编辑模式，你可以编辑值(类似于HTML面板的样式侧面板，我们之前讨论过)。在住编辑模式下，你可以自由地输入，就像你在代码编辑器中处理你的网站样式表一样。
通过CSS面板编辑。
Firebug的怪癖和限制
即使是Firebug也有它的怪癖，但是疯狂的发布时间表< / >是下了最近，谁能怪呢?
下面是在使用Firebug进行调试时偶尔会出现的一些问题，以及在使用Firebug时可能遇到的一些限制。让我们来谈谈其中的几个。
带有Hover属性的HTML元素
有CSS的元素很难排除故障:徘徊规则或JavaScript悬停事件，如飞出下拉菜单< / >因为当你将鼠标移出元素时，节点视图会更新标记。
其中一个问题是，研究父元素中隐藏的嵌套元素是很棘手的，直到你将鼠标悬停在父元素上。我通常会使用风格HTML属性强制元素可见，这对于实时测试来说并不理想，但可以快速完成工作。例如，假设我想调试和研究中的无序列表flyout-menu div在下面。
但JavaScript会隐藏div当鼠标不在元素上时。
- 菜单项一
- 菜单项二
- 菜单项三
我可以加上，比如，因为这取决于div是隐藏的，但基本上你想抵消JavaScript DOM操作-下面的内联样式div．
< div class = " flyout-menu”风格= "显示:块;">
- 菜单项一
- 菜单项二
- 菜单项三
有关此问题的更多解决方案，请阅读本文堆栈溢出问题和回答线程< / >．
Firebug CSS面板有时会出错
有时CSS面板将无法为您提供编辑模式然后它会抛出一个错误。我无法确定原因，但如果您正在测试各种用户代理，那么这种情况会发生得更多。重启浏览器通常可以解决这个问题。
无代码格式化选项
您实际上并没有一个选项来显示和格式化您在Firebug中看到的代码基于您自己的首选项/格式化准则。所以，如果你要直接复制CSS或HTML到你的工作中，例如，你所看到的就是你所得到的。然而，有很多在线CSS格式化程序< / >您可以在开发之后(或开发过程中)使用。
火狐与其他浏览器不同
另一个有趣的“问题”是Firefox是一个非常棒的浏览器!事实上，它非常好，以至于当它巧妙地纠正标记中的错误时，可能会引起问题。例如，考虑以下列表项元素:
<李> < a href = " home.htm " >家李< / >
有人忘记结案了< / >标签。
一些浏览器可能会通过尊重这个错误正确地呈现这个错误，并使链接失去控制。然而，Firefox(以及随后的Firebug，因为它依赖于Firefox的布局引擎)将向您展示< / >在适当的地方。(这被称为Internet Explorer开发工具< / >
布的!
以上就是Firebug的一些网页设计相关特性的简单介绍。使用此工具可以极大地改进调试和调试现场制作流程< / >．还有，让我们面对现实吧。
这是恶作剧朋友最好的工具之一。“嘿,史蒂夫!快来看看!”
说实话，Firebug恶作剧是我学到这一切的方式。
