kkevsekk1 / auto.js-vscode-extension Goto Github PK

View Code? Open in Web Editor NEW

This project forked from 710850609/auto.js-vscode-extension

117.0 4.0 82.0 5.84 MB

A simple development plugin for Auto.js.

License: GNU General Public License v2.0

TypeScript 47.03% HTML 1.01% JavaScript 51.96%

auto.js-vscode-extension's Introduction

Autox.js-VSCodeExt

插件背景

基于Auto.js-VSCodeExt-Fixed，0.3.8版本开发，主要添加右键【文件夹】保存项目到设备,右键【js文件】运行，js文件中点击右上角运行脚本，结合webpack，编译打包一气呵成，插件里还有几个功能（如保存普通资源脚本目录等）是以前的代码无法快速实现的。可能修改安卓apk。详细信息请看change log

注意：

本插件不能和老版本的 Auto.js-VSCodeExt-Fixed，0.3.8 同时启用，因为使用了同样的端口。功能会冲突！

源码仓库

桌面编辑器Visual Studio Code的插件。可以让Visual Studio Code支持Autox.js开发。

Install

在VS Code中菜单"查看"->"扩展"->输入"Autox.js"搜索，即可看到"Autox.js-VSCodeExt"插件，安装即可。插件的更新也可以在这里更新。

Features

在VS Code的开发者工具实时显示Auto.js的日志与输出
在VS Code命令中增加Run, Stop, Rerun, Stop all等选项。可以在手机与电脑连接后把vscode编辑器中的脚本推送到AutoJs中执行，或者停止AutoJs中运行的脚本。
在Autox.js扫码连接电脑
通过数据线(ADB)连接电脑

Usage

Step 1

按 Ctrl+Shift+P 或点击"查看"->"命令面板"可调出命令面板，输入 Autox.js 可以看到几个命令，移动光标到命令Auto.js Autox,js: Start All Server，按回车键执行该命令。

如果你想使用数据线连接电脑，但是你调用命令后，VS Code右下角没有显示 "ADB: Tracking started" ，你需要先启动或安装ADB服务，启动命令：adb start-server。下载页面：ADB(**站) 或 ADB(国际站)，然后在adb所在的目录运行./adb start-server。

此时VS Code会在右下角显示 "Auto.js server running..." ，即开启服务成功。

Step 2

1. 无线连接：

将手机连接到电脑启用的Wifi或者同一局域网中。在Autox.js的侧拉菜单中启用调试服务，并输入VS Code右下角显示的IP地址，等待连接成功。你也可以点击VS Code右下角"Auto.js server running..."通知的下方按钮 "Show QR code" 或按 Ctrl+Shift+P 搜索执行Show qr code命令，然后用Autox.js扫码连接。

2. 通过数据线连接(ADB)：

如要在通过 USB 连接的设备上使用 adb，您必须在设备的系统设置中启用 USB 调试（位于开发者选项下）。

在搭载 Android 4.2 及更高版本的设备上，“开发者选项”屏幕默认情况下处于隐藏状态。如需将其显示出来，请依次转到设置 > 关于手机，然后点按版本号七次。返回上一屏幕，在底部可以找到开发者选项。

在某些设备上，“开发者选项”屏幕所在的位置或名称可能有所不同。

在确保手机已经在开发者选项中打开USB调试后，在Autox.js的侧拉菜单中启用ADB调试，再使用数据线连接电脑，插件会自动识别设备。

Step 3

之后就可以在电脑上编辑JavaScript文件并通过命令Run或者按键F5在手机上运行了。

Commands

按 Ctrl+Shift+P 或点击"查看"->"命令面板"可调出命令面板，输入 Auto.js 可以看到几个命令：

