浏览器开发者⼯具基本使⽤教程
在阅读下⾯内容之前，那么些简单的了解浏览器开发者⼯具到底是什么东西，到底有什么⽤途。
浏览器开发者⼯具到底是什么？
其实简单的说，浏览器开发者⼯具就是给专业的web应⽤和⽹站开发⼈员使⽤的⼯具，当然只要你有兴趣想要了解，只要你对这个世界充满这好奇，什么东西你都可以了解。
开发者⼯具到底有什么⽤？
它的作⽤在于，帮助开发⼈员对⽹页进⾏布局，⽐如HTML+CSS，帮助前端⼯程师更好的调试脚本（JavaScript、jQuery）之类的，还可以使⽤⼯具查看⽹页加载过程，获取⽹页请求（这个过程也叫做抓包），抓包是⾮常有意思的过程，⽽每⼀个浏览器⼚商⽣产出来的浏览器都会有⾃⼰的杀⼿锏，也就是功能上的差别，那么这个时候你就⼀个最适合⾃⼰的浏览器使⽤就可以，接下来就是介绍我常⽤的三个浏览器。
⼀、⾕歌浏览器chrom
⼀般在windows系统上浏览器开发者⼯具打开都是按F12快捷键，但是今天我是⽤mac进⾏讲解的。
jquery是什么有什么作用
那么上⾯的这张图就是打开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标签：这个就是我们上⾯讲的请求时间
那么后⾯的⼏个标签也不是很常⽤，我就不做过多的说明，现在简单的了解这些基本的⼊门使⽤知识就基本够⽤，我相信这些功能都⽤熟之后你也会知道其他的功能的。
⼆、⽕狐浏览器FireFox
通过⾕歌浏览器的认识那么我们就很简单的使⽤⽕狐咯，其实在mac上我是⾮常喜欢⽕狐的，因为功能是⾮常的强⼤。
现在只讲⽕狐和⾕歌浏览器的区别：
⽕狐浏览器的打开⽅式，这⾥我们选择Web控制台，当然你可以打开没⼀个试试，试试总是没有错的对吧，我不经意的打开了WebIDE简直就是惊呆我了，这个直接就是⼀个写前端的神奇没有什么好说的咯。你也可以打开试试，每⼀个都可以试试，这些功能真的很强⼤。
当打开之后，我们会发现，⽕狐真的给⼈眼前⼀亮的赶脚

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。