前端开发神器Charles从入门到卸载

胡哥有话说 等级 557 0 0

前言

本文将带大家学习使用前端开发神器-charles,从基本的下载安装到常见配置使用,为大家一一讲解。

一、花式夸奖Charles

  • 截取 Http 和 Https 网络封包。
  • 支持重发网络请求,方便后端调试。
  • 支持修改网络请求参数。
  • 支持网络请求的截获并动态修改。
  • 支持模拟慢速网络。

好,骑上我心爱的小摩托,准备上路...

二、下载与安装

官网下载传送门

本文所使用的的版本为 mac V4.5.6版本,不同版本间的具体化差异,大家可留言交流。

Charles PoJie工具可通过关注公众号「胡哥有话说」,回复关键字charles获得。

三、简单入门-抓包所有请求

  1. 打开Charles,勾选Proxy下的macOS Proxy(如果是windows,此处为Windows Proxy)
  2. 点击Proxy->Start Recording,打开浏览器访问任意页面,可以在Charles中看到请求了。 前端开发神器Charles从入门到卸载

很好,现在已经上路了,学习的路上永不堵车...

四、设置过滤请求

通过上面的操作,我们已经抓包了所有的请求,实际开发中可能是专门针对某些接口(如百度域名下的接口),我们可以专门配置过滤接口。

  1. 临时性过滤配置

    在展示界面的Filter中可进行条件过滤 前端开发神器Charles从入门到卸载

    同时可在右侧的settings中配置使用正则来进行过滤

  2. 永久性过滤配置

    通过Proxy->Recording Settings->include中配置过滤条件 前端开发神器Charles从入门到卸载

Ok,我们又前进了一大步

五、代理转发请求

通过CharlesMap RemoteMap Local我们也可以配置代理转发请求。

Map Remote

Map Remote 远程映射,是将指定的网络请求重定向到另一个网址

业务场景: 某些服务端的文件请求时限制某些特定域名(*.baidu.com),我们使用localhost启动项目时,会导致没有权限访问。通过配置Map Remote远程映射解决问题。

配置路径: 设置Tools->Map Remote

前端开发神器Charles从入门到卸载 前端开发神器Charles从入门到卸载

如图上的配置,本地启动的项目地址为:http://localhost:8080(或 http://127.0.0.1:8080),现在再访问,可以使用路径 http://test.baidu.com访问即可。

注意Enable Map Remote一定要勾选,以及相应规则也要勾选,否则不会生效

Map Local

Map Local 本地映射,是指将指定的网络请求重定向到本地的文件

业务场景: 在本地化的开发中,接口数据Mock;或者是线上环境问题排查时,将请求重定向到本地文件以方便排查。

配置路径: 设置Tools->Map Local

前端开发神器Charles从入门到卸载 前端开发神器Charles从入门到卸载

通过如上图的配置,请求 aa.baidu.com:443/index时,会被映射到本地 /xx/index.json

注意Enable Map Local一定要勾选,以及相关规则也要勾选,否则不会生效。

六、手机抓包

手机抓包请求也是我们日常开发中需要用到的,那如何利用Charles抓包手机请求呢。

  1. 设置Charles的代理端口号 通过设置Proxy->Proxy Settings->Proxies->HTTP Proxy下的Port端口号

    前端开发神器Charles从入门到卸载

  2. 查看本地IP地址 通过CharlesHelp->Local IP Address查看,本机IP为xx.xx.xx.xx

    前端开发神器Charles从入门到卸载

  1. 手机和电脑需要处于同于wifi网络内

  2. 手机wifi网络配置

    以华为mate 30为例,选择对应的wifi,选择显示高级选项,设置代理为手动。 设置服务器主机名为:xx.xx.xx.xx(刚才查看的电脑IP) 设置服务器端口为:8888(刚才设置的port) 点击保存后,手机的请求就可以在Charles中查看啦... 前端开发神器Charles从入门到卸载

    注意链接时,Charles会弹出授权窗口,要选择Allow

    前端开发神器Charles从入门到卸载

七、限速设置

通过设置Proxy->Throttle Settings来进行速度限制 前端开发神器Charles从入门到卸载

注意:一定要勾选 Enable Throttling选项

小结

以上是给大家分享的Charles的常见使用配置,如有相关问题可留言交流。

后记

以上就是胡哥今天给大家分享的内容,喜欢的小伙伴记得点赞收藏呀,关注胡哥有话说,学习前端不迷路,欢迎多多留言交流...

胡哥有话说,专注于大前端技术领域,分享前端系统架构,框架实现原理,最新最高效的技术实践!

收藏
评论区

相关推荐