开启服务并监听ADB设备(Start all server: 相当于同时调用(Start Server)和(Start track adb devices)
停止服务并停止监听ADB设备(Stop all server)
开启服务(Start Server)：启动插件服务。之后在确保手机和电脑在同一区域网的情况下，在Auto.js的侧拉菜单中使用连接电脑功能连接
停止服务(Stop Server)：停止插件服务
开始监听ADB设备(Start track adb devices): 开启后会自动连接ADB设备
停止监听ADB设备(Stop track adb devices)
手动连接ADB设备(Manually connect adb device)
手动关闭设备连接(Manually disconnect device)
打开文档(Open Document)：打开Auto.js开发文档
显示服务端二维码(Show qr code): 显示服务端二维码，之后可用客户端扫码连接
显示服务端ip地址(Show server address)
运行脚本(Run)：运行当前编辑器的脚本。如果有多个设备连接，则在所有设备运行
重新运行(Rerun)：停止当前文件对应的脚本并重新运行。如果有多个设备连接，则在所有设备重新运行
停止当前脚本(Stop)：停止当前文件对应的脚本。如果有多个设备连接，则在所有设备停止
停止所有脚本(Stop All)：停止所有正在运行的脚本。如果有多个设备连接，则在所有设备运行所有脚本
保存到所有设备(Save)：保存当前文件到手机的脚本默认目录（文件名会加上前缀remote)。如果有多个设备连接，则在所有设备保存
在指定设备运行脚本(Run On Device)：弹出设备菜单并在指定设备运行脚本
保存到指定设备(Save On Device)：弹出设备菜单并在指定设备保存脚本
新建项目(New Project)：选择一个空文件夹（或者在文件管理器中新建一个空文件夹），将会自动创建一个项目
运行项目(Run Project)：运行一个项目，需要Auto.js 4.0.4Alpha5以上支持
保存项目到设备(Save Project)：保存一个项目，需要Auto.js 4.0.4Alpha5以上支持

以上命令一些有对应的快捷键，参照命令后面的说明即可。

以下是原插件开发日志，二次开发变更日志请在`更改日志`查看

Log

要显示来自Auto.js的日志，打开 VS Code上面菜单的"帮助"->"切换开发人员工具"->"Console"即可。

Release Notes

0.0.1

首次发布。包含以下特性：

启动，停止服务
显示Auto.js的日志
运行，停止，重新运行脚本
多设备连接支持，允许在运行时选择要运行的设备

0.0.2

增加以下特性：

脚本保存到设备

0.2.0

增加以下特性：

New Project（新建项目）：选择一个空文件夹（或者在文件管理器中新建一个空文件夹），将会自动创建一个项目
Run Project（运行项目）：运行一个项目，需要Auto.js 4.0.4Alpha5以上支持
Save Project（保存项目）：保存一个项目，需要Auto.js 4.0.4Alpha5以上支持

For more information

Github repo

Enjoy!

auto.js-vscode-extension's People

Contributors

Stargazers

Watchers

auto.js-vscode-extension's Issues

9317端口被

2023-10-08 14:02:15.914 [error] [Extension Host] server error: Error: listen EADDRINUSE: address already in use 0.0.0.0:9317
at Server.setupListenHandle [as _listen2] (node:net:1740:16)
at listenInCluster (node:net:1788:12)
at doListen (node:net:1937:7)
at process.processTicksAndRejections (node:internal/process/task_queues:83:21)

偶发会出现这个端口被占用因为我这里查看的话又查询不到具体是什么进程使用了该端口, 想问问能否可以修改端口号

平板无法自我通过127.0.01握手

平板安装Termux，Termux里面再安装code-server编辑器。
通过IP加地址端口加平板的目录就可以。

平板用第三方浏览器127.0.0.1:8080自我访问编辑器界面
http://127.0.0.1:8080/?folder=/data/data/com.termux/files/home/storage/shared/脚本

但是这个插件无法通过127.0.0.1与本机自我握手！
而且平板是支持无线调试。

这插件要配合 webpack-autojs 这个工程使用是最佳实践，否则用最原始版本无任何差异。

webpack-autojs

无法执行代码

显示command 'extension.run' not found

版本: 1.76.0 (user setup)
提交: 92da9481c0904c6adfe372c12da3b7748d74bdcb
日期: 2023-03-01T10:22:44.506Z
Electron: 19.1.11
Chromium: 102.0.5005.196
Node.js: 16.14.2
V8: 10.2.154.26-electron.0
OS: Windows_NT x64 10.0.19045
沙盒化: No

保存到所有设备（save）-保存图片

保存图片的话，得到的图片是无效图片，图片打不开。网上搜了一下好像说用fs.readFileSync(filename, 'utf8')这个方式去读图片是会导致数据错误

app示例代码点击编辑按钮，页面空白

点击编辑之后，页面空白

