feat: 调试通了流程

Author: CC11001100

src/debugger/debugger-manager.js

@@ -1,9 +1,39 @@
+/**
+ * 用来接收外部设置的断点，以及在请求时测试断点是否生效
+ */
 class DebuggerManager {
-    static testAll() {
 
+    constructor() {
+        // 用来存储所有的断点
+        // Array<Debugger>
+        this.debuggers = [];
     }
+
+    /**
+     * 执行测试所有断点，看看是否有条件命中啥的
+     *
+     * @param scriptContext {ScriptContext}
+     */
+    testAll(scriptContext) {
+        for (let jsonpDebugger of this.debuggers) {
+            jsonpDebugger.test(scriptContext);
+        }
+    }
+
+    /**
+     * 添加一个断点
+     *
+     * @param jsonpDebugger {Debugger}
+     */
+    addDebugger(jsonpDebugger) {
+        this.debuggers.push(jsonpDebugger);
+    }
+
 }
 
+const debuggerManager = new DebuggerManager();
+
 module.exports = {
-    DebuggerManager
+    DebuggerManager,
+    debuggerManager
 }

src/debugger/debugger.js

@@ -3,19 +3,19 @@ const {getUnsafeWindow} = require("../utils/scope-util");
 const {JsonpCallbackFunctionAnalyzer} = require("../analyzer/response-analyzer");
 
 /**
- * 表示一个条件断点
+ * 表示一个jsonp的条件断点
  */
 class Debugger {
 
     /**
      * 创建一个断点
      *
-     * @param urlPattern {String | RegExp} 用于与script类型的请求的URL做匹配进入断点
-     * @param enableRequestDebugger {Boolean} 是否开启请求断点，开启请求断点会在请求发送之前进入断点
-     * @param enableResponseDebugger {Boolean} 是否开启响应断点，开启响应断点会在响应处理之前进入断点
-     * @param callbackFunctionParamName {String} 传递jsonp回调函数名字的参数，比如 "callback"
+     * @param urlPattern {String | RegExp} 用于与script类型的请求的URL做匹配进入断点，只有这一个是必须指定的
+     * @param enableRequestDebugger {Boolean} 是否开启请求断点，开启请求断点会在请求发送之前进入断点，不指定的话默认开启
+     * @param enableResponseDebugger {Boolean} 是否开启响应断点，开启响应断点会在响应处理之前进入断点，不指定的话默认开启
+     * @param callbackFunctionParamName {String} 传递jsonp回调函数名字的参数，比如 "callback"，如果不指定的话会自动推测
      */
-    constructor(urlPattern, enableRequestDebugger, enableResponseDebugger, callbackFunctionParamName) {
+    constructor(urlPattern, enableRequestDebugger = true, enableResponseDebugger = true, callbackFunctionParamName) {
         this.urlPattern = urlPattern;
         this.enableRequestDebugger = enableRequestDebugger;
         this.enableResponseDebugger = enableResponseDebugger;
@@ -31,7 +31,7 @@ class Debugger {
     test(scriptContext) {
 
         // 首先URL要能够匹配得上
-        if (!this.testUrlPattern(scriptContext.URL)) {
+        if (!this.testUrlPattern(scriptContext.url)) {
             return;
         }
 
@@ -44,16 +44,20 @@ class Debugger {
         if (this.enableResponseDebugger) {
 
             // 如果没有指定jsonp函数的名字的话，则尝试自动抽取函数名字
-            if (!this.callbackFunctionParamName) {
-                this.callbackFunctionParamName = new JsonpCallbackFunctionAnalyzer().parseScriptContext(scriptContext);
+            let jsonpCallbackFunctionName = this.callbackFunctionParamName;
+            if (!jsonpCallbackFunctionName) {
+                jsonpCallbackFunctionName = scriptContext.requestContext.getJsonpCallbackFuncName();
             }
-            if (!this.callbackFunctionParamName) {
+            if (!jsonpCallbackFunctionName) {
                 // TODO 2023-8-22 01:00:27 完善错误提示信息
                 throw new Error("must give me analyzer function param name, example: callback");
             }
 
             // 为响应体中的回调函数增加hook
-            new ObjectFunctionHook(getUnsafeWindow(), this.callbackFunctionParamName).addHook();
+            new ObjectFunctionHook(getUnsafeWindow(), jsonpCallbackFunctionName).addHook(function () {
+                // 这里是脚本的响应断点，已经拦截到响应，跟进去holder函数就行了
+                debugger;
+            });
         }
 
     }

src/hook/object-function-hook.js

@@ -17,8 +17,9 @@ class ObjectFunctionHook {
 
     /**
      *
+     * @param hookCallbackFunction
      */
-    addHook() {
+    addHook(hookCallbackFunction) {
 
         // 要Hook的函数必须存在
         const functionHolder = this.object[this.functionName];
@@ -38,9 +39,8 @@ class ObjectFunctionHook {
         this.object[this.functionName] = function () {
 
             // TODO 2023-8-21 22:15:09 在函数执行的时候尝试触发各种断点
+            hookCallbackFunction.apply(this)
 
-            // 这里是脚本的响应断点，已经拦截到响应，跟进去holder函数就行了
-            debugger;
             return functionHolder.apply(this, arguments);
         }
         // 设置标记位，防止重复Hook

src/hook/script-hook.js

@@ -1,5 +1,5 @@
 const Debugger = require("../debugger/debugger");
-const {DebuggerManager} = require("../debugger/debugger-manager");
+const {DebuggerManager, debuggerManager} = require("../debugger/debugger-manager");
 const {JsonpCallbackFunctionAnalyzer} = require("../analyzer/response-analyzer");
 const {ScriptContext} = require("../context/script/script-context");
 const {RequestContext} = require("../context/request/request-context");
@@ -39,7 +39,7 @@ class ScriptHook {
 
                 // 在请求发送之前测试断点
 
-                DebuggerManager.testAll(scriptContext);
+                debuggerManager.testAll(scriptContext);
 
                 // 这里认为script不会被复用，所以添加的hook在设置src的时候就会被删除掉，会有script复用的情况吗？
                 delete _this.script.src;

src/index.js

@@ -1,10 +1,16 @@
 const {DocumentHook} = require("./hook/document-hook");
 const {getUnsafeWindow} = require("./utils/scope-util");
+const {debuggerManager} = require("./debugger/debugger-manager");
+const {Debugger} = require("./debugger/debugger");
 
 
 (async () => {
     // 增加可视化的配置
 
+    // 增加一个测试断点
+    const jsonpDebugger = new Debugger("http://localhost:10010/?jsonp_callback=jsonpCallback_1734635066");
+    debuggerManager.addDebugger(jsonpDebugger)
+
     // 为document增加hook点
     const unsafeWindow = getUnsafeWindow();
     new DocumentHook(unsafeWindow.document).addHook();