火狐web开发清楚缓存_调查：面向Web开发人员的必备Firefox工具

Firefox一直是Web开发的首选浏览器。 有许多有用的插件可以完成这项工作。 在本文中，我们将研究一些我认为对进行Web开发至关重要的附加组件。 此外，我们还将发现这些附加组件中的一些功能可以提供帮助。

首先，我们需要安装Firebug。

萤火虫

Firebug是用于Web开发的必须安装的附件。 假设您不知道从哪里获得Firebug， 可以在此处安装它 。 可能您需要在激活Firefox之前重新启动它。

之后，您可以通过以下方式之一查看Firebug：按照此菜单>工具> Web开发人员> Firebug ，右键单击网页，然后选择“使用Firebug检查元素” 。

或者，您可以在Firefox中找到一个Firebug图标，然后单击它，这将显示Firebug窗口。

Firebug与Chrome开发人员工具完全相同。 它具有用于查看HTML结构和样式的面板，以及用于查看错误，警告和日志的控制台面板。 但是，我还有其他一些技巧，希望对您有所帮助。

调整箱子大小

HTML元素由CSS框模型组成，该框模型由边距，填充和对象尺寸（宽度/高度）组成。 有时我们可能需要修改这些属性。 在这种情况下，您可以选择要更改的元素之一，然后转到“ 布局”面板。

在此面板中，您将找到CSS盒子模型的插图及其信息，包括width和height 。 即使没有在CSS中指定这两个属性 ，该工具也足够聪明来确定该值。 如果需要修改它们，只需单击该值，然后使用向上或向下箭头键来增大或减小该值。

计算样式

在许多情况下，您可能想知道为什么未应用某些样式。 一种简便快捷的方法（尤其是当您具有数千行样式时）是从“ 计算样式”面板中进行检查。 这个例子说明，锚标记文本颜色由覆盖.button类，而背景.button类由覆盖.button.add 。

检查字体家族（简便方法）

您可能经常会在带有各种字体系列CSS的font-family属性中找到类似的内容。 不幸的是，这不会告诉我们浏览器采用哪种字体。 为了使识别更容易，我们可以安装此Firebug扩展名为FireFontFamily 。

安装完成后，加载您的网页，现在我们可以清楚地看到应用了哪种字体系列。 在我们的案例中，实际上是Helvetica Neue （见照片）。

分析效果

这可能是陈词滥调，但是Site Speed现在是Google决定网站质量的参数（算法）之一； 加载速度更快的网站被认为是完善的网站，其内容排名也较高。 因此，速度不应该被忽视。

净面板

您可能需要访问检查网站性能的第一个地方是“ 网络”面板。 该面板将记录您的网站在加载时的HTTP请求。 下面的屏幕截图显示了一个加载42个请求并耗时约4.36秒的网页。

然后，您可以根据HTTP请求的类型（例如HTML，CSS和图像）对HTTP请求进行排序。

慢！

此外，您还可以安装Yahoo!的Firebug扩展程序YSlow 。 激活后，您会发现一个名为Yslow！的附加面板。

与Net面板类似，Yslow！ 会在加载网页时记录其性能，但同时还会告诉您为什么网页速度慢以及我们可以采取什么措施来解决。 在此示例中，我们对网页进行了测试，整体性能得到86分 ，认为还可以。

页面速度

另外，您也可以从Google安装Page Speed 。 类似于Yslow！ ，它会测试网站的速度性能，尽管测试结果可能会略有不同。 此示例显示， 根据Page Speed ，同一网页的得分为82 。

Web开发人员工具

Web开发人员工具显然是针对Web开发人员的，它在此工具栏中具有许多功能。 但是下面的这个是我的最爱之一。

图像检查

有时我们可能需要从网页获取图像信息。 我通常看到人们通过绊倒浏览器或右键单击图像并选择“ 查看图像信息”来做到这一点，如下所示：

但是，当我们需要从许多图像中获取信息时，这种方法效率不高。 在这种情况下，我们可以利用附加组件中的“ 图像”功能。 可从工具栏的“图像”菜单轻松访问此功能。

并且，此示例显示了我们如何同时显示图像尺寸和图像文件大小：

Firefox内置工具

在最新版本中，Firefox为Web开发人员大大增强了其内置功能，其中包括：

本地检查元素

Firefox的本机Inspect Element看起来类似于“ Firebug中的Inspect Element” ，但实际上其行为方式不同。

这次，我将不进一步介绍此功能，因为它在本质上与Firebug HTML和CSS面板相同，尽管布局和设计有所不同。 但是，有一个值得一试的独特功能，即3D视图 。

使用3D视图，您可以深入查看网页结构。 要激活此视图，您可以在“ Firefox Native Inspect元素”右下方找到按钮。 这就是3D视图的样子。

虽然我没有像其他功能那样频繁使用它，但是我承认它是Mozilla的一项创新功能，在某些情况下当然非常有用。

网页设计视图

由于响应式Web设计越来越受欢迎，因此Firefox已向浏览器启动了响应式书签。 该工具将使我们能够在不同视口中测试响应式网站，而无需调整浏览器窗口的大小。

可从以下菜单使用此视图： 工具> Web开发人员> Web设计视图 。 而且，这就是视图的样子。

样式编辑器

最后，如果您经常使用CSS，则可能会爱上此功能。 从11版本开始，Firefox在其本机开发人员工具中添加了样式编辑器 。

此功能与Web设计视图一样酷，它允许您编辑CSS，立即查看对浏览器的影响以及保存直接影响CSS源文件的更改。

可以从以下菜单中使用样式编辑器： 工具> Web开发人员>样式编辑器 。

最终思想

这些Firefox插件中包含了很多功能，这里讨论的只是我在Web开发过程中经常使用的一些功能。 尽管如此，您可能还有其他一些技巧可能对提高Firefox中的Web开发生产力很有用。

您经常使用哪些功能？ 您可以在下面的评论框中分享您的想法。

翻译自: https://www.hongkiat.com/blog/firefox-web-development-tools/