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

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

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

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

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

cookie
bug

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

怎么做呢？

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

具体的操作就是：

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

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

具体实现

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

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

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

依旧是在控制台查找

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

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

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

先把 index.html 替换掉

再把 js资源 替换

这样子就行啦~

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

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

查看所有标签

猜你喜欢:

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

码农书籍

Web前端黑客技术揭秘

钟晨鸣、徐少培 / 电子工业出版社 / 2013-1 / 59.00元

Web前端的黑客攻防技术是一门非常新颖且有趣的黑客技术，主要包含Web前端安全的跨站脚本（XSS）、跨站请求伪造（CSRF）、界面操作劫持这三大类，涉及的知识点涵盖信任与信任关系、Cookie安全、Flash安全、DOM渲染、字符集、跨域、原生态攻击、高级钓鱼、蠕虫思想等，这些都是研究前端安全的人必备的知识点。本书作者深入剖析了许多经典的攻防技巧，并给出了许多独到的安全见解。本书适合前端工......一起来看看《Web前端黑客技术揭秘》这本书的介绍吧!

码农工具