Linux 网络分析必备技能:tcpdump 实战详解
大家好,我是肖邦,这是我的第 11 篇原创文章。 今天要分享的是 tcpdump,它是 Linux 系统中特别有用的网络工具,通常用于故障诊断、网络分析,功能非常的强
从 PHP 转到 Java
前言 最近主要编程语言从 PHP 转到了 Java。这一个多月的经历对我很有意义,所以写文章记录一下。 编程语言各有侧重,它们之间的比较没什么意义,所以本文只写一下我对两种语言的看法,以及我转到另一种语言的经历,再分享一下最近学习 Java 的心得体会。 文章欢迎转载,请尊重作者劳动成果,带上原文链接:http://www.cnblogs
前端开发神器Charles从入门到卸载
前言 本文将带大家学习使用前端开发神器charles,从基本的下载安装到常见配置使用,为大家一一讲解。 一、花式夸奖Charles 截取 Http 和 Https 网络封包。 支持重发网络请求,方便后端调试。 支持修改网络请求参数。 支持网络请求的截获并动态修改。 支持模拟慢速网络。 好,骑上我心爱的小摩托,准备上路... 二、下载
爬虫入门经典(二十三) | fiddler抓包爬取QQ音乐
大家好,我是不温卜火,是一名计算机学院大数据专业大三的学生,昵称来源于成语—不温不火,本意是希望自己性情温和。作为一名互联网行业的小白,博主写博客一方面是为了记录自己的学习过程,另一方面是总结自己所犯的错误希望能够帮助到很多和自己一样处于起步阶段的萌新。但由于水平有限,博客中难免会有一些错误出现,有纰漏之处恳请各位大佬不吝赐教!暂时只在csdn这一个平台进行
收藏!52个实用的数据可视化工具!
(https://imghelloworld.osscnbeijing.aliyuncs.com/7eb12e08a15ea8f07553d6fa730c8d48.png) 来源丨原力大数据 大家好,我是小五🐶 从数据获得信息的最佳方式之一是,通过视觉化方式,快速抓住要点信息。另外,通过视觉化呈现数据,也揭示了令人惊奇的
JavaScript 是什么?
前言 引用《JavaScript 高级程序设计第四版》中说的话 ——“从简单的输入验证脚本到强大的编程语言,JavaScript 的崛起没有任何人预测到。它很简单,学会用只要几分钟;它又很复杂,掌握它要很多年。要真正学好用好 JavaScript,理解其本质、历史及局限性是非常重要的”。 面试官:JavaScript 是什么? 我:
易班自动刷网薪系统
写在前面 Python 课最后的大作业,跟大哥们一起写这个小玩意,因为学院好像很喜欢刷这些东西,总体来说挺简单的 分到我的模块刚刚好需要手机抓包,网页端易班登陆进去没有发动态的模块了,模块在维护 后续会更新其他人的板块并尝试做出来真正的模拟登陆(逆向app或者使用appium提取loginToken) 源码python coding: utf8 """@T
Webpack学习整理集锦【从最基础的demo入手,自己实现一个脚手架 】
前言本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。开源网址https://github.com/maomi
重学JavaScript(函数)闭包
序言学习JavaScript切勿好高骛远。正所谓贪多嚼不烂,前端标准和工具这几年的飞速发展,以及不时冒出的“新鲜玩意”让众多前端从业者惊呼:“学不动啦学不动啦!学习速度跟不上技术发展速度!我感到手忙脚乱、力不从心……"如果你有以上“症状”,请勿着急,这不过是你内心不安造成的。你为何追新?你又何苦追新?在根基不牢的情况下,就算盖楼盖到18层,再往上堆一块砖,都
终于找到YOUR专属IPv4的“门”
IPv4,英文Internet Protocol version 4;即互联网通信协议第四版,是网际协议开发过程中的第四个修订版本,也是此协议第一个被广泛部署的版本。我们经常看到部分IP地址或者IP段专属于某些单位、企业,如xx市政府、 xx大学、xx研究院。如图所示图片来源:www.ipuu.net/www.ipplus360.com那么这些单位是如何获取
肝了三天,万字长文教你玩转 tcpdump,从此抓包不用愁
系列导读 本文是 【网络知识扫盲】专栏的第三篇。今天要给大家介绍的一个 Unix 下的一个 网络数据采集分析工具 \ Tcpdump,也就是我们常说的抓包工具。与它功能类似的工具有 wireshark ,不同的是,wireshark 有图形化界面,而 tcpdump 则只有命令行。由于我本人更习惯使用命令行的方式进行抓包,因此今天先跳过
小红书很难爬?最新爬取方法教给你啦~
Python进击者第184篇原创文章前言大家好,我是Kuls。之前写的那篇App抓包软件charles的配置说过,超过30在看,马上更下一篇。所以加班加点给大家写了今天这篇文章。本文将会带着大家完完整整的爬取小红书的全过程 小红书需要做的前提工作就是装配好mitmproxy具体的配置过程,我建议大家参照崔大写的来进行安装https://zhuanlan.z
有读者问我怎么爬App,我手把手教了他(多图警告)
前言大家好,我是Kuls。最近看见很多读者在说怎么抓取APP上的内容为此,我打算写一些关于爬取APP方面的文章,当然APP的爬取自然是要比网页要麻烦。但是只要我们把前期的工作做好,后面也会更加的顺利。今天这篇文章就是来教大家如何抓取到APP数据,用什么软件,怎么配置?Charles首先,我们来看看百度百科是怎么介绍这款软件的 是一个HTTP代理服务器,HTT
一篇文章教会你使用Python定时抓取微博评论
【Part1——理论篇】 试想一个问题,如果我们要抓取某个微博大V微博的评论数据,应该怎么实现呢?最简单的做法就是找到微博评论数据接口,然后通过改变参数来获取最新数据并保存。首先从微博api寻找抓取评论的接口,如下图所示。 但是很不幸,该接口频率受限,抓不了几次就被禁了,还没有开始起飞,就凉凉了。 接下来小编又选择微博的移动端网站,先登录,然后找到我们想要抓
爬虫进阶 - 前后端分离有什么了不起,过程超详细
这是一个详细的爬虫进阶教程,里面包含了很详细的思考和试错过程,如果你对学爬虫是认真的,建议认真看。 我们要抓取下面这个网站上的所有图书列表: https://www.epubit.com/books 1) 探索研究 创建一个新的python文件,写入如下代码:import requests url  'https://www.epubit.com/boo