Charles & chrome inspect & H5开发调试

·  阅读 91

chrome inspect

  1. 数据线链接电脑
  2. 电脑打开链接 chrome://inspect/#devices会看到如下界面

如果Remote Target这块没有出现手机的链接,需要在手机上打开开发者模式 自行搜索各品牌打开开发者模式方法。

  1. 点击inspect 打开新窗口 可以抓取请求和调试DOM

vconsole

注意版本要高一些的 "vconsole": "^3.10.1",

Charles

安装

安装https证书

  • 在 Charles 中,转到 Help 菜单并选择“SSL Proxying > Install Charles Root Certificate”。钥匙串访问将打开。找到“Charles Proxy...”条目,然后双击以获取相关信息。展开“信任”部分,并在“使用此证书时”旁边将其从“使用系统默认值”更改为“始终信任”。然后关闭证书信息窗口,系统将提示您输入管理员密码以更新系统信任设置。

  • 选择信任

手机安装https证书

  • 搜索不同手机品牌安装证书教程

开启https模式

常用技巧

1、抓取mac的请求开关

map remote

  • Map Remote适用场景

如果测试时涉及到服务端,而且服务端不能加白名单,这个时候就需要利用Map Remote,要开发提供服务器的ip和端口,直接向机器发送请求。一般开发会用自己的电脑当作服务器,直接访问本地机器。

  • Map Remote使用方法

1、先通过删选接口找到请求

2、找到请求右击,选择map remote settings

3、通过右键请求进入的map编辑页面,map from一般会自动填写。端口路径之类的可以不用填写,以防出错。

如上图:手机连接 Charles后 访问的页面就是 开发者本地的。

map local

第一步:先利用charles抓取数据

第二步:利用filter查询,快速找到相应的接口(command+f)

第三步:save/copy response 直接保存json文件或者复制新建一份 .json文件

第四步:更改参数值

第五步:选择文件,右键map local —— add 一份 location —— map from编辑好协议、域名、路径即可—— map to 选择第三步保存好的文件路径

Charles 主要提供两种查看封包的视图,分别名为 Structure 和 Sequence。

  • Structure: 此视图将网络请求按访问的域名分类。

  • Sequence: 此视图将网络请求按访问的时间排序。

Compose功能

Compose功能是在原有的请求基础上进行修改。在进行接口测试时,临时需要修改请求参数、参数值或者 Header 等等。

使用方法

  1. 找到需要修改参数的链接,右键选择Compose

Breakpoints

1、选择你要设置断点的接口

2、点击上方图标

可以编辑响应体,最后执行 Execute

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改