js逆向补环境-调试工具vscode与nodejs使用之无环境联调

目录

      • 一、啊哈
      • 一、Nodejs安装
        • 1、nodejs最新版本的安装（windows）
        • 2、旧版nodejs更新成最新版本（windows）
        • 3、nodejs安装（linux）
      • 二、vscode安装使用(windows)
        • 1、下载安装vscode
        • 2、vscode运行插件Code Runner安装
        • 3、vscode调试插件JavaScript Debugger插件安装
        • 4、vscode调试代码运行卡死强制停止
      • 三、本地js无环境浏览器联调
        • 1、配置环境准备
        • 2、vscode本地直接调试js
        • 3、vscode打开chrome标签页无环境联调
        • 4、vscode打开chrome无环境联调案例

一、啊哈

  • js逆向补环境时，经常会调试js，调试js依赖的环境可以选择如下两个nodejs和vscode；通过这篇文章简单了解下安装以及简单的使用
  • 以下来自我以前写的两篇文章旧文章合集内容基本一致，只是统一更新下汇总到这篇文章了，所以也可以移步查看
  • nodejs在windows和linux下安装
  • vscode模拟谷歌开发者工具调试js

一、Nodejs安装

1、nodejs最新版本的安装（windows）

  • 1、Node.js是一个开源、跨平台的JavaScript运行环境，可以在服务器端运行JavaScript代码。它基于Chrome的JS-V8引擎，使得JavaScript的运行速度非常快，并且提供了一系列的模块，使得开发者可以方便地进行后端开发

  • 2、nodejs下载 ，下载node-v18.16.1-x64.msi，除安装路径可以修改，其它一路next即可
    在这里插入图片描述
    在这里插入图片描述

  • 3、然后双击下载好的msi程序包，然后一路next，只需要讲安装路径选择性修改下，就可以安装好了
    在这里插入图片描述

  • 4、然后打开cmd窗口，输入node -v 如下输出版本号，就代表安装成功了；接下来是一些全局环境变量的设置
    在这里插入图片描述

  • 5、打开cmd窗口，执行以下两条命令，在E:\Software\nodejs\下面新建一个文件夹node_cache

    • npm config set registry https://registry.npm.taobao.org ：设置淘宝镜像源
    • npm config set prefix "E:\Software\nodejs\" ：修改npm全局（-g）模块安装所在路径
    • npm config set cache "E:\Software\nodejs\node_cache" ：修改缓存cache的路径（ps：如果不修改，则默认到C盘位置C:\Users\Administrator\AppData\Roaming\npm）
    • npm root -g ：查看node_modules的目录
      在这里插入图片描述

  • 6、打开环境变量窗口，设置系统环境变量，新增NODE_PATH变量，NODE_PATH = E:\Software\nodejs\node_modules
    在这里插入图片描述

  • 7、打开用户环境变量窗口，修改用户变量里的Path， 将C:\Users\Administrator\AppData\Roaming\npm改成E:\Software\nodejs；即确定完成
    在这里插入图片描述

  • 7、测试安装，以管理员身份打开cmd窗口，然后输入npm install express -g
    在这里插入图片描述

  • 8、npm install安装慢的多种解决方案

    npm install gl -g --registry=http://registry.npm.taobao.org
npm install canvas -g --canvas_binary_host_mirror=https://registry.npmmirror.com/-/binary/canvas
或者如下
npm config set registry https://registry.npm.taobao.org
npm install gl -g 
npm install canvas 
或者如下
npm install -g cnpm
cnpm install gl -g 
cnpm install canvas -g
或者如下
npm install -g nrm
nrm use taobao
nrm ls    查看可以用切换的源
npm install gl -g

    在这里插入图片描述

2、旧版nodejs更新成最新版本（windows）

  • 1、node安装是可以不需要卸载重新安装的，所以node相当于是可以直接切换版本的，无非可能会出现模块不兼容问题，更新成新的版本nodejs，比如我之前安装的是16.5的nodejs版本，不需要卸载以前的版本，直接安装新的，只要和原来的安装路径一样，就会自动覆盖，本人亲测可用；感谢时光的解答哈哈哈，我少走了些弯路
    在这里插入图片描述
    在这里插入图片描述
  • 2、唯一的问题可能就是canvas模块和gl模块的相关js会报错； canvas和gl会根据版本来编译 所以不同版本可能会报错，解决方案，先卸载npm uninstall gl 以及npm uninstall canvas，再重装npm install gl -g以及npm install canvas -g
    在这里插入图片描述

