浏览器开发者工具基本使用教程

浏览器开发者工具基本使用教程

---

在阅读下面内容以前，那么些简单的了解浏览器开发者工具究竟是什么东西，到底有什么用途。

浏览器开发者工具究竟是什么？

其实简单的说，浏览器开发者工具就是给专业的web应用和网站开发人员使用的工具，固然只要你有兴趣想要了解，只要你对这个世界充满这好奇，什么东西你均可以了解。

开发者工具到底有什么用？

它的做用在于，帮助开发人员对网页进行布局，好比HTML+CSS，帮助前端工程师更好的调试脚本（JavaScript、jQuery）之类的，还可使用工具查看网页加载过程，获取网页请求（这个过程也叫作抓包），抓包是很是有意思的过程，而每个浏览器厂商生产出来的浏览器都会有本身的杀手锏，也就是功能上的差异，那么这个时候你就找一个最适合本身的浏览器使用就能够，接下来就是介绍我经常使用的三个浏览器。

1、谷歌浏览器chrom

通常在windows系统上浏览器开发者工具打开都是按F12快捷键，可是今天我是用mac进行讲解的。



那么上面的这张图就是打开chrom浏览器工具的方式，也能够经过快捷键打开



上面这张图就是打开chrom开发者工具以后的样子，如今简单的介绍：

第一个框：是用于屏幕适配的，也就是传说中的chrom可以调试各类移动设备的屏幕分辨率。



上面这张图就是点击以后的效果，用于移动设备屏幕适配的功能

Element标签：该标签使用来查看页面的HTML标签元素的，可以也就是查看源码，咱们能够看到布局，能够看到用到的样式，还有用到的连接等等。

console标签：这个就是一个web控制台

sources标签：这个是显示资源文件的



1.该选择框使用来选择资源的，当网页被加载的时候向服务器端请求出来的文件包括.html .ccs .js这样的文件。
2.这个地方使用来调试js代码的地方，这个很是重要，看到行号上面有蓝色的标签，这个标签就是断电，当咱们须要调试程序的时候打一个断电，而后经过3这个工具栏进行调试，那么调试过程就不详细解释，也就是打一个断电而后刷新页面程序会调到你打断点的地方，而后经过4来查看程序中变量的值什么的。
3.中的标签，第一个是中止状态的按钮就是表示程序是否中止（在debug时），后面的是程序继续跳过方法，跳过下一个语句，调到上一个语句。

Network标签：这个就是抓包经常使用的工具



那么这个页面就是用于抓包的页面，咱们须要分析页面的请求，好比模拟登录什么的都须要去分析程序是怎么在后台执行的，接下来就，咱们能够看到Headers（请求消息头） Preview（预览） Response（响应） Timing（求求时间）Cookie这些东西

最上面还有一个工具栏，有一个红色的圆点和静止符号的按钮，那么这两个按钮，当为红色按钮的时候表示当前的请求不被清空（可是这里的请求是不跳转页面的请求，当跳转到新的页面，那么也会请求也会被清空），后面这个按钮就是清空请求的。

下面还有一行工具栏，这个工具栏主要是用来选择和过滤请求消息的。

再下面能够看到时间线，这个就是记录一个请求开始到结束的时间。

注意：当你须要请求到另外一个页面的时候都不清空你的请求的时候须要勾选上Preserve log，同时让红色按钮显示红色

TimeLiness标签：这个就是咱们上面讲的请求时间

那么后面的几个标签也不是很经常使用，我就不作过多的说明，如今简单的了解这些基本的入门使用知识就基本够用，我相信这些功能都用熟以后你也会知道其余的功能的。

2、火狐浏览器FireFox

经过谷歌浏览器的认识那么咱们就很简单的使用火狐咯，其实在mac上我是很是喜欢火狐的，由于功能是很是的强大。

如今只讲火狐和谷歌浏览器的区别：



火狐浏览器的打开方式，这里咱们选择Web控制台，固然你能够打开没一个试试，试试老是没有错的对吧，我不经意的打开了WebIDE简直就是惊呆我了，这个直接就是一个写前端的神奇没有什么好说的咯。你也能够打开试试，每个均可以试试，这些功能真的很强大。

当打开以后，咱们会发现，火狐真的给人眼前一亮的赶脚



看吧，是否是有一种眼前一亮的赶脚，反正我是有的（固然了你第一次打开的话坑定和个人不同了，我这个是设置主题以后的效果，你也能够去设置咯）

看看，和chrom没有什么不一样吧，都是那几个，并且人家是中文的，对一些看到English就发晕的同窗简直是不能太有爱

功能上没什么区别，可是在我抓包的过程当中发现，火狐抓包的能力真的强，我本身开始是用谷歌如今我选择使用火狐更多

那么就简单的介绍不一样的地方



你们能够看上图，我以为这个就是我不用深刻研究就能知道的最大区别啦：

一、看到没有，这里列出的消息头 Cookie 响应什么的一个都很多，并且人家多了参数 安全性
参数这个就不用多说了，在咱们抓包分析的过程当中参数绝对是很是重要的内容，因此可以直接给你展现出来，能够给你减小去分析参数的过程，那么安全性呢，不言而喻了吧。

二、咱们再来看，编辑和重发 原始头 可以模拟请求，简直碉堡啦，有没有，喜欢到爆，谷歌固然也能够有，可是好像是要装插件的。

好啦，还有不少不一样，可是我说啦，只要你掌握了上面所讲的这些东西，我相信你去研究其余的功能都会是小菜一碟咯。

那么咱们来看看设置里面给咱们提供了那些自定义功能，这个也是很是强大的功能哦



当点击图中1按钮（设置按钮）后将出现一个神奇的地方，就是这里面，这里面也有不少功能啦，能够一个一个勾选上去体验吧孩子。

注意：看到图中2没有，这个勾选上有什么做用，和Chrom中的Preserve log是一个做用，当你请求道要挑传的页面的时候如不勾选上那么你的请求会被清空，勾选上了那么就不会被清空，这样更加有力你分析问题咯。

3、Safari浏览器

Safari的开发者工具呢也很不错，可是从功能上我以为是不可以知足我心里强大欲望的，so，我通常上网用Safari，开发调试用上面两种，上网用Safari真的是方便并且简洁。

好了简单的放上几张图让你们感觉吧：



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



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



看吧这就是调试代码的地方，功能上没有什么不一样，可是感受很规范，很简洁，很友好。

若是你是入门，我相信这些已经够啦，当你熟练运用了这些功能以后我相信你本身去研究就很是容易啦

记录学习的每一步，记录每一次的成长！！！！