调试别家网站的 JS 的技巧

背景

我们有时需要分析和抓取别人的网站。有时候，我们也需要调试别人的网站上的 JS 代码，找出其中的核心代码，比如接口加密算法。但是，直接在浏览器上查看和修改别人的 JS 代码是很困难的，因为它们通常被压缩、混淆或者加密过。那么，有没有什么方法可以让我们更方便地调试别家网站的 JS 代码呢？[^1]

正文

使用 Charlse 工具将远程 JS 映射成本地的，这样就可以在本地修改远程 JS 代码，接下来有请 Bing AI 来介绍一下如何配置：

Charles工具是一款可以用来查看和修改HTTP和HTTPS请求的代理软件。它可以实现Map Remote功能，即将指定的网络请求重定向到另一个网址请求地址。这样，我们就可以将远程js文件映射成本地的文件，方便调试和开发。

要使用Map Remote功能，我们需要先在Charles的菜单中选择“Tools”->”Map Remote”，然后点击“Add”按钮，添加一条映射规则。在弹出的对话框中，我们需要填写以下信息：

Map From：这里填写要重定向的原始请求地址，比如example.com/js/script.js
Map To：这里填写要映射的目标请求地址，比如localhost:8080/js/script.js
Protocol：这里选择要使用的协议，比如HTTP或HTTPS
Port：这里填写要使用的端口号，比如80或443

完成后，点击“OK”按钮保存规则。然后，在Charles的主界面中，勾选“Enable Map Remote”选项。这样，当我们访问example.com/js/script.js 时，Charles会自动将其重定向到localhost:8080/js/script.js ，并返回本地文件的内容。

注意：如果要使用HTTPS协议，请确保在Charles设置中启用SSL代理，并安装相应的证书。

[^1]

使用匿名函数的方式获取参数以及返回值

{
    a: fa(x),
    b: fb()
}

{
    a: (function (x) {
        const res = fa(x)
        console.log(x, res)
        return res
    })(x),
    b: fb()
}

使用 Object.defineProperty，并定义 get 和 set 方法，来监听 Object 的属性变化


// 假如我们想知道 sign 的值是哪段程序赋值上去的，可以在 set 中打印调用栈
const o = {
    sign: 'abc',
    key: '123'
}

let bValue = o.sign;
Object.defineProperty(o, 'sign', {
    set (value) {
        console.log(value)
        console.trace()  // 使用 console.trace 打印调用栈
        bValue = value
    },

    get () {
        return bValue
    }
})

n(o)