3、nodejs安装（linux）

  • 1、打开链接https://nodejs.org/en/download/，右击复制链接，到/usr/local目录 然后按如下命令

  • 2、复制下来的链接可能是v18.16.1版本，但是最新版可能在服务器上有很多坑，比如报错version GLIBCXX_3.4.21’ not found ， 所以换成v16.15.0版本就没问题啦，不过你也可以尝试最新版，如果坑不好解决，就用旧版

    推荐安装这个版本
cd /opt
wget https://nodejs.org/dist/v16.15.0/node-v16.15.0-linux-x64.tar.xz
tar -vxf node-v16.15.0-linux-x64.tar.xz
mv node-v16.15.0-linux-x64  nodejs  
ln -sf /opt/nodejs/bin/npm /usr/local/bin/
ln -sf /opt/nodejs/bin/node /usr/local/bin/

最新版部分服务器有bug可以选择性的尝试
cd /opt
wget https://nodejs.org/dist/v18.16.1/node-v18.16.1-linux-x64.tar.xz 
tar -vxf node-v18.16.1-linux-x64.tar.xz
mv node-v18.16.1-linux-x64  nodejs  
ln -sf /opt/nodejs/bin/npm /usr/local/bin/
ln -sf /opt/nodejs/bin/node /usr/local/bin/

  • 3、接下来输入下node -v测试下是否安装成功
    在这里插入图片描述

  • 4、环境变量一定要设置好，否则运行js找不到会出现找不到模块

    sudo su
vi /etc/profile
最下面加入几行下面的代码
export NODE_HOME=/opt/nodejs
export PATH=$PATH:$NODE_HOME/bin
export NODE_PATH=$NODE_HOME/lib/node_modules
esc
:wq
source /etc/profile

  • 5、npm install安装慢的时候

  • npm install安装慢的多种解决方案

    npm install gl -g --registry=http://registry.npm.taobao.org
npm install canvas -g --canvas_binary_host_mirror=https://registry.npmmirror.com/-/binary/canvas
或者如下
npm config set registry https://registry.npm.taobao.org
npm install gl -g 
npm install canvas 
或者如下
npm install -g cnpm
cnpm install gl -g 
cnpm install canvas -g
或者如下
npm install -g nrm
nrm use taobao
nrm ls    查看可以用切换的源
npm install gl -g

二、vscode安装使用(windows)

1、下载安装vscode

  • vscode下载地址，一路next就可以安装好
    在这里插入图片描述

2、vscode运行插件Code Runner安装

  • Code Runner是 VSCode 中一个常用的插件，可以方便地在编辑器中快速运行代码
  • 安装：在插件市场搜索Code Runner进行安装
    在这里插入图片描述
  • 运行代码：打开要运行的文件，按下快捷键 Ctrl+Alt+N 或在菜单栏中选择 Run Code，就可以在终端中运行代码
    在这里插入图片描述

3、vscode调试插件JavaScript Debugger插件安装

  • JavaScript Debugger插件是在Chrome开发者工具的基础上进行开发和扩展的插件，所以它们的调试界面和功能与Chrome开发者工具非常相似。取代插件Debugger for Chrome（该插件已弃用），用JavaScript Debugger
  • 安装：在插件市场搜索 JavaScript Debugger进行安装（该插件会打开chrome浏览器，然后挂载到chrome进程，由浏览器处理这条语句并输出结果，然后再显示给vscode的调试器）
    在这里插入图片描述
  • 安装完成后，一定要先打开一个文件夹，然后新建一个或者里面打开一个js文件，随便在行号某一行鼠标点击打上一个断点，然后，按F5键（或者Fn+F5）会跳出如下界，该界面与chrome开发者工具一致
    在这里插入图片描述

4、vscode调试代码运行卡死强制停止

  • 2、如下在output界面，选择鼠标右击然后选择Stop Code Run
    在这里插入图片描述

