JS逆向之vscode无环境联调

为啥使用VSCode

VSCode强大，支持多种语言。在JS逆向项目中，会涉及到Python和JS代码，如果Python使用Pycharm调试，JS使用WebStorm或者Hbuilder进行调试，那么需要在多个开发者工具中切换，比较麻烦，VSCode的多语言支持完美的解决这个麻烦事。此外，最重要的是VSCode可以配置JS代码的无环境联调，即可以与浏览器的dev-tools工具交互实现在VSCode中开发，浏览器工具中调试，这也是其它工具没有的。

安装VSCode

VSCode下载地址：https://code.visualstudio.com/

安装好VSCode之后，可以配置语言为中文。具体方法是，点击下图的图标，选择Extension，然后在搜索中输入”Chinese”，选择简体中文，然后重启浏览器即可。

配置无环境联调

首先安装好NodeJS环境。

然后打开工作目录，选择任意一个JS文件，选择运行->启动调试就可以运行或者debug JS代码了。

然后通过命令npm install -g node-inspect全局安装依赖包，如果是Linux/Mac系统，需要sudo权限。

输入命令node-inspect，查看node-inspect是否安装成功：

我们选择运行->打开配置：

出现一个新的文件launch.json文件，这个文件用来配置项目的运行环境，比如执行脚本，解释器，命令行参数等等。修改这个配置文件，内容如下：

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "启动程序",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/aerfaying.js"
        },
        {
            "type": "node",
            "request": "launch",
            "name": "无环境浏览器",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "runtimeExecutable": "node-inspect",
            "program": "${workspaceFolder}/aerfaying.js"
        },
    ]
}

把之前的运行环境改了个名，叫做启动程序，然后新建了一个环境，叫做无环境浏览器，这个环境除了名字之外唯一不同的是增加了一个runtimeExecutable，把我们上边安装的node-inspect包给引入进来。

保存好配置文件之后，这个时候我们左上角就出现2个环境供我们选择了：

我们点击无环境浏览器，就会启动无环境浏览器模式下的调试模式。打开任意一个Chrome浏览器窗口，打开开发者工具，在开发者工具的Elements面板左边出现一个绿色的图标，如下：

表示开启了VSCode与浏览器的联调模式，如果这个图标为灰色，表示关闭了联调模式。

点击这个图标，就弹出了DevTools：

可以看到已经帮我们把刚才调试的那个JS文件的内容自动导入，同时开启了debug模式。为什么叫做无环境浏览器？就是这个DevTools跟我们在浏览器中调试几乎是一模一样的，只不过一些浏览器的环境变量没有，比如window，document等等。这样既可以继续使用浏览器进行调试，又可以没有window/document等环境，模拟真实独立的开发环境，方便我们补环境。