开发人员选项怎么打开

F12开发⼈员⼯具如何使⽤、抓包、调试代码

F12开发⼈员⼯具如何使⽤、抓包、调试代码

前⾔

提⽰：这⾥我给⼤家推荐360极速浏览器，这个版本的浏览器F12开发⼈员⼯具很强⼤，⾮常适合抓包和调试js代码，当然了其他的浏览器

也是可以的，功能上基本都是⼀样的，差别不是很⼤。本篇⽂章适合0基础⼩⽩阅读。

提⽰：以下是本篇⽂章正⽂内容，下⾯案例可供参考

⼀、⾸先下载和安装浏览器

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

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

ts：是整个页⾯的dom结构，包含了渲染的元素和内容，这个⼀般⽤来查看dom结构的，可以清晰的看到整个⽹站的H5代码

结构，在以后要讲到的抓包⽅法，dom事件⽅法⾥也会⽤到⼀点，前端开发⼈员⽤的会很多。

e：这个是输出控制台，可以直接写js代码，来调试，⽤的会很多。

s：这个是资源⽂件管理⾯板，⽹站加载时的js，html等代码，还有图⽚等资源都会被加载到这⾥，可以直接查看内容。第⼆

点可以在这⾥新建js⽂件⽤来调试代码，这⾥以后⽤到的会⾮常的多。第三点就是可以使⽤重载的⽅法，进⾏修改js⽂件，达到本地

调试替换js的⽬的，以后在案例⾥⾯也会讲到。

k：这个就是抓包的⾯板，也是查找加密⽅法的⾯板，这个⾯板是最主要使⽤的。下⾯的⽂章将主要来讲这个⾯板。

ation：这个⾯板会存放⽹站加载后的⼀些数据、缓存的存放，例如cookie等。⽤的地⽅不是很多，偶尔会⽤。

⼆、Network⾯板抓包，找包

⾸先network⾯板分为三个块，左边的搜索栏，默认不会开启，按ctrl+f可以打开搜索⾯板，左侧的搜索快和底部的搜索框搜索的内容是差

不多的，底部的搜索框点击左下⽅三个点哪⾥，可以调出来。

右边的区域就是主要的抓包区域了，

1、箭头位置第⼀个，是抓包的开关，红⾊表⽰正在监测，只要有⽹络请求发⽣，包就会被抓取到列到下⽅。再点击⼀下就会停⽌监测。

2、第⼆个位置是清空抓包列表，有时列表太多太杂可以清空后，再去抓包

3、第三个位置点击可以直接打开左侧的搜索⾯板

4、第四个位置是必需要选中的，所有的抓包记录，保留请求⽇志，可以看到跳转前的请求，有的时候页⾯跳转了，之前的数据就清空了，

勾选上之前的数据也会保留

5、第五个位置是禁⽌缓存，浏览器在加载完的时候，会把部分数据存到缓存⾥，下次加载的时候会直接读取缓存实现快速加载，这样很多

数据就不会被重新请求了，抓到的包的数据也不正确，所以必须要勾选

6、后⾯框选的地⽅是过滤⽂件，可以在下⾯只显⽰js⽂件或者图⽚资源⽂件

``

2.如何抓包

随便选择⼀个⽹站，然后打开登录的⾯板，接着打开F12⼯具，打开监测抓包的按钮，默认是开启的，输⼊错误的账号和密码，点击登录，

此时发送账号和密码的数据包就会被抓取出来。

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

数据少也可以挨个点击下看看

发送数据包是post，加上在下⾯的FromData⾥⾯有发送的数据（我们输⼊的账号和密码），所以就可以断定这是我们要找的了，其中分

为五个区域，有的也是四个区域，其中

1、第⼀个区域是请求⽹址基本的⼏个参数，分别是请求的链接，请求的⽅式，返回的状态码，远程地址

2、响应的协议头这个不⽤管

3、请求的协议头，这个很重要，⾥⾯会有⼤量的参数，很多参数也会被加密，再请求时是需要带上这些协议头的。

4、这个是url⾥⾯带的⼏个参数

5、发包的数据，这个是在请求连接时，要带上这些发包数据的，其中很多参数基本都是被加密的。

此时也是可以看到密码是加密的了，解密⽅法可以参考我的其他⽂章。

⾄此，⼀个⽐较简短的抓包⼩教程，就完成了，喜欢这⾏的朋友，可以看看我其他的逆向教程，⼀起学习，共同努⼒。