知方号

知方号

F12开发人员工具如何使用、抓包、调试代码<审查元素干嘛的>

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

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、第一个区域是请求网址基本的几个参数,分别是请求的

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至lizi9903@foxmail.com举报,一经查实,本站将立刻删除。