你可能不知道的前端代码调试方法

在日常前端开发中有时会碰到线上出现bug的情况,这时候就要去复现这个bug,一般情况我们可以在开发机或者测试机上以同样的数据复现这个bug,但是总会有一些bug难以复现，那我们只能去线上看着混淆以及压缩过的代码进行痛苦的调试。这样的效率是极低的，那么有没有一种方法可以提高我们的效率呢？

那么接下来我就要介绍一个快速进行线上调试的方法

本人的环境是windows 7的环境，所以主要介绍这个环境下的使用方法

首先我们要先安装好python3（小学生都在学，我们好歹也了解下）

python的语法和js比较相近大家可以自行学下

安装 mitmproxy

安装完毕后在命令行运行一下命令，安装我们的模块

pip install mitmproxy 
复制代码

这个模块是一个中间人代理的模块，简单来说就是这个模块可以将我们正常请求经过一次代理处理。

在安装这个模块时可能会出现安装失败的情况

error: Microsoft Visual C++ 14.0 is required. Get it with “Microsoft Visual C++ Build Tools”: http://landinghub.visualstudio.com/visual-cpp-build-tools
复制代码

是因为安装这个包的 window 系统需要首先安装 Microsoft Visual C++ V14.0以上 才可以运行

那我们可以去微软的网站下载Visual Studio 2019

visualstudio.microsoft.com/zh-hans/dow…

下载完成后点击安装我们只需要选择 安装c++ 构建工具就行。

安装完毕后再重新运行下pip install mitmproxy 即可

安装完成后我们 运行 mitmdump --version查看版本，这是说明已经安装成功了

这是我们还需要个chrome的工具来辅助我们开发，我们可以在谷歌商店中下载SwitchyOmega应用（作为一个程序员翻墙啥的应该是必备技能了吧）

安装完毕后我们终于可以开始写代码了

简单的例子

我们拿最简单一个网站来举个栗子

jquery.cuishifeng.cn/ 我找的一个不是https的网站

打开F12,我们找一个最简单js文件将其下载下来

我们创建一个mitmproxy文件

在里面创建一个proxy.py文件和一个replace.js文件

proxy.py文件内容如下

from mitmproxy import http

def request(flow: http.HTTPFlow):
    # 将请求新增了一个查询参数
    flow.request.query["mitmproxy"] = "rocks123"
    pass
    

def response(flow: http.HTTPFlow):
    # 将响应头中新增了一个自定义头字段
    flow.response.headers["injectHeader"] = "inject"
    if 'jquery.swiper_a82c373.js' in flow.request.url:
        with open('replace.js','r',encoding='UTF-8') as f:
            flow.response.text =f.read()
复制代码

replace.js文件内容如下

"use strict";console.log("注入成功！");alert('hello world');
复制代码

在当前目录下运行 mitmdump -s proxy.py -p 9527

这时我们就需要用到SwitchyOmega这个扩展工具了，

点击选项进入，创建一个新的情景模式

并保存修改

然后再http://jquery.cuishifeng.cn/下点击切换模式

这2个都可以生效，前一个是全局生效，后一个是只在该域名下生效代理（一般点击下面一个） 然后duang的一下，你可以看到代码生效了

这样就可以在线上调试代码啦！

那么问题来了要是https的网站咋办呢？ 也很简单，只需要下载一个证书并且信任它即可 在本地开启mitmdump代理模式下访问 mitm.it/

下载对应的证书，下载完毕后一键安装全部下一步点到底即可

重新启动服务就可以代理https的网站服务了

最后有个小提示有翻墙工具的同学记得在平时使用是记得把SwitchyOmega关闭或者切换到系统代理模式，不然的你翻墙工具将会失效

今天就讲这么多啦！有不对的地方请大佬多指教

转载于:https://juejin.im/post/5cc51628e51d456e6154b4ad