Connect Error: Error: socket hang up 手机连接电脑报错：连接超时

无论是无线网还是adb连接都不行

Bug：无法运行脚本。使用保存项目到设备之后。

Can't resolve relative module ID "./utils/util" when require() is used outside of a module (/android_asset/modules/jvm-npm.js#87)

复现过程

新建项目，包含一个子目录文件util/util.js，和一个文件main.js保存项目到设备。
运行main.js。此脚本包含相对路径引用。require('./util/uil.js')
f5调试，出现异常

猜测

vscode插件，发送文件调试。
位于apk端的服务接受到文件，开始执行。但是此时，执行的根目录，为apk自己默认的 /脚本/ 目录。
而，因为，之前保存项目到文件，此脚本的其他require文件，已经被包装到了，一个项目目录下，即 /脚本/projectName/。导致此文件的引用找不到。

而在apk断直接运行文件的时候。因为require采用的是相对路径。所以，直接就可以运行。但是vscode远程调试时候，根目录，并没有切换指向。

修改建议

修改范围：

插件端，发送文件调试的时候，标记，在项目内运行。即，添加，参数，projectPath
apk端，解析这个prejectPath，自动，移动执行path。

备注：如果出现结构层次复杂的场景。建议 projectPath，参数，以手动输入或者文件配置的方式，这样，更加灵活的，使得运行脚本，配置在apk断的依赖目录

实现目标

vscode可以灵活的，在运行脚本的功能中，调整依赖文件路径。并且发送给apk，apk同时能够自动调整path。

注意，建立在猜测基础上的建议，如果存在问题，还请海涵。

能用ip地址连接，但是qr code不会显示

手机和电脑通过ip地址连接上了，但是vs code按 Ctrl+Shift+P 搜索执行Show qr code命令，有Qr code窗口但是不会显示二维码。

关于Auto.js-Autox.js-VSCodeExt v1.109.0不显示二维码的临时解决办法

需要修改文件 -----.vscode\extensions\aaroncheng.auto-js-vsce-fixed-1.109.0\out\extension.js
类Extension（98行-135行）中的内容

修改前后对比

修改完成之后，需要重启vscode。

class Extension {
    constructor() {
        this.documentViewPanel = undefined;
        this.qrCodeViewPanel = undefined;
        this.documentCache = new Map();
    }

    showServerAddress() {
        let servers = server.getIPs().join(":" + server.getPort() + " or ") + ":" + server.getPort();
        vscode.window.showInformationMessage(`Auto.js Autox.js \r\n server running on ${servers}`);
    }

    showQrCode() {
        let ips = server.getIPs();
        if (ips.length == 1) {
            this.showQrcodeWebview(ips[0]);
        } else {
            vscode.window.showQuickPick(ips).then(ip => {
                this.showQrcodeWebview(ip);
            });
        }
    }

    showQrcodeWebview(ip) {
        let url = `ws://${ip}:${server.getPort()}`;
        if (!this.qrCodeViewPanel) {
            this.qrCodeViewPanel = vscode.window.createWebviewPanel('Qr code', "Qr code", vscode.ViewColumn.Beside, {
                enableScripts: true,
            });

            this.qrCodeViewPanel.onDidDispose(() => {
                this.qrCodeViewPanel = undefined;
            }, undefined, exports._context.subscriptions);
        }
        this.qrCodeViewPanel.webview.html = this.getQrCodeHtml(this.qrCodeViewPanel.webview, url);
    }

    getQrCodeHtml(webview, text) {
        const icon = this.getVscodeResourceUrl(webview, "logo.png");
        const qrcodejs = this.getVscodeResourceUrl(webview, "assets/qrcode.js");
        return `<!DOCTYPE html>

    getVscodeResourceUrl(webview, relativePath) {
        const onDiskPath = vscode.Uri.file(path.join(exports._context.extensionPath, relativePath));
        return webview.asWebviewUri(onDiskPath);
    }

请求增加快照捕获服务

我是用快照捕获推荐的weditor，用手机提供HTTP服务上传快照

gkd介绍了网页审查工具，基于weditor部署了服务，我拿一个分享下：https://i.gkd.li/i/15476858

AutoX.js应该像gkd添加HTTP服务，方便VSCode通过网页快照选择某个控件查看属性名、ID、位置等信息，更方便调整代码了