三、本地js无环境浏览器联调

1、配置环境准备

  • 1、新建一个空的文件夹，打开空文件夹，在里面新建一个js文件；或者直接打开已经存在的文件夹（File > Open Floder），然后打开一个js文件，然后到vscode最左侧第四个按钮，然后选择run and debug
    在这里插入图片描述

  • 2、然后会跳出如下界面，下拉项选择一个Run Current File都可以，然后点击小齿轮设置按钮，设置launch.json配置
    在这里插入图片描述

  • 3、或者F5按钮也可以跳出如上界面；点击左侧第四个选项，然后在点击小齿轮配置launch.json文件
    在这里插入图片描述

  • 4、launch.json配置文件，默认配置含义如下
    在这里插入图片描述

    • version：配置文件的版本，默认是0.2.0
    • configurations：配置域，所有配置都放在这个花括号里面
    • type：调试工具的类型，vscode默认调试工具类型node，你也可以修改为其他
    • name：每个调试配置的名称，可随意起名
    • request：调试工具的启动方式，有launch和attach两种，直接启动本地服务或者挂载远程服务
    • url：指定访问的链接
    • webRoot：指定根目录或者执行文件

  • 5、修改launch.json文件，追加一个配置如下即可直接调试当前打开的js文件
    在这里插入图片描述

    {
    "type": "node",
    "request": "launch",
    "name": "本地js调试",
    "program": "${file}"
},
{
    "name":  "chrome v8环境联调",
    "program": "${file}",
    "request": "launch",
    "type": "node",
    "runtimeExecutable": "node-inspect",
},

  • 6、node全局安装模块，以管理员身份打开cmd窗口，输入如下命令，一定要安装

     npm install -g node-inspect
 npm install -g vm2
    • node-inspect是一个调试工具，它提供了一种可以直接在浏览器中调试Node.js应用程序的方法。通过与Chrome DevTools集成，它可以让开发人员在运行Node.js程序时直接在浏览器中调试代码，而无需使用终端或其他工具。它提供了交互式的调试接口，可以让开发人员检查变量、堆栈跟踪和代码执行路径，并在需要的时候暂停和恢复代码的执行
    • vm2基于Node.js的沙箱模块，它提供了一个安全的环境，可以在其中执行JavaScript代码。vm2模块使用Node.js的vm模块创建一个新的Node.js上下文，然后在该上下文中运行用户提供的代码。在这个上下文中，用户代码无法访问Node.js的全局对象（如global和process），也不能使用Node.js的模块系统加载外部模块
    • vm2与浏览器环境相比，vm2提供的是纯净的v8环境，与浏览器的JavaScript环境有很大的区别。在浏览器中，JavaScript代码可以与DOM元素、浏览器对象交互，而在vm2的环境中，用户代码只能访问沙箱环境中提供的API和对象，不能直接访问浏览器的对象。

2、vscode本地直接调试js

  • 1、首先打开一个文件夹》打开其中的一个js文件》在序号左侧点击打断点》选择本地js调试的配置》按F5即可调出调试界面》点击左侧三角形标识即可和chrome开发者工具一样调试js文件了
    在这里插入图片描述

3、vscode打开chrome标签页无环境联调

  • 1、首先打开一个文件夹》打开其中的一个js文件》在序号左侧点击打断点》选择chrome v8环境联调的配置》按F5即可调出调试界面》到浏览器上打开一个新的标签页
    在这里插入图片描述
  • 2、打开浏览器，随意新建一个标签页，然后F12打开开发者工具，稍等3秒左右，此时会跳出一个绿色的图标 ，只有绿色图标显示了，才代表我们这个无环境联调启动成功
    在这里插入图片描述
  • 3、此时我们点击下绿色图标按钮，它会弹出一个新的开浏览器发者工具界面调试界面，也会同步跳出vscode的界面
    在这里插入图片描述
  • 4、无论是在浏览器的开发者工具页面调试，还是在vscode的页面调试，都会同步输出，同步进行到下一步代码
    在这里插入图片描述

