F12开发人员工具如何使用、抓包、调试代码
前言
提示:这里我给大家推荐360极速浏览器,这个版本的浏览器F12开发人员工具很强大,非常适合抓包和调试js代码,当然了其他的浏览器也是可以的,功能上基本都是一样的,差别不是很大。本篇文章适合0基础小白阅读。
提示:以下是本篇文章正文内容,下面案例可供参考
一、首先下载和安装浏览器
.下载安装完成后,打开浏览器,按快捷键F12或者FN+F12打开开发人员工具
打开后可以看到有很多的选项卡,虽然都是英文的但是不影响我们的操作,背过就好了,经常用到的是箭头标出的。
- Elements:是整个页面的dom结构,包含了渲染的元素和内容,这个一般用来查看dom结构的,可以清晰的看到整个网站的H5代码结构,在以后要讲到的抓包方法,dom事件方法里也会用到一点,前端开发人员用的会很多。
- Console:这个是输出控制台,可以直接写js代码,来调试,用的会很多。
- Sources:这个是资源文件管理面板,网站加载时的js,html等代码,还有图片等资源都会被加载到这里,可以直接查看内容。 第二点 可以在这里新建js文件用来调试代码,这里以后用到的会非常的多。第三点就是可以使用重载的方法,进行修改js文件,达到本地调试替换js的目的,以后在案例里面也会讲到。
- Network:这个就是抓包的面板,也是查找加密方法的面板,这个面板是最主要使用的。下面的文章将主要来讲这个面板。
- 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、发包的数据,这个是在请求连接时,要带上这些发包数据的,其中很多参数基本都是被加密的。
此时也是可以看到密码是加密的了,解密方法可以参考我的其他文章。