前端调试利器 - Charles
Docs 开发之 Charles 配置指南
1.下载与安装
charles-proxy-4.1.4 .dmg56.12 MB已存到云盘下载
2.激活
使用公司正版license 激活
安装证书
点击证书并选择「始终信任」 (证书不被信任可能会导致网站开发时部分资源文件无法加载。)
设置代理
将你需要代理HTTPS的网站添加进去:
本地调试
如果你想代理bear-test 到本地, 你需要:
点击Map Remote:
添加你需要的设置:
这里提供一个基础配置:
bear-test_example.xml3.12 KB已存到云盘下载
如果你是新手, 只需 import 这个文件, 点击OK 就好了。
配置到这里 ,打开bear-test 中的一篇文档, 你就会看到资源请求打到了本地。
这样, 就能在本地进行开发和调试了。
异常处理
- 页面空白, 提示获取数据失败:
这种情况, 你需要检查一下 only_dev 这个文件的 session 是否过期。
在这里找到:
如果你也不确定是否过期, 就删掉, 重新登陆,然后拿到新的session ,重新 yarn start 一下就可以了。
id 指的是userId, 在控制台中,可通过 window.User 查看。
此配置中, 还有个默认的字段wsServer, 默认值是wsServer: "ws://bear-test.bytedance.net/ws/v2",
如果你需要修改, 直接重新赋值即可。
更便捷的设置
如果你想在不同的开发任务间来回切换, 又不想频繁的修改only_dev.js 中的配置, 你只需要在backends 目录中新建一个文件:
里面是该环境需要的一些参数:
需要切换环境的时候, 只需要执行:
yarn use beartest
这条命令会把里面的内容自动添加到only_dev 中。
然后再重新yarn start , 刷新即可。
Mobile 端调试的相关配置
m端的配置稍微繁琐一些。
这里以 IOS 为例。
首先,你需要找客户端的同学要一台测试机, 帮你安装测试版的Docs.
测试机上一般已经配好了代理。
然后你需要确认:
1.手机上是否安装了证书, 如果没有, 就安装。
安装证书
按照提示安装证书。
1.设置IP。 移动端连接的网络是bytedanceInc, 你需要手动设置HTTP 代理, 和你PC 的 IP 保持一致。
2.手机访问这个地址, 然后安装证书, 设置信任。
设置代理
- 设置charles 代理。( 把移动端的资源请求代理到本地来)
示例:
这样就可以在本地进行后续的开发和调试了。
前端调试利器 - Charles的更多相关文章
- 前端调试利器——BrowserSync
此处记录一下踩过的坑 之前看的这个地址:http://www.browsersync.cn/ 也就是 BrowserSync的官网上面关于代理服务器的例子不管怎么试都不行 请看下例子 browser- ...
- 前端调试利器---nproxy
前言:习惯了在windows环境中使用Fiddler的童鞋们,是不是感觉它的网络重定向功能很酷,Fiddler能按照你设置的规制捕获网络请求,再指向本地文件,如拦截你的js文件到本地,就能很快的调试线 ...
- 10分钟学会前端调试利器——FireBug
概述 FireBug是一个用于网站前端开发的工具,它是FireFox浏览器的一个扩展插件.它可以用于调试JavaScript.查看DOM.分析CSS.监控网络流量以及进行Ajax交互等.它提供了几乎前 ...
- 移动应用抓包调试利器Charles
转载:http://www.jianshu.com/p/68684780c1b0 一.Charles是什么? Charles是在 Mac或Windows下常用的http协议网络包截取工具,是一款屌的不 ...
- 黄聪:移动应用抓包调试利器Charles
一.Charles是什么? Charles是在 Mac或Windows下常用的http协议网络包截取工具,是一款屌的不行的抓包工具,在平常的测试与调式过程中,掌握此工具就基本可以不用其他抓包工具了 ...
- iOS抓包利器Charles
iOS抓包利器Charles http://wonderffee.github.io/blog/2013/07/13/best-packet-capture-tool-charles-in-ios/ ...
- 前端开发利器—FIDDLER 转
http://www.cnblogs.com/yuzhongwusan/archive/2012/07/20/2601306.html 前端开发利器—FIDDLER 1.Fiddler相对其他调试工具 ...
- 前端开发神器Charles从入门到卸载
前言 本文将带大家学习使用前端开发神器-charles,从基本的下载安装到常见配置使用,为大家一一讲解. 一.花式夸奖Charles 截取 Http 和 Https 网络封包. 支持重发网络请求,方便 ...
- Reveal1.5破解,iOS_UI调试利器Reveal最新版本破解方法
Reveal1.0.7破解 1.官网下载最新版Reveal,拖动应用程序中,运行一次2.下载16进制编辑器"0xED" for mac(http://dl.vmall.com/c0 ...
随机推荐
- MongoDB创建普通账户与admin账户的配置方法
MongoDB数据库设置账户及权限的方法 1.如果MongoDB服务正在运行的情况下,需先停止该服务 在cmd(命令提示符)下输入net stop MongoDB,按下enter(回车键) 运行结果: ...
- Mattermost Server安装及配置AD/LADP
一.安装Mattermost Server Mattermost is an open source, self-hosted Slack-alternative. 1.下载mattermost s ...
- sql 名词解析
针对这个 sql 语句进行解析 1 SELECT 2 a.* 3 , b.L12_create_time L1第一次转L2的时间 4 , ROUND(c.L1_pending/60, 2) " ...
- Nodejs在Linux环境安装
一.下载安装包 http://nodejs.cn/download/ 二.解压 tar -xf node-v14.3.0-linux-x64.tar.xz 三.配置 1.编辑文件vim /etc/pr ...
- [ Skill ] load 函数优化,识别相对路径
https://www.cnblogs.com/yeungchie/ 在 cds.lib 文件中定义库的路径,为了规范库定义的管理,经常这样做: . |-- cds.lib ------------- ...
- linux 中 /dev/null和/dev/zero的作用以及区别
在类Unix操作系统中,设备节点并不一定要对应物理设备.没有这种对应关系的设备被称之为伪设备.操作系统运用了它们实现多种多样的功能,/dev/null和/dev/zero就是这样的设备,类似的还有/d ...
- jq 简易购物车功能实现
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>& ...
- MYSQL安装后自带用户的作用
user表中host列的值的意义% 匹配所有主机localhost localhost不会被解析成IP地址,直接通过UNIXsocket连接127.0.0 ...
- 与Flash 中国特供版斗智斗勇
我的Windows 有OEM和学校KMS 的正版,Office 365 年年续费,QQ音乐腾讯视频哔哩哔哩月月开会员,软件游戏都从Play 商店和Steam 上购买.但是Adobe 这个垃圾合作,终于 ...
- 使用阿里云镜像站NTP服务搭建NTP服务器(基于CentOS 7系统)
镜像下载.域名解析.时间同步请点击 阿里云开源镜像站 一.NTP服务器介绍 网络时间协议(Network Time Protocol,NTP)服务器,也就是日常所说的NTP服务器,用来提供同步时间服务 ...