调试别家网站的 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)