模板模型前端框架项目线上调试-偷梁换柱

最新推荐文章于 2024-10-05 09:50:31 发布

猿Why

最新推荐文章于 2024-10-05 09:50:31 发布

阅读量220

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.youkuaiyun.com/u010730731/article/details/109701146

版权

前端专栏收录该内容

6 篇文章

订阅专栏

猿Why到目前为止，接触过一些基于Freemarker的前端项目。业务系统中，功能模块的前端页面从服务端加载出来，渲染到浏览器页面。有一个痛点，当线上环境中，功能模块前端代码（js）出现bug，又没有机会在目标代码中进行debugger的时候就很麻烦。因为猿Why认为，为了前端代码调试，启停服务（线上）是不值当的。

模型：

index.html

<body>
    <div class="center">
        <p id="target"></p>
        <!-- 此处追加业务模块的控制代码 -->
    </div>
    <script type="text/javascript"  src="index.js"></script>
</body>

index.js

var s = document.createElement('script');
// 此处地址又可能是一个url
s.src ='source.js';
document.getElementsByClassName('center')[0].appendChild(s)

source.js

var p = document.getElementById('target')
p.textContent ='source'

其中source.js是目标进行debug的代码，但是由于从服务端加载，那么就没有debug的机会。

大胆提出假设，如果在合适的契机下，将source.js替换浏览器端本地的js文件，不就可以肆意Debugger了嘛？

替换的核心代码：

debugHelper.js

var s = document.createElement("script");
s.src = 'E:/DebugTarget/debug.js';
s.onload = function () {
    //this.remove();
    this.previousSibling.remove()
};
document.getElementsByClassName('center')[0].appendChild(s);

如何触发以上代码的执行？

浏览器（chrome）插件。
执行以上代码的契机：在页面加载完成后，将source.js替换成debug.js
替换前

<body>
    <div class="center">
        <p id="target">source</p>
    <script src="source.js"></script></div>
    <script type="text/javascript" src="index.js"></script>
</body>

替换后

<body>
    <div class="center">
        <p id="target">debug</p>
    <script src="E:/DebugTarget/debug.js"></script></div>
    <script type="text/javascript" src="index.js"></script>
</body>

OK！方案的手。

后话：

在这里插入图片描述

前后端分离依然成为当下成熟的解决方案，在新项目中这个招数是用不到了
chrome插件开发，webRequest是没有办法直接对请求结果进行“篡改”
本文的方案，确实可以用来对一些模板模型的前端项目进行线上调试（前端代码）
以上两张图的核心思想如下：
A：篡改请求结果每一种方式是保证请求的整个周期都被重写，这样开发人员可以对整个请求做任何操作
B：进行重定向，将请求处理的服务端把持在自己手里，返回什么样的结果就可以自己说了算

参考文档：
chrome 插件开发教程
 chrome webRequest 文档

Demo源码