调查：面向Web开发人员的必备Firefox工具
此外，我们还将发现这些附加组件中的一些功能会有所帮助。
在本文中，我们将研究一些我认为对进行Web开发至关重要的附加组件。
有许多有用的插件可以完成这项工作。
Firefox一直是Web开发的首选浏览器。
首先，我们需要安装Firebug。
萤火虫
可能您需要在**Firefox之前重新启动它。
假设您不知道从哪里获得Firebug， 可以在此处安装它 。
Firebug是Web开发的必须安装的附件。
之后，您可以通过以下方式之一查看Firebug：按照此菜单工具> Web Developers> Firebug ，右键单击网页并选择“使用Firebug检查元素” 。
或者，您可以在Firefox中找到一个Firebug图标，然后单击它，这将显示Firebug窗口。
但是，我还有其他一些技巧，希望对您有所帮助。
它具有用于查看HTML结构和样式的面板，以及用于查看错误，警告和日志的控制台面板。
Firebug与Chrome开发人员工具完全相同。
调整箱子大小
在这种情况下，您可以选择要更改的元素之一，然后转到“ 布局”面板。
有时我们可能需要修改这些属性。
HTML元素由CSS框模型组成，该框模型由边距，填充和对象尺寸（宽度/高度）组成。
如果需要修改它们，只需单击该值，然后使用向上或向下箭头键来增大或减小该值。
即使未在CSS中指定这两个属性 ，该工具也足够聪明来确定该值。
在此面板中，您将找到CSS盒子模型的插图及其信息，包括width和height 。
计算样式
这个例子说明，锚标记文本颜色由覆盖.button类，而背景.button类由覆盖.button.add 。
一种简便快捷的方法（尤其是当您具有数千行样式时）是从“ 计算样式”面板中进行检查。
在许多情况下，您可能想知道为什么未应用某些样式。
检查字体家族（简便方法）
为了使识别更加容易，我们可以安装此Firebug扩展名为FireFontFamily 。
不幸的是，这不会告诉我们浏览器使用哪种字体。
您可能经常在具有各种字体系列CSS的font-family属性中找到类似的内容。
在我们的案例中，实际上是Helvetica Neue （见照片）。
安装完成后，加载您的网页，现在我们可以清楚地看到应用了哪种字体系列。
分析效果
因此，速度不应该被忽视。
加载速度更快的网站被认为是完善的网站，其内容排名也较高。
这可能是陈词滥调，但是Site Speed现在是Google确定网站质量的参数之一（算法） ；
净面板
下面的屏幕截图显示了一个加载42个请求并耗时约4.36秒的网页。
该面板将记录您的网站在加载时的HTTP请求。
您可能需要访问检查网站性能的第一个地方是“ 网络”面板。
然后，您可以根据HTTP请求的类型（例如HTML，CSS和图像）对HTTP请求进行排序。
慢！
**后，您会发现一个名为Yslow！的附加面板。
此外，您还可以安装Yahoo!的Firebug扩展程序YSlow 。
在此示例中，我们对网页进行了测试，整体性能得到86分 ，认为还可以。
会在加载网页时记录其性能，但同时还会告诉您为什么网页速度慢以及我们可以采取什么措施来解决。
与Net面板类似，Yslow！
页面速度
此示例显示， 根据Page Speed ，同一网页的得分为82 。
，它会测试网站的速度性能，尽管测试结果可能会略有不同。
类似于Yslow！
另外，您也可以从Google安装Page Speed 。
Web开发人员工具
但是下面的这个是我的最爱之一。
Web开发人员工具显然是针对Web开发人员的，它在此工具栏中具有许多功能。
图像检查
我通常看到人们通过在浏览器中绊倒或右键单击图像并选择“ 查看图像信息”来做到这一点，如下所示：
有时我们可能需要从网页获取图像信息。
可从工具栏的“图像”菜单轻松访问此功能。
在这种情况下，我们可以利用附加组件中的“ 图像”功能。
但是，当我们需要从许多图像中获取信息时，这种方式并不是很有效。
并且，此示例显示了我们如何同时显示图像尺寸和图像文件大小：
Firefox内置工具
在最新版本中，Firefox为Web开发人员大大增强了其内置功能，其中包括：
本地检查元素
Firefox中的本机Inspect Element可能类似于“ Firebug中的Inspect Element” ，但实际上其行为方式不同。
但是，有一个值得一试的独特功能，即3D视图 。
这次，我将不进一步介绍此功能，因为它在本质上与Firebug HTML和CSS面板相同，尽管布局和设计有所不同。
这就是3D视图的样子。
要**此视图，您可以在“ Firefox Native Inspect元素”右下方找到按钮。
使用3D视图，您可以深入查看网页结构。
虽然我没有像其他功能那样频繁使用它，但是我承认它是Mozilla的一项创新功能，在某些情况下当然非常有用。
网页设计视图
该工具将使我们能够在不同视口中测试响应式网站，而无需调整浏览器窗口的大小。
由于响应式Web设计越来越受欢迎，因此Firefox已向浏览器启动了响应式书签。
而且，这就是视图的样子。
可从以下菜单使用此视图： 工具> Web开发人员> Web设计视图 。
样式编辑器
从11版本开始，Firefox在其本机开发人员工具中添加了样式编辑器 。
最后，如果您经常使用CSS，则可能会爱上此功能。
此功能与Web设计视图一样酷，它允许您编辑CSS，立即查看对浏览器的影响并保存直接影响CSS源文件的更改。
可以从以下菜单访问样式编辑器： 工具> Web开发人员>样式编辑器 。
最终思想
尽管如此，您可能还有其他一些技巧可能对提高Firefox中的Web开发生产力很有用。
这些Firefox插件中包含了许多功能，这里讨论的只是我在Web开发过程中经常使用的一些功能。
您可以在下面的评论框中分享您的想法。
您经常使用哪些功能？
翻译自: https://www.hongkiat.com/blog/firefox-web-development-tools/