4、vscode打开chrome无环境联调案例

  • 1、先简单了解js中proxy代理的功能，在后续的文章会详细介绍。在Node中，proxy代理是一种机制，可以在不改变原始对象的情况下，控制对其访问的方式和行为。 具体来说，当使用代理时，我们可以在访问对象之前对其进行拦截和修改，从而实现一些特定的功能，比如：
    • 监听属性的访问和修改：可以在访问或修改属性时，做一些额外的操作，比如校验输入值的合法性、记录数据的修改时间等。
    • 禁止或限制属性的访问和修改：可以防止对某些敏感属性的访问或修改，提高数据的安全性。
    • 动态生成属性：可以在访问不存在的属性时，动态生成该属性，并返回一个默认值。
    • 对函数的调用进行拦截：可以在函数被调用前后，做一些额外的操作，比如记录函数的执行时间、校验函数的参数等。
  • 2、简单写了个补环境的例子，关于案例代码在文章末尾，如图由三部分组成，Proxy代理函数功能 + 代理对象 + 待补环境的js代码
    在这里插入图片描述
  • 3、选择无环境联调，请仔细看如下图中已经调试输出的功能；比如js代码中我们先对location的href属性和protocol属性赋值了，所以在proxy代理函数里面set的就有相应的输出； 比如我们测试取location的href属性值了，因为已经存在值了，所以就能取出结果。而另一层面就是navigator的useragent我们一开始并没有补这个环境；所以取值的时候是undefined；这意味着我们要想让这个代码运行走好流程，需要把useragent给补好。比如提前补好navigtor.usergent = ‘Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Mobile Safari/537.36’
    在这里插入图片描述
  • 4、本案例无环境launch.json配置
    一、安装
    npm install -g node-inspect
    npm install -g vm2

二、File>open flode
	打开文件夹，然后选择vscode界面左侧第四个调试图标，然后打开小齿轮，.vscode/launch.json 如下

三、运行
    打开debug_env.js  ，  按F5 选择 本地js文件 或者 chrome无环境联调 运行

    {
    "configurations": [
        {
            "name": "本地js文件",
            "program": "${file}",
            "request": "launch",
            "type": "node"
        },
        {
            "name":  "chrome无环境联调",
            "program": "${file}",
            "request": "launch",
            "type": "node",
            "runtimeExecutable": "node-inspect",

        },

    ]
}
  • 5、本案例的js代码，可以先运行debug_env.js 进行调试
    • debug_env.js
    var fs = require('fs');
const {VM,VMScript} = require('vm2') ;
// 本处code_2.js讲代理功能+补环境的js+原js合并在code_2.js里面了； 实际上可以分为多个js文件拼接在一起
const codefile = `${__dirname}/code_2.js`;  
const vm = new VM();
debugger
// 下面的fs.readFileSync(codefile)可以多个相加 fs.readFileSync(codefile1) + fs.readFileSync(codefile2)
const script = new VMScript(fs.readFileSync(codefile), `${__dirname}/sy_debugging.js`);
console.log(vm.run(script)) 
debugger
    • code_2.js
    /* 1、框架代理功能放在顶部，以及部分已经补好的环境参数 */
var handlerProxy = function(o){
    return new Proxy(o, {
        set(target, property, value){
            debugger;
            console.log("set",target,property,value);
            return Reflect.set(...arguments);
        },
        get(target, property, receiver){   
            debugger;
            console.log("get",target,property,target[property]);
            return target[property];
        }
    });
}
debugger;
/* 2、给常见的环境对象挂上代理 */
window = global;
navigator = class navigator{};
document = class document{};
location = class location{};
location.protocol = 'https:'; //已经补好的部分
location.href = 'https://blog.csdn.net/weixin_43411585/';  //已经补好的部分
window = handlerProxy(window);
navigator = handlerProxy(navigator);
document = handlerProxy(document);
location = handlerProxy(location);
debugger;
/* 3、原生待补环境的js代码放在底部，调试输出观察 */
console.log(">>>准备测试代理set输出");
location.href = 'https://mp.weixin.qq.com/s/uJrWHTGW1GhHEEqW_xUMgg';
console.log(">>>准备测试代理get输出");
console.log(location.href)
console.log("开始测试代理get输出值是undefined， navigator缺userAgent值是什么");
var test1 = navigator.userAgent;  // 'vx号 Vskzxc； 备注csdn来的'
var test2 = window.document.referrer;
console.log("测试代理get输出", test1)
debugger;
console.log("测试结束")

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/36856.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Docker 安装与基本使用

