小鹰博士 發表於 2020-6-28 06:52:00

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

<h2 id="前言">前言</h2>
<p>本文将带大家学习使用前端开发神器-<code>charles</code>，从基本的下载安装到常见配置使用，为大家一一讲解。</p>
<h2 id="一花式夸奖charles">一、花式夸奖Charles</h2>
<ul>
<li>截取 Http 和 Https 网络封包。</li>
<li>支持重发网络请求，方便后端调试。</li>
<li>支持修改网络请求参数。</li>
<li>支持网络请求的截获并动态修改。</li>
<li>支持模拟慢速网络。</li>
</ul>
<blockquote>
<p>好，骑上我心爱的小摩托，准备上路...</p>
</blockquote>
<h2 id="二下载与安装">二、下载与安装</h2>
<p>官网下载传送门</p>
<blockquote>
<p>本文所使用的的版本为 mac V4.5.6版本，不同版本间的具体化差异，大家可留言交流。</p>
</blockquote>
<blockquote>
<p>Charles破解工具可通过关注公众号「胡哥有话说」，回复关键字<code>charles</code>获得。</p>
</blockquote>
<h2 id="三简单入门-抓包所有请求">三、简单入门-抓包所有请求</h2>
<ol>
<li>打开<code>Charles</code>，勾选<code>Proxy</code>下的<code>macOS Proxy</code>（如果是windows，此处为Windows Proxy）</li>
<li>点击<code>Proxy</code>-&gt;<code>Start Recording</code>，打开浏览器访问任意页面，可以在<code>Charles</code>中看到请求了。<br>
<img src="https://img2020.cnblogs.com/other/1103694/202006/1103694-20200628065200493-96323728.jpg"></li>
</ol>
<blockquote>
<p>很好，现在已经上路了，学习的路上永不堵车...</p>
</blockquote>
<h2 id="四设置过滤请求">四、设置过滤请求</h2>
<p>通过上面的操作，我们已经抓包了所有的请求，实际开发中可能是专门针对某些接口（如百度域名下的接口），我们可以专门配置过滤接口。</p>
<ol>
<li>
<p>临时性过滤配置</p>
<p>在展示界面的<code>Filter</code>中可进行条件过滤<br>
<img src="https://img2020.cnblogs.com/other/1103694/202006/1103694-20200628065200836-2145652095.jpg"></p>
<blockquote>
<p>同时可在右侧的<code>settings</code>中配置使用正则来进行过滤</p>
</blockquote>
</li>
<li>
<p>永久性过滤配置</p>
<p>通过<code>Proxy</code>-&gt;<code>Recording Settings</code>-&gt;<code>include</code>中配置过滤条件<br>
<img src="https://img2020.cnblogs.com/other/1103694/202006/1103694-20200628065201258-1579602663.jpg"></p>
</li>
</ol>
<blockquote>
<p>Ok，我们又前进了一大步</p>
</blockquote>
<h2 id="五代理转发请求">五、代理转发请求</h2>
<p>通过<code>Charles</code>的<code>Map Remote</code>和<code>Map Local</code>我们也可以配置代理转发请求。</p>
<h3 id="map-remote">Map Remote</h3>
<blockquote>
<p>Map Remote 远程映射，是将指定的网络请求重定向到另一个网址</p>
</blockquote>
<p><strong>业务场景：</strong><br>
某些服务端的文件请求时限制某些特定域名(*.baidu.com)，我们使用localhost启动项目时,会导致没有权限访问。通过配置<code>Map Remote</code>远程映射解决问题。</p>
<p><strong>配置路径：</strong><br>
设置<code>Tools</code>-&gt;<code>Map Remote</code></p>
<p><img src="https://img2020.cnblogs.com/other/1103694/202006/1103694-20200628065201545-1847158413.jpg"><br>
<img src="https://img2020.cnblogs.com/other/1103694/202006/1103694-20200628065201746-746642626.jpg"></p>
<p>如图上的配置，本地启动的项目地址为：<code>http://localhost:8080</code>（或 <code>http://127.0.0.1:8080</code>），现在再访问，可以使用路径 <code>http://test.baidu.com</code>访问即可。</p>
<blockquote>
<p>注意<code>Enable Map Remote</code>一定要勾选，以及相应规则也要勾选，否则不会生效</p>
</blockquote>
<h3 id="map-local">Map Local</h3>
<blockquote>
<p>Map Local 本地映射，是指将指定的网络请求重定向到本地的文件</p>
</blockquote>
<p><strong>业务场景：</strong><br>
在本地化的开发中，接口数据Mock；或者是线上环境问题排查时，将请求重定向到本地文件以方便排查。</p>
<p><strong>配置路径：</strong><br>
设置<code>Tools</code>-&gt;<code>Map Local</code></p>
<p><img src="https://img2020.cnblogs.com/other/1103694/202006/1103694-20200628065202053-1932582399.jpg"><br>
<img src="https://img2020.cnblogs.com/other/1103694/202006/1103694-20200628065202275-604405120.jpg"></p>
<p>通过如上图的配置，请求 <code>aa.baidu.com:443/index</code>时，会被映射到本地 <code>/xx/index.json</code></p>
<blockquote>
<p>注意<code>Enable Map Local</code>一定要勾选，以及相关规则也要勾选，否则不会生效。</p>
</blockquote>
<h2 id="六手机抓包">六、手机抓包</h2>
<p>手机抓包请求也是我们日常开发中需要用到的，那如何利用<code>Charles</code>抓包手机请求呢。</p>
<ol>
<li>
<p>设置<code>Charles</code>的代理端口号<br>
通过设置<code>Proxy</code>-&gt;<code>Proxy Settings</code>-&gt;<code>Proxies</code>-&gt;<code>HTTP Proxy</code>下的<code>Port</code>端口号</p>
<p><img src="https://img2020.cnblogs.com/other/1103694/202006/1103694-20200628065202568-283686823.jpg"></p>
</li>
<li>
<p>查看本地IP地址<br>
通过<code>Charles</code>的<code>Help</code>-&gt;<code>Local IP Address</code>查看，本机IP为xx.xx.xx.xx</p>
<p><img src="https://img2020.cnblogs.com/other/1103694/202006/1103694-20200628065202791-1491770081.jpg"></p>
</li>
<li>
<p>手机和电脑需要处于同于wifi网络内</p>
</li>
<li>
<p>手机wifi网络配置</p>
<p>以华为mate 30为例，选择对应的wifi，选择<code>显示高级选项</code>，设置代理为<code>手动</code>。<br>
设置<code>服务器主机名</code>为：xx.xx.xx.xx（刚才查看的电脑IP）<br>
设置<code>服务器端口</code>为：8888（刚才设置的port）<br>
点击保存后，手机的请求就可以在<code>Charles</code>中查看啦...<br>
<img src="https://img2020.cnblogs.com/other/1103694/202006/1103694-20200628065203013-61759766.jpg"></p>
<blockquote>
<p>注意链接时，<code>Charles</code>会弹出授权窗口，要选择<code>Allow</code></p>
</blockquote>
<p><img src="https://img2020.cnblogs.com/other/1103694/202006/1103694-20200628065203208-1999072868.jpg"></p>
</li>
</ol>
<h2 id="七限速设置">七、限速设置</h2>
<p>通过设置<code>Proxy</code>-&gt;<code>Throttle Settings</code>来进行速度限制<br>
<img src="https://img2020.cnblogs.com/other/1103694/202006/1103694-20200628065203432-905561486.jpg"></p>
<blockquote>
<p>注意：一定要勾选 <code>Enable Throttling</code>选项</p>
</blockquote>
<h2 id="小结">小结</h2>
<p>以上是给大家分享的<code>Charles</code>的常见使用配置，如有相关问题可留言交流。</p>
<h2 id="后记">后记</h2>
<p>以上就是胡哥今天给大家分享的内容，喜欢的小伙伴记得<code>点赞</code>、<code>收藏</code>呦，关注胡哥有话说，学习前端不迷路，欢迎多多留言交流...</p>
<blockquote>
<p>胡哥有话说，专注于大前端技术领域，分享前端系统架构，框架实现原理，最新最高效的技术实践！</p>
</blockquote><br><br>
来源：https://www.cnblogs.com/justbecoder/p/13200946.html
頁: [1]
查看完整版本: 前端开发神器Charles从入门到卸载