在阅读浏览器开发人员工具基本教程以下内容之前，请简要了解浏览器开发人员工具是什么和有什么用途。
什么是开发人员工具？ 其实简单来说，浏览器开发人员工具是专门的web APP应用和网站开发人员的工具。 当然，如果有兴趣的话我想知道。 只要你对这个世界抱有好奇心，你就能知道任何东西。
开发人员工具到底有什么用？ 其作用是帮助开发人员布局网页，如HTML CSS。 前端工程师支持更好的调试脚本(JavaScript、jQuery )等。 此外，还可以使用工具查看网页加载过程并检索网页请求)。 这个过程也称为scrum。 scrum是一个非常有趣的过程，每个浏览器制造商制作的浏览器都有自己的杀手锏
另一方面，谷歌浏览器chrom一般在windows系统上打开浏览器开发工具时按F12快捷键，今天在mac上进行说明。
上图是打开chrom浏览器工具的方法，也可以使用快捷键打开
上图是打开chrom开发人员工具后的情况。 现在简单介绍一下：
第一个框：用于屏幕匹配。 也就是说，传说中的chrom可以调整各种移动设备的屏幕分辨率。
上图是点击后的效果，用于移动设备的画面匹配功能
Element标记：此标记用于显示页面的HTML标记元素。 也就是说，可以显示源代码。 可以查看布局、使用的样式、使用的链接等。
控制台选项卡：这就是web控制台
sources标记：这是显示资源文件的
1 .此选择框用于选择资源，加载网页时服务器端请求的文件包含类似. html .ccs .js的文件。
2 .此位置是用于调试js代码的位置。 这非常重要。 行号上面有蓝色的标签。 这个标签关闭了电源。 需要调试程序时关闭电源，然后使用名为3的工具栏进行调试。 也就是说，关闭电源更新页面程序后，会移动到中断点的位置，在4中确认程序中的变量值。
在3 .的选项卡中，第一个处于停止状态的按钮指示程序是否已停止，然后程序继续跳过方法，跳过下一个语句并移动到上一个语句。
Network标签：这是抓包的常用工具
那么，这个页面是用于抓取包的页面。 需要分析页面的请求。 例如，登录模拟等需要分析程序是如何在后台运行的。 接下来，可以看到名为“Headers (请求标头预览)响应(定时)时间请求(Cookie )”
顶部是一个工具栏，其中有红点和静止符号按钮。 对于红色按钮，这两个按钮表示当前请求未为空(但是，此处的请求是不跳转到页面的请求，如果跳转到新页面，请求也将为空)。
还有以下几行工具栏： 此工具栏主要用于选择和过滤请求消息。
可以看到时间线。 这将记录请求从开始到结束的时间。
注：如果孤独的储物柜需要向另一个页面请求，而您的请求不为空，则必须选中Preserve log，使红色按钮显示红色的TimeLiness标记。 这是我们上述要求的时间
那么，后面的几个标签也不太常用，所以不太说明。 现在，简单理解这些基本的入门使用知识就基本上足够了。 如果你熟练使用所有这些功能，你应该也知道其他功能。
二、火狐浏览器福克斯是通过谷歌浏览器识别的，所以我们很容易就用火狐哦。 其实在mac上我很喜欢火狐。 因为功能非常强大。
现在我只说火狐和谷歌浏览器的区别：
火狐浏览器的打开方式，这里选择Web控制台。 当然，一个也打开看看。 试试也没错吧。 我不小心打开了WebIDE，吓了一跳。 这是直接写前端的不可思议。 请打开看看。 每一个都请试试。 这些功能真的很强大。
打开一看，就知道火狐真的在眼前开着灯
你看，不是有眼前的大买卖吗？ 反正我有。 (当然，如果你第一次打开，洞一定和我的不一样。 我的这是设置主题后的效果。 你也可以设置哦。 ）
看吧，和chrom没什么区别吧。 大家都是那些人。 而且，人是中文。 我不太爱看到English就晕过去的同学
虽然功能上差别不大，但在抓包过程中发现火狐抓包的能力真的很强。 我自己开始使用谷歌，所以现在决定多使用火狐
那么简单介绍一下不同的地方
大家可以看到图。 我认为这是我不用深入研究就能知道的最大区别。
1、你看过吗？ 这里列举的消息头的Cookie响应等也不少。 而且，有很多人参加
数 安全性参数这个就不用多说了，在我们抓包分析的过程中参数绝对是非常重要的内容，所以能够直接给你展示出来，可以给你减少去分析参数的过程，那么安全性呢，不言而喻了吧。
2、我们再来看，编辑和重发 原始头 能够模拟请求，简直碉堡啦，有没有，喜欢到爆，谷歌当然也可以有，但是好像是要装插件的。
好啦，还有很多不同，但是我说啦，只要你掌握了上面所讲的这些东西，我相信你去研究其他的功能都会是小菜一碟咯。
那么我们来看看设置里面给我们提供了那些自定义功能，这个也是非常强大的功能哦

当点击图中1按钮（设置按钮）后将出现一个神奇的地方，就是这里面，这里面也有很多功能啦，可以一个一个勾选上去体验吧孩子。
注意：看到图中2没有，这个勾选上有什么作用，和Chrom中的Preserve log是一个作用，孤独的柜子请求道要挑传的页面的时候如不勾选上那么你的请求会被清空，勾选上了那么就不会被清空，这样更加有力你分析问题咯。 三、Safari浏览器Safari的开发者工具呢也很不错，但是从功能上我觉得是不能够满足我内心强大欲望的，so，我一般上网用Safari，开发调试用上面两种，上网用Safari真的是方便而且简洁。
好了简单的放上几张图让大家感受吧：

这个呢就是打开Safari开发者工具的方式，在顶部菜单栏下面开发者标签中打开显示错误控制台就可以看到下面的场景咯

上面是打开网络这个标签的，我们可以看到该有的功能是一个都没少，而且我觉得非常简洁，说真的我如果不是一个开发者，我会爱死这样的一个浏览器，简洁大方，并且用户体验非常好，没有杂七杂八的功能。
想起一句话：好的产品不是还能不能扩展，而是做到没有办法再精简。

看吧这就是调试代码的地方，功能上没有什么不同，但是感觉很规范，很简洁，很友好。
如果你是入门，我相信这些已经够啦，孤独的柜子熟练运用了这些功能之后我相信你自己去研究就非常容易啦记录学习的每一步，记录每一次的成长！！！！
转载于:https://www.cnblogs.com/mojita/p/5769350.html