Docker 安装与基本使用

一、简介 Docker 官方文档、Docker 中文文档，更新会落后于官方文档 什么是 Docker ? Docker 是一个应用打包、分发、部署的工具，也可以把它理解为一个轻量的虚拟机，它只虚拟软件需要的运行环境，多余的一点都不要，而普…
阅读更多...
【C++】list模拟实现

【C++】list模拟实现

🚀 作者简介：一名在后端领域学习，并渴望能够学有所成的追梦人。 🚁 个人主页：不 良 🔥 系列专栏：🛸C 🛹Linux 📕 学习格言：博观而约取&#xff0…
阅读更多...
LVS负载均衡集群之LVS-DR部署

LVS负载均衡集群之LVS-DR部署

目录 一、lVS-DR集群概述 二、LVS-DR数据包流向分析 四、LVS-DR特性 五、DR模式 LVS负载均衡群集部 5.0配置虚拟 IP 地址（VIP 192.168.14.180） 5.1.配置负载调度器(192.168.14.101) 5.2部署共享存储（NFS服务器：192.168.14.10…
阅读更多...
6.2Java EE——Spring的入门程序

6.2Java EE——Spring的入门程序

下面通过一个简单的入门程序演示Spring框架的使用，要求在控制台打印“张三，欢迎来到Spring”，实现步骤具体如下。 1、在IDEA中创建名称为chapter06的Maven项目，然后在pom.xml文件中加载需使用到的Spring四个基础包以及Spring依赖…
阅读更多...
etcd的使用

etcd的使用

什么是etcd ETCD是一个分布式、可靠的key-value存储的分布式系统，用于存储分布式系统中的关键数据；当然，它不仅仅用于存储，还提供配置共享及服务发现；基于Go语言实现 。 etcd的特点 完全复制：集群中的每…
阅读更多...
基于springboot+Redis的前后端分离项目之分布式锁（四）-【黑马点评】

基于springboot+Redis的前后端分离项目之分布式锁（四）-【黑马点评】

🎁🎁资源文件分享 链接：https://pan.baidu.com/s/1189u6u4icQYHg_9_7ovWmA?pwdeh11 提取码：eh11 分布式锁 分布式锁1 、基本原理和实现方式对比2 、Redis分布式锁的实现核心思路3 、实现分布式锁版本一4 、Redis分布式锁误删情况…
阅读更多...
Linux进程信号

Linux进程信号

文章目录： 信号入门从生活角度看信号技术应用角度看信号使用 kill -l 命令查看系统定义的信号列表信号处理常见方式概览 产生信号通过终端按键产生信号核心转储（core dump）的作用调用系统函数向进程发信号由软件条件产生信号硬件异常产生信号…
阅读更多...
0305kali linux配置运行-docker-macos aarm64

0305kali linux配置运行-docker-macos aarm64

文章目录 1 下载运行2 配置2.1 配置系统环境2.2 配置SSH服务2.3 安装工具 3 问题总结结语 1 下载运行 拉取kali linux镜像 docker pull kalilinux/kali-rolling该镜像为“纯净版”系统，没有任何工具，体积小。下面当我们运行起来之后，到容器中…
阅读更多...
Android Java代码与JNI交互 JNI访问Java构造方法(九)

Android Java代码与JNI交互 JNI访问Java构造方法(九)

