Firefox Tool-DevTools

Firefox调试工具-DevTools

编写js代码时，遇到的最大问题之一是调试. 许多开发人员在编写js代码时通常会非常痛苦. 但是，如果我们掌握了相应的调试工具，那么我们就可以轻松解决js的调试问题. 如果工人想把工作做好，就必须先磨刀.

调试工具更好，包括Firefox的firebug，Chrome的内置调试工具也很好（英语版）.

掌握这些调试工具，可以更好地学习js，并大大提高我们完成js故障排除的能力. 因此，我建议使用js的每个人都应该对这些工具有所了解.

Firefox的Firebug一直是我最好的调试工具，但现在Firebug正式宣布暂停Firebug维护. 我们的新版Firefox无法再使用它.

以下是在官方网站上找到的最新版本的Firebug（仅支持Firefox 47）:

虽然很遗憾，但幸运的是Firefox拥有自己的调试工具浏览器调试工具，Firebug团队还建议您可以使用Firefox的DevTools工具.

以下是我总结的使用此工具的一些基本方法.

安装并打开调试工具

下载Firefox（我下载了firefox54）并安装

地址:

打开Firefox浏览器，然后直接按F12键打开此调试工具.

PS: 某些用户安装了Firefox插件，这可能导致F12无效. 您可以在设置中打开它（如下所示）:

查找开发者选项:

点击网络控制台以打开

这时，您可以看到调试工具已打开:

调试工具页面概述

1 Viewer: 您可以看到下面页面的HTML代码，然后选择一个HTML元素以查看其相应的CSS样式（与review element工具结合使用非常好）

2控制台: 我们使用最多的面板之一，您可以自定义我们要查看的高度数据（此处显示了控制台打印的数据）

3调试器: 您可以向js添加调试功能

4个样式编辑器: 查看当前页面的所有样式

5性能: 分析js每次操作的性能

6个内存: 当前页面的一些堆栈内存

7个网络: 查看每个当前请求

对我们来说，更重要的工具是: 查看工具，控制台，网络

现在让我们分别介绍这三个工具的使用:

工具1: 查看工具

点击此查看工具，我们可以查看页面上的所有元素（如下所示使用）:

每个人都特别注意. 在我们看到每个元素的代码样式之后，它具有两个功能:

第一个是查看元素和样式: 如果您的html页面或样式有问题（例如不小心添加了<浏览器调试工具，有些标签忘记关闭，以及许多粗心的问题），则可以在此处直观地查看到（找到它没有问题）.

第二个是修改元素和样式: 可以在下面修改标签和样式，您可以自己尝试. 它还对我们的HTML和CSS开发有直观的帮助（但请注意，此处的修改只是片刻，刷新页面后所做的修改无效）.

工具2: 控制台

控制台对我们来说仍然非常重要. 我们可以选择要查看的控制台部分. 最重要的是用js代码检查控制台的打印情况:

注意: 您可以根据需要打开网络和CSS的数据（单击文本，将选择阴影），并且日志全部打开（日志未打开，并且您无法查看控制台） ）.

控制台应输出对象（JSON对象或DOM对象）. 您也可以使用该工具查看其详细信息. 鼠标可以找到相应的对象，这也是非常有用的功能.

工具3: 网络

网络分为左右两部分

左侧主要显示当前页面上加载的所有资源（例如HTML，CSS，JS，图像等）. 当然，要显示您需要确认哪些资源.

右侧是左侧请求的分析（需要在左侧选择一个请求）.

首先在左侧，我们可以看到选择垃圾桶可以清除信息. 要显示哪些信息，只需单击并选择它，然后提供全部显示供我们查看所有请求.

每个请求都可以查看其状态，请求方法，路径等.

正确的部分对于我们开发的调试非常重要. 如果您知道在开发期间在哪里寻找数据，那么很多次可以帮助我们快速找到相应的错误.

您可以看到请求详细信息（包括请求标头和响应标头）

当前域名的Cookie信息:

请求参数（非常重要，在开发过程中经常需要检查）

响应数据（非常重要，尤其是对于Ajax请求，我们需要查看响应数据）

向所有人介绍了调试工具，并了解了该工具不同面板的用法. 我希望它将对JS的开发有所帮助.

感谢源代码时代的Java主题讲师提供本文！

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/dianqi/article-155139-1.html