使用MITM调试线上前端错误
使用MITM调试线上前端错误
前言
目前所在的公司每次部署上线至少半小时,如果在上线刚完成,检查线上发现有bug时,这意味着你又要等一次部署,尤其是接近下班的时候出这事的话,整个人都不好了。
首先线上的前端代码都是压缩+混淆过的,加上没有sourceMap(即使有map有时也不好调试),导致很多时候看到问题只能靠猜是哪里不对。这个时候如果能把线上的css、js文件替换成我本地的dev模式打包的文件,那将极大的提高debug效率,但是运维当然不会给你权限在线上调试啦,整个页面崩了怎么办?于是我想到了中间人攻击的方式来替换我本地浏览器请求的资源,这样不会污染服务器,又可以方便我调试,两全其美。
思路
线上的模块页面主要依赖两个文件,js和css文件,只要能把浏览器对线上这静态文件的请求转发到我本机,就可以实现线上实时调试了。
简单来说就是使用Chrome的代理工具,把我们所有的流量转发到本地的一个代理服务器,这个代理服务器会匹配url,对请求进行修改和过滤。
准备工具
Proxy SwitchyOmega
anyproxy
开始动手
安装anyproxy
cnpm i anyproxy@beta4
这里要注意的是,我们需要替换的是https的资源,要先在本地导入自己的CA,这里有教程。
先在本地搭建一个代理服务器,anyproxy已经帮我们完成了其他的工作,我们只需要编写rule文件即可,我的配置的文件如下
// rules.js
const resRegx = /\.[a-z0-9]{8}.min/imodule.exports = {summary: 'a rule to modify response',* beforeSendRequest(requestDetail) {let {headers, path} = requestDetail.requestOptionsif (path.match(/raven\.min\.js|analytics\.js|nr-\d+/)) { // 屏蔽无用资源return {response: {statusCode: 404,header: {'content-type': 'text/html'},body: ''}}}// hook 静态资源CDNif (requestDetail.url.indexOf('https://mcache.xxxx.cn/') !== -1) {if (path.match(/legacy-vendor/)) return null // 第三方库不参与// common-chunk.abcd1234.min.js ===> common-chunk.dev.jslet localPath = path.replace(resRegx, '.dev')var newOption = Object.assign({}, requestDetail.requestOptions, {hostname: '192.168.33.10', // 本机ipport: 80,path: localPath,headers: {...headers, host: '192.168.33.10'}});return {protocol: 'http',requestOptions: newOption};}},};
启动proxy服务器
anyproxy --intercept --rule rules.js
访问线上代码,结果如下图,我们发现线上的js文件已经替换成我本地的dev版本的资源了,这样一些在线上才能复现的问题,很容易在本地调试了。
下图是原本线上的代码
使用MITM调试线上前端错误相关推荐
- ZanProxy —— 本地代码调试线上页面,环境再也不是问题
一.ZanProxy 是什么 一言以蔽之,ZanProxy 是一个基于 Node.js 的代理服务器.它专注于帮助前端开发提高开发效率. 二.我们为什么需要一个代理工具 在前端开发中,我们常常会碰到以 ...
- 如何使用Fiddler调试线上JS代码(转自:http://www.cnblogs.com/RockLi/p/3511132.html)
大家平时肯定都用过火狐的Firebug或者谷歌的调试工具来调试JS,但遗憾的是我们不能像编辑html,css那样来直接新增或者删除JS代码. 虽然可以通过调试工具的控制台来动态执行JS代码,但有时候却 ...
- 线上前端静态资源代理到本地的几种方式
前言 我是一个小前端,前段时间开始支持集团监控平台业务. 当我拉下代码,开启本地服务,出现了一大堆请求错误. 原因是:本地的host是127.0.0.1,而接口调用的是线上数据. 接口的host和平台 ...
- 前端项目实战134-前端实战项目部署线上刷新错误
多加一行 try_files $uri $uri/ /index.html 配置即可
- 用它调试线上bug,真得劲!
arthas中文直译过来叫阿尔萨斯,是阿里巴巴开源的java应用诊断工具,在线排查问题,无需重启服务,实时监控jvm状态.支持JDK6以上版本,支持Linux/Mac/Window操作系统. 采用命令 ...
- TCP网络调试助手上提示错误:“1035 未知错误”的有效解决方法,本人实测确实可行
对于网络调试助手如NetAssist等连接不上服务器且左下角显示"1035 未知错误"的问题,本人困惑许久,参考了网上的多种解决方法,有的说法是网络调试助手的版本太低,在Win10 ...
- 用它调试线上 bug,真得劲 | webconsole
本文主要介绍用本地浏览器连接远程服务器进行bug调试的两种方法 webconsole webconsole 是 arthas 提供的 web 页面,它可以让用户在自己的电脑上,连接远程服务器的 art ...
- idea远程调试修改代码_使用IDEA远程调试线上代码
众所周知使用IDEA开发时可以通过debug进行调试并快速定位问题,但是如果代码已发布到远程服务器上,该如何调试呢?本文将告诉你如何利用IDEA调试远程服务器上的代码 本文会先讲如何配置参数.调试,然 ...
- 总结一下刚刚参加了今日头条的线上前端笔试
我参加的是今日头条的前端笔试,感觉凉凉了,看来还是要知彼知己,下次要事先预习一下对方的笔试题,先从最后一题开始回忆吧,我尽量回忆全一点,希望能够帮到广大网友,我自己也要加进补一下数据结构,算法方面的知 ...
最新文章
- 右键菜单无响应_给电脑添加右键菜单重启资源管理器,让电脑不再死机!
- linux生成驱动编译的头文件,嵌入式Linux字符设备驱动——5生成字符设备节点
- shell脚本执行php文件_分享两个shell脚本实例--批量生成随机字符文件名和批量改名...
- 历届试题 打印十字图(模拟)
- LeetCode MySQL 1075. 项目员工 I
- python如何爬取sci论文_通过爬虫确定SCI期刊的发表周期
- JAVA中inputstring_java IO流 之 字节输入流 InputString()
- UVa 120 - Stacks of Flapjacks
- ORA-28056:Writing audit records to Windows EventLog failed的问题
- UNP Chapter 25 - 原始套接口
- Rad Software Regular Expression Designer 正则表达式工具软件
- 扫描探针显微术入门(4)
- 【父亲节H5】用独特的方式表达最深沉的爱!
- LeCo-45. 跳跃游戏 II
- seaborn画各种典型图的代码备忘录(1)——dataframe数据画双Y坐标轴柱状图
- 情人节用python来表白女神
- venn.diagram生成pdf图片
- 分布式配置中心设计——思维导图总结
- 通过gitlab的webhook进行项目的自动部署所遇问题总结
- 软件驻场开发是什么?有什么好处