🔥 Android Studio 版本 🔥 🔥 创建包含JNI的类 JNIConstructorClass.java 🔥 package com.cmake.ndk1.jni;import com.cmake.ndk1.model.Animal;public class JNIConstructorClass {static {System.loadLibrary("constructor-class-lib");}public native…
阅读更多...
Visual studio 2015下载安装以及缺包提示的处理方法

Visual studio 2015下载安装以及缺包提示的处理方法

最近要加入的比赛团队需要用到Visual studio 2015，百度后找到很多资源，自己也转到了百度网盘。中英文都有，需要的可以下载。 链接：https://pan.baidu.com/s/12gpVwXfQxfdkXub-IwhWFw?pwds325 提取码：s325 --来自百…
阅读更多...
为什么需要多语言并行机器翻译？

为什么需要多语言并行机器翻译？

随着全球化的加速和不同语言之间的交流需求不断增长，多语言机器翻译（Multilingual Parallel Machine Translation）成为一个备受关注的领域。传统上，机器翻译系统主要集中于一对特定语言之间的翻译，但这种单一语言对的模…
阅读更多...
【观察者模式】 ——每天一点小知识

【观察者模式】 ——每天一点小知识

💧 观察者模式 \color{#FF1493}{观察者模式} 观察者模式💧 🌷 仰望天空，妳我亦是行人.✨ 🦄 个人主页——微风撞见云的博客🎐 🐳 《数据结构与算法》专栏的文章图文并茂🦕…
阅读更多...
uniapp 打包安卓apk (原生App)云打包

uniapp 打包安卓apk (原生App)云打包

uniapp 打包安卓apk (原生App)云打包 hbuilder中操作 项目的一些配置appid DCloud appid 用途/作用/使用说明： https://ask.dcloud.net.cn/article/35907 右键我们项目目录-》发行-》原生APP-云打包 说明： 1. 打包安卓，只选择安卓打包项&…
阅读更多...
基于pyqt和卷积网络CNN的中文汉字识别

基于pyqt和卷积网络CNN的中文汉字识别

直接上效果演示图： 通过点击按钮可以实现在画板上写汉字识别和加载图片识别两个功能。 视频演示和demo仓库地址在b站视频001期： 到此一游7758258的个人空间-到此一游7758258个人主页-哔哩哔哩视频 所有代码展示： 十分的简洁，主…
阅读更多...
jni编程（windows+JDK11+clion）

jni编程（windows+JDK11+clion）

JNI是Java Native Interface的缩写，通过使用 Java本地接口书写程序，可以确保代码在不同的平台上方便移植。 一、java代码 package org.example;public class Main {static {System.load("");}public static void main(String[] args) {Syste…
阅读更多...
医学图像处理——读取和解读NII文件

医学图像处理——读取和解读NII文件

一 预备知识 NII文件的存储格式网上有很多资料，在此只做一点简单的描述。nii是一种文件格式，它存储的是在空间中占有一定体积的小方块的物理位置和该位置对应的像素值。这个小方块我们也称之为体素(voxel)。存储的形式是一个三维数组(3D array)&#xf…
阅读更多...
ESP32连接云服务器【WebSocket】

ESP32连接云服务器【WebSocket】

ESP32连接云服务器【ESP32宝塔面板】 文章目录 ESP32连接云服务器【ESP32宝塔面板】👨‍🏫内容1：背景👨‍⚖️内容2：服务器配置👨‍💻内容3：ESP32配置 👨‍🏫…
阅读更多...
k8s 就绪探针

k8s 就绪探针

【k8s 系列】k8s 学习二十，就绪探针 提起探针，不知兄dei 们是否有印象，之前我们分享过存活探针，分享存活探针是如何确保异常容器自动重启来保持应用程序的正常运行，感兴趣的可以查看文章 k8s 系列k8s 学习十七&#x…
阅读更多...
windows下使用arp 协议

windows下使用arp 协议

/ //自动扫描局域网存活主机 本程序是利用arp协议去获取局域网中的存活主机 arp协议概述 地址解析协议，即ARP（Address Resolution Protocol），是根据IP地址获取物理地址的一个TCP/IP协议。主机发送信息时将包含目标IP地址的ARP请…
阅读更多...
音视频——码率、帧率越高越清晰？分辨率、像素、dpi的关系

音视频——码率、帧率越高越清晰？分辨率、像素、dpi的关系

一 前言 本期我介绍一下视频的一些基础概念，如帧率、码率、分辨率、像素、dpi、视频帧、I帧、P帧、gop等。我i初步学习音视频，给这些专业词汇进行扫盲 会解释多少码率是清晰的，是否帧率越高越流畅等问题。 这些概念是比较杂乱的&#xff0c…
阅读更多...
最新文章

Copyright @ 2022~2023