04月19, 2016

charles调试指南一二

在windows下可以使用fiddler作为调试代理工具,那么在mac下可以用什么呢?这里推荐使用Charles

Charles可以理解为mac上的'fiddler'。下面就介绍一下如何使用这样类似的代理工具,下面是以charles为例,可能设置的位置不同,但是需要的步骤都是相似的,可类比。

一般使用调试代理工具,是调试一些js文件,抓包,查看http请求与返回相关的信息。

准备工作

  • 首先保证需要调试的设备(电脑或是手机)与Charles处于同一网段中,比如都连上了noway的无线网。
    • mac支持多网卡同时工作,插网线和无线网都可以同时连接。
  • 设置Charles的代理端口号,默认是8888(fiddler也一样)

pc端如何使用

  • charles开启mac proxy

  • 需要抓包的软件关闭其他代理 比如浏览器,看看是不是用了其他代理,需要选择系统代理。否则会抓不到用浏览器浏览时的包。

  • 浏览器清缓存 假设上面几个步骤都成功了,但是依然看不到加载的资源,需要看看是不是浏览器还是从浏览器缓存中读取的这些资源。

    • 如果是,那么就在charles获取到的请求资源中看不到文件信息。
    • 那么需要强制刷新,或是清除浏览器缓存后再刷新页面。这时就可以看到加载的资源了。
    • mac下command+r,是刷新网页。command+shift+r是强制刷新(但往往起不了效果)。可以使用chrome的插件click&clean来清除缓存。

移动端如何调试

  • 手机设置代理
    • 设置电脑上的网络,保证第一个是以太网的
    • 连上与mac同一个无线网后,设置mac中wifi的ip(和以太网的ip不一样),和端口号8888
  • 这时如果前面的步骤都没问题,就会在charles界面上出现一个弹出框,选择allow即可。
  • 这样我们就可以像调试pc页面一样,对移动端页面进行脚本调试了。
  • 另外呢,连上这样的代理之后,手机相当于是电脑的另一个屏幕了。就是说,只要电脑能访问的页面,在手机上也都可以访问了。可以通过chrome的二维码插件,直接扫码访问,或者通过任意方式,能让手机获取到需要访问的地址即可。

虚拟机中如何使用

在虚拟机开启代理工具后,比如fiddler,在本机上的浏览器的代理地址设置成虚拟机中的代理地址即可。这样在虚拟机里就可以抓本机上的包了。其实就是相当于两台电脑之间的代理设置。

替换文件

适用与pc和移动

有时我们需要对页面中的脚本进行调试,如果页面是线上的,或者由于环境的限制,不能直接修改已有的脚本看到效果,该怎么办?

那么使用map大法好,map分为map remotemap local两种。都是替换已抓到的文件,不同的是前者是用线上地址的文件替换,后者使用本地文件替换。本地文件替换也是我们debug时最常用的。

  • 右键需要替换的文件后出现如下对话框

  • 如果调试完了,不需要本地文件替换了,那么可以通过下面的设置remove掉设置(map remote也类似)。把前面的钩钩去掉,再点ok就ok了。

安装破解charles

(并不鼓励[doge脸])

  • 安装包 (提取码:ecf8)
  • 破解:用破解包里面的"Mac/charles.jar" 替换 Charles 安装文件里面的 "Contents/Java/charles.jar" 文件

移动端页面的UI怎么调

Chrome devTools调试Android手机各种app中的web页面

  • 手机要满足Android系统为4.4或更高版本,低版本不支持这种方式。(也不是所有的手机都支持,比如有的华为就不支持)
  • 确保App已经开启了webview的debug调试模式。
  • 用usb数据线连接好手机与电脑。
  • 将手机中的 设置 - 开发人员工具 - USB调试功能打开。
  • 打开chrome://inspect/#devices,即单击chrome右上角控制按钮 - 更多工具 - 检查设备 - 勾选上Discover USB devices
  • 在app中访问一个web页面,对应的webview就可以出现在devices中,单击inspect即可调试。

safari调试iPhone中safari里的web页面

由于iPhone安全性的限制,我们只能通过safari调试iPhone在safari中的页面,调试不了别的地方的webview。

  • 手机中,设置 > Safari > 高级开启web检查器
  • 用usb数据线连接好手机与电脑
  • 在手机的safari中打开一个网页
  • 在电脑的safari,点击 开发 - 自己iphone的名称 - 手机上打开页面的url

参考

本文链接:https://imjiaolong.cn/post/mac-charles.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。