F12开发人员工具如何使用、抓包、调试代码

前言

提示：这里我给大家推荐360极速浏览器，这个版本的浏览器F12开发人员工具很强大，非常适合抓包和调试js代码，当然了其他的浏览器也是可以的，功能上基本都是一样的，差别不是很大。本篇文章适合0基础小白阅读。

提示：以下是本篇文章正文内容，下面案例可供参考

一、首先下载和安装浏览器

.下载安装完成后，打开浏览器，按快捷键F12或者FN+F12打开开发人员工具

打开后可以看到有很多的选项卡，虽然都是英文的但是不影响我们的操作，背过就好了，经常用到的是箭头标出的。

1. Elements：是整个页面的dom结构，包含了渲染的元素和内容，这个一般用来查看dom结构的，可以清晰的看到整个网站的H5代码结构，在以后要讲到的抓包方法，dom事件方法里也会用到一点，前端开发人员用的会很多。
2. Console：这个是输出控制台，可以直接写js代码，来调试，用的会很多。
3. Sources：这个是资源文件管理面板，网站加载时的js，html等代码，还有图片等资源都会被加载到这里，可以直接查看内容。 第二点 可以在这里新建js文件用来调试代码，这里以后用到的会非常的多。第三点就是可以使用重载的方法，进行修改js文件，达到本地调试替换js的目的，以后在案例里面也会讲到。
4. Network：这个就是抓包的面板，也是查找加密方法的面板，这个面板是最主要使用的。下面的文章将主要来讲这个面板。
5. Application：这个面板会存放网站加载后的一些数据、缓存的存放，例如cookie等。用的地方不是很多，偶尔会用。

二、Network面板抓包，找包

首先network面板分为三个块，左边的搜索栏，默认不会开启，按ctrl+f可以打开搜索面板，左侧的搜索快和底部的搜索框搜索的内容是差不多的，底部的搜索框点击左下方 三个点 哪里，可以调出来。

右边的区域就是主要的抓包区域了，
1、箭头位置第一个，是抓包的开关，红色表示正在监测，只要有网络请求发生，包就会被抓取到列到下方。再点击一下就会停止监测。
2、第二个位置是清空抓包列表，有时列表太多太杂可以清空后，再去抓包
3、第三个位置点击可以直接打开左侧的搜索面板
4、第四个位置是必需要选中的，所有的抓包记录，保留请求日志，可以看到跳转前的请求，有的时候页面跳转了，之前的数据就清空了，勾选上之前的数据也会保留
5、第五个位置是禁止缓存，浏览器在加载完的时候，会把部分数据存到缓存里，下次加载的时候会直接读取缓存实现快速加载，这样很多数据就不会被重新请求了，抓到的包的数据也不正确，所以必须要勾选
6、后面框选的地方是过滤文件，可以在下面只显示js文件或者图片资源文件
``

2.如何抓包

随便选择一个网站，然后打开登录的面板，接着打开F12工具，打开监测抓包的按钮，默认是开启的，输入错误的账号和密码，点击登录，此时发送账号和密码的数据包就会被抓取出来。

此时会看到有很多条请求数据，那么那条才是我们要找的发包数据呢，现在点击的是登录按钮，是所以肯定是有login字眼的，如果请求的数据少也可以挨个点击下看看

发送数据包是post，加上在下面的From Data里面有发送的数据（我们输入的账号和密码），所以就可以断定这是我们要找的了，其中分为五个区域，有的也是四个区域，其中
1、第一个区域是请求网址基本的几个参数，分别是请求的链接，请求的方式，返回的状态码，远程地址
2、响应的协议头 这个不用管
3、请求的协议头，这个很重要，里面会有大量的参数，很多参数也会被加密，再请求时是需要带上这些协议头的。
4、这个是url里面带的几个参数
5、发包的数据，这个是在请求连接时，要带上这些发包数据的，其中很多参数基本都是被加密的。
此时也是可以看到密码是加密的了，解密方法可以参考我的其他文章。