利用 线上环境 在 本地 调试代码

栏目: 编程工具 · 发布时间: 5年前

内容简介:在日常的开发中,当接口文档出来的时候,前后端可以独立的进行开发,前端可以通过一些线上的mock工具模拟接口,调通页面,减少联调的时间。但是在一些条件下,是需要利用线上的环境调试的:当我们遇到这些问题时,简单的想法是:先在本地估摸着开发,然后再部署上去线上环境看下结果,然后再接着调试,再部署到线上看下结果......这样子极其繁琐和不方便。此时我们考虑一下,是否可以利用线上环境进行代码调试?

在日常的开发中,当接口文档出来的时候,前后端可以独立的进行开发,前端可以通过一些线上的mock工具模拟接口,调通页面,减少联调的时间。

但是在一些条件下,是需要利用线上的环境调试的:

cookie
bug

当我们遇到这些问题时,简单的想法是:先在本地估摸着开发,然后再部署上去线上环境看下结果,然后再接着调试,再部署到线上看下结果......这样子极其繁琐和不方便。此时我们考虑一下,是否可以利用线上环境进行代码调试?

怎么做呢?

具体的想法就是,当我们登录进去线上环境时,线上环境会返回已经部署的代码,在这个过程中,我们可以利用抓包工具,把请求线上已经部署的代码请求给拦截下来,替换为本地代码文件返回给浏览器,只要替换的文件一一对应,线上的环境依旧可以正常跑通,因为这个过程对于浏览器来说,是透明的,所以我们就相当于把本地代码部署到线上环境了,就可以一边开发一边调试啦~

具体的操作就是:

  1. 登录进去线上环境
  2. 利用 工具 从中间抓包,拦截所要调试的代码请求,返回本地文件。

当然工具有很多种~这里用 Fiddler 作为例子~

具体实现

1. 找到要调试的线上代码所在文件

比如我要调试的是 sureSign() 方法,先在控制台上定位到该方法所在的文件

利用 线上环境 在 本地 调试代码

2. 找到该文件资源所对应的请求

依旧是在控制台查找

利用 线上环境 在 本地 调试代码

3. 在 Fiddler 里面拦截该请求,并替换返回本地文件

利用 线上环境 在 本地 调试代码

这样子就已经让本地的文件,替代了远程的文件~可以在本地利用远程的环境调节啦啦啦~~

但是如果文件在框架(如 vue + webpack )的打包之后,和其他文件有着关联,如果替换一个不起作用,那我们也可以整一个替换掉

先把 index.html 替换掉

利用 线上环境 在 本地 调试代码

再把 js资源 替换

利用 线上环境 在 本地 调试代码

这样子就行啦~

当然利用抓包还可以实现很多东西,这个也只是一个开发调试用的小技巧~


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

老码识途

老码识途

韩宏 / 电子工业出版社 / 2012-8 / 56.00元

《老"码"识途:从机器码到框架的系统观逆向修炼之路》以逆向反汇编为线索,自底向上,从探索者的角度,原生态地刻画了对系统机制的学习,以及相关问题的猜测、追踪和解决过程,展现了系统级思维方式的淬炼方法。该思维方式是架构师应具备的一种重要素质。《老"码"识途:从机器码到框架的系统观逆向修炼之路》内容涉及反汇编、底层调试、链接、加载、钩子、异常处理、测试驱动开发、对象模型和机制、线程类封装、跨平台技术、插......一起来看看 《老码识途》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

在线进制转换器
在线进制转换器

各进制数互转换器

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具