Midscene.js 是字节开源的面向 Web 场景的多模态 Agent，旨在解决传统自动化工具依赖 DOM 结构、维护成本高的问题。它结合视觉识别与自然语言理解，通过自然语言描述意图驱动浏览器操作，无需编写复杂选择器。支持 Agent 和 Test 两种集成模式，可生成可视化报告。适用于前端测试、数据采集及 RPA 场景，能显著提升自动化脚本的稳定性和开发效率。
在 Web 技术飞速发展的当下，自动化操作与测试已成为提升研发效率、保障产品质量的核心环节。从早期 Selenium 主导的元素定位时代，到 Playwright 带来的跨浏览器一致性体验，再到 RPA 工具的可视化流程搭建，Web 自动化领域始终在探索更高效、更智能的解决方案。然而，传统工具普遍面临两大痛点：一是依赖精准的 DOM 结构或 XPath 表达式，一旦页面布局微调，脚本便可能失效；二是缺乏对'视觉场景'的理解能力，无法像人类一样通过界面元素的外观、位置等信息完成操作。
字节跳动开源的Midscene.js正是为解决这些痛点而生。作为一款面向 Web 场景的多模态 Agent，它创新性地将视觉识别与自然语言理解融入自动化流程，打破了传统工具对代码层面元素定位的强依赖，让 Web 自动化从'代码驱动'迈向'意图驱动'。本文将从技术背景、核心特性、安装部署、实战案例、进阶技巧等维度，全方位拆解 Midscene.js 的能力，帮助开发者快速掌握这一工具，重构 Web 自动化与测试工作流。
在深入技术细节前，我们首先需要明确 Midscene.js 与传统 Web 自动化工具的差异——它并非替代 Playwright 或 Selenium，而是基于这些工具构建的'智能增强层'。通过整合多模态大模型的视觉理解能力，Midscene.js 让自动化脚本具备了类似人类的界面认知能力，其核心优势可概括为以下四点：
传统自动化工具的核心逻辑是'找到元素→执行操作'，其中'找到元素'依赖 ID、class、XPath 等代码层面的标识。但在实际场景中，这些标识可能因前端框架渲染、版本迭代而变化，导致脚本维护成本极高。
Midscene.js 的突破在于引入视觉定位能力：它会将浏览器页面截图传入多模态大模型（如 Qwen2.5-VL），由模型根据元素的外观（如按钮颜色、文字内容）、位置（如'页面顶部搜索框''右下角确认按钮'）等视觉信息定位目标，再结合 Playwright 等工具的底层能力执行操作。同时，开发者只需通过自然语言描述操作意图（如'在搜索框输入'Midscene'并点击搜索'），无需编写复杂的元素定位代码，大幅降低了自动化脚本的编写门槛。
例如，传统 Playwright 脚本需要明确指定搜索框的选择器：
// 传统 Playwright 脚本
await page.locator('#kw').fill('Midscene');
await page.locator('#su').click();
而使用 Midscene.js 时，只需通过自然语言描述意图：
// Midscene.js 脚本
await agent.aiAction('帮我在搜索框中输入"Midscene"，然后点击"百度一下"');
这种'意图驱动'的模式，让自动化脚本不再受限于 DOM 结构，即使页面元素的 ID 或 class 发生变化，只要视觉外观和功能位置不变，脚本依然能正常执行。
Midscene.js 并非一个'一刀切'的工具，而是提供了两种核心集成模式，可根据项目需求灵活选择：
| 集成模式 | 核心逻辑 | 适用场景 | 优势 |
|---|---|---|---|
| 三方库集成（Agent 模式） | 将 Midscene.js 作为独立库引入现有 Playwright 脚本，通过 PlaywrightAgent 实例调用智能接口 | 已有自动化项目的智能化改造、复杂定制化场景（如结合业务逻辑判断）、快速功能验证 | 自由度高，可与现有代码无缝衔接，无需修改项目架构 |
| 框架插件集成（Test 模式） | 将 Midscene.js 作为 Playwright Test 框架的插件，通过配置文件注入全局能力，脚本中直接使用 aiInput/aiTap 等封装好的接口 | 全新自动化测试项目、基于 Playwright Test 的标准化测试流程、需要生成详细执行报告的场景 | 集成度高，提供统一的测试规范和报告能力，团队协作更高效 |
这种设计既满足了'快速体验'的轻量需求，也支持'大型项目标准化'的重度需求，覆盖了从个人开发到团队协作的全场景。
传统自动化工具的执行日志多为文本形式，仅记录'操作是否成功'，无法直观呈现执行过程中的界面状态。Midscene.js 则提供了多维度可视化报告，这一特性对测试场景尤为重要——报告中不仅包含每个步骤的执行耗时、成功状态，还会记录：
报告以 HTML 格式自动生成，存储在项目目录的 midscene_run/report 文件夹下，双击即可在浏览器中查看。例如，在'百度搜索华为手机'的测试案例中，报告可清晰展示'输入关键词→点击搜索→滚动页面→验证结果'的全流程，甚至能定位到模型如何识别'搜索框'这一元素，极大降低了问题排查的难度。
Midscene.js 的能力不仅限于桌面端 Chrome/Edge 浏览器，还支持：
这种跨场景支持让 Midscene.js 能够覆盖更复杂的业务需求，例如'桌面端生成订单→移动端验证订单状态'的全链路自动化测试。
Midscene.js 目前仅支持 JavaScript/TypeScript（官方明确表示暂无 Python 支持计划），因此需要先确保本地环境已安装 Node.js（建议 v16+）和包管理工具（如 pnpm、npm 或 yarn）。以下是详细的安装与配置步骤：
Midscene.js 的核心依赖包括自身库、Playwright（底层自动化引擎）、Playwright Test（测试框架）以及 tsx（TypeScript 运行时）。推荐使用 pnpm 安装（效率更高，依赖冲突更少），执行以下命令：
# 安装核心依赖，--save-dev 表示仅用于开发环境
pnpm add @midscene/web playwright @playwright/test tsx --save-dev
安装完成后，需初始化 Playwright 的浏览器驱动（首次使用时需下载对应浏览器的二进制文件）：
# 初始化 Playwright，自动下载 Chrome、Firefox、Safari 驱动
npx playwright install
Midscene.js 的视觉定位能力完全依赖于支持视觉理解的多模态大模型，目前官方推荐使用字节跳动的 Qwen2.5-VL 系列模型（如 Qwen2.5-VL-72B），也支持其他符合 OpenAI API 格式的多模态模型（如 GPT-4V）。模型配置需通过环境变量实现，步骤如下：
在项目根目录下新建 .env 文件，用于存储模型接口地址、API 密钥等敏感信息（避免硬编码到代码中）。以使用本地部署的 Qwen2.5-VL 模型为例，配置内容如下：
# 模型接口地址（若使用 OpenAI 官方 API，此处为 https://api.openai.com/v1）
OPENAI_BASE_URL="http://192.168.1.100:8000/v1"
# 模型 API 密钥（本地部署的模型可自定义，官方 API 需填写真实密钥）
OPENAI_API_KEY="sk-your-api-key-here"
# 使用的模型名称（需与部署的模型名称一致）
MIDSCENE_MODEL_NAME="Qwen2.5-VL-72B"
# 启用 Qwen-VL 模型的专属适配（非 Qwen 系列可删除此配置）
MIDSCENE_USE_QWEN_VL=1
模型配置完成后，需确保接口可正常访问。可通过 curl 命令测试模型是否能响应请求：
curl -X POST ${OPENAI_BASE_URL}/chat/completions \
-H "Content-Type: application/json" \
-H "Authorization: Bearer ${OPENAI_API_KEY}" \
-d '{ "model": "'"${MIDSCENE_MODEL_NAME}"'", "messages":[{"role":"user", "content":"描述一下这张图片的内容", "image_url":{"url":"data:image/png;base64,..."}}]}'
若返回包含'content'字段的 JSON 响应，说明模型接口正常；若提示'连接超时'或'权限错误'，需检查模型部署地址、API 密钥是否正确。
为便于后续脚本管理和报告查看，建议按照以下结构组织项目（以 TypeScript 项目为例）：
midscene-web-demo/ # 项目根目录
├── .env # 模型配置文件
├── package.json # 依赖配置
├── playwright.config.ts # Playwright 框架配置（Test 模式需用）
├── scripts/ # 自动化脚本目录
│ ├── agent-demo.ts # Agent 模式示例脚本
│ └── test-demo.spec.ts # Test 模式示例脚本（需.spec.ts 后缀）
├── midscene_run/ # Midscene 自动生成的目录
│ └── report/ # 可视化报告存储路径
└── node_modules/ # 依赖包目录
其中，midscene_run/report 目录无需手动创建，Midscene.js 会在脚本执行后自动生成。
本节将通过'百度搜索'和'电商商品筛选'两个真实场景，分别演示 Agent 模式和 Test 模式的具体用法，帮助开发者快速上手。
Agent 模式的核心是通过 PlaywrightAgent 类将 Midscene 的智能能力注入 Playwright 页面实例，适用于已有 Playwright 项目的快速改造。以下以'打开百度→搜索'Midscene.js'→关闭浏览器'为例，完整演示脚本编写与执行过程。
// 导入 Playwright 的 Chrome 浏览器驱动
import { chromium } from 'playwright';
// 导入 Midscene 的 PlaywrightAgent 类
import { PlaywrightAgent } from '@midscene/web/playwright';
// 加载.env 配置文件
import 'dotenv/config';
// 定义睡眠函数，用于等待页面加载（可选，便于观察过程）
const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
// 主执行函数
async function runAgentDemo() {
// 1. 启动 Chrome 浏览器（此处指定使用 Edge 浏览器渠道，也可改为'chrome'）
const browser = await chromium.launch({
channel: 'msedge', // 浏览器渠道：msedge/chrome/firefox/safari
headless: false, // 关闭无头模式（true 则不显示浏览器窗口）
args: ['--no-sandbox', '--disable-setuid-sandbox'] // 解决 Linux 环境下的权限问题
});
// 2. 创建新的页面实例
const page = await browser.newPage();
// 设置页面视口大小（建议固定，避免不同分辨率影响视觉定位）
await page.setViewportSize({ width: 1280, height: 768 });
try {
// 3. 导航到百度首页
await page.goto('https://www.baidu.com');
// 等待 5 秒，便于观察页面加载（实际项目可删除）
await sleep(5000);
// 4. 初始化 Midscene Agent，传入页面实例
const agent = new PlaywrightAgent(page);
// 5. 通过自然语言执行操作：输入关键词并搜索
console.log('开始执行搜索操作...');
const result = await agent.aiAction('帮我在页面顶部的搜索框中输入"Midscene.js 字节开源"，然后点击右侧的"百度一下"按钮');
// 6. 验证操作结果（此处通过判断页面标题是否包含关键词）
const pageTitle = await page.title();
if (pageTitle.includes('Midscene.js')) {
console.log('操作成功！搜索结果页面标题：', pageTitle);
} else {
console.warn('操作可能失败，页面标题：', pageTitle);
}
// 等待 10 秒，观察搜索结果（实际项目可删除）
await sleep(10000);
} catch (error) {
console.error('执行过程中出现错误：', error);
} finally {
// 7. 关闭浏览器（无论成功与否，确保资源释放）
await browser.close();
console.log('浏览器已关闭');
}
}
// 执行脚本
runAgentDemo();
在项目根目录下执行以下命令，通过 tsx 运行 TypeScript 脚本：
npx tsx scripts/agent-demo.ts
执行过程中会出现以下现象：
若执行失败（如模型未定位到搜索框），可检查以下问题：
.env 文件中的模型地址、API 密钥是否正确；Test 模式基于 Playwright Test 框架，将 Midscene 的能力封装为全局测试工具（如 aiInput、aiTap、aiAssert），适用于构建标准化的自动化测试流程，且支持生成详细的可视化报告。以下以'电商商品筛选测试'为例（模拟京东搜索'笔记本电脑'并筛选'销量最高'），演示 Test 模式的用法。
Test 模式需要在 Playwright 的配置文件中注入 Midscene 的报告插件，并配置测试环境（如超时时间、浏览器渠道）：
import { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = {
// 测试脚本目录（需与实际脚本路径一致）
testDir: './scripts',
// 全局测试超时时间（防止模型处理过慢导致脚本超时）
timeout: 120000, // 120 秒
// 报告配置：同时生成 Playwright 默认报告和 Midscene 可视化报告
reporter: [
['list'], // Playwright 默认的列表式报告（控制台输出）
['@midscene/web/playwright-reporter', {
type: 'merged' // 报告类型：merged（所有用例合并为一个报告）/ separate（每个用例一个报告）
}]
],
// 断言超时时间
expect: {
timeout: 20000 // 20 秒
},
// 全局浏览器配置
use: {
headless: false, // 关闭无头模式，便于观察测试过程
viewport: { width: 1280, height: 768 }, // 固定视口大小
ignoreHTTPSErrors: true, // 忽略 HTTPS 证书错误（部分测试环境可能需要）
actionTimeout: 30000, // 单个操作（如点击、输入）的超时时间（30 秒）
navigationTimeout: 60000, // 页面导航超时时间（60 秒）
trace: 'retain-on-failure' // 测试失败时保留追踪日志，便于排查问题
},
// 测试项目配置（可配置多个浏览器渠道）
projects: [
{ name: 'Chrome 测试', use: { channel: 'chrome' } },
{ name: 'Edge 测试', use: { channel: 'msedge' } }
]
};
export default config;
Test 模式的脚本需遵循 Playwright Test 的规范，通过 test 函数定义测试用例，并从 fixture.ts（Midscene 提供的测试夹具）中获取封装好的智能工具。首先需要在 scripts 目录下创建 fixture.ts 文件，引入 Midscene 的测试夹具：
// scripts/fixture.ts
import { test as baseTest } from '@playwright/test';
import { MidsceneFixtures } from '@midscene/web/playwright-test';
// 扩展 Playwright Test 的测试夹具，注入 Midscene 的智能工具
export const test = baseTest.extend<MidsceneFixtures>({
...MidsceneFixtures
});
// 导出 expect 用于断言
export { expect } from '@playwright/test';
之后编写测试用例脚本 test-demo.spec.ts：
// 导入扩展后的 test 和 expect
import { test, expect } from './fixture';
// 加载.env 配置
import 'dotenv/config';
// 定义测试用例：京东搜索笔记本电脑并筛选销量最高
test('京东商品搜索与销量筛选测试', async ({
page, // Playwright 页面实例
aiInput, // Midscene 封装：输入操作
aiTap, // Midscene 封装：点击操作
aiScroll, // Midscene 封装：滚动操作
aiWaitFor, // Midscene 封装：等待操作
aiQuery, // Midscene 封装：数据提取操作
aiAssert // Midscene 封装：断言操作
}) => {
// 步骤 1：导航到京东首页
await page.goto('https://www.jd.com');
// 等待页面加载完成（直到网络空闲）
await page.waitForLoadState('networkidle');
console.log('已导航到京东首页');
// 步骤 2：在顶部搜索框输入'笔记本电脑'
await aiInput('笔记本电脑', '页面顶部中央的搜索框');
console.log('已输入搜索关键词');
// 步骤 3：点击搜索按钮
await aiTap('搜索框右侧的红色'搜索'按钮');
console.log('已点击搜索按钮，等待结果加载');
// 步骤 4：等待搜索结果页面加载（直到出现'销量'筛选选项）
await aiWaitFor('页面中出现'销量'筛选选项', { timeoutMs: 30000 });
console.log('搜索结果页面已加载');
// 步骤 5：点击'销量'筛选，按销量从高到低排序
await aiTap('筛选栏中的'销量'选项');
// 等待排序完成（直到页面商品列表更新）
await aiWaitFor('商品列表按销量重新排序', { timeoutMs: 20000 });
console.log('已按销量筛选商品');
// 步骤 6：滚动到页面底部，加载更多商品
await aiScroll({
direction: 'down', // 滚动方向：down（向下）/ up（向上）
scrollType: 'untilBottom' // 滚动方式：untilBottom（滚到底部）/ byDistance（按距离滚动）
});
console.log('已滚动到页面底部');
// 步骤 7：提取前 5 个商品的名称和价格（通过 aiQuery 从页面中提取结构化数据）
const top5Products = await aiQuery<Array<{ name: string; price: string }>>('提取当前页面中前 5 个商品的名称和价格，返回格式为 [{name:"商品名称", price:"商品价格"}, ...]，价格需包含'¥'符号');
console.log('前 5 个销量最高的商品：', JSON.stringify(top5Products, null, 2));
// 步骤 8：断言验证（双重断言：Midscene 的 aiAssert + Playwright 的 expect）
// 8.1 使用 aiAssert 验证页面无弹窗
await aiAssert('当前页面没有任何弹窗、广告或登录提示框遮挡商品列表');
// 8.2 使用 expect 断言商品列表非空且价格格式正确
expect(top5Products).not.toBeNull();
expect(top5Products?.length).toBeGreaterThan(0);
top5Products?.forEach(product => {
expect(product.name).not.toBeEmpty();
expect(product.price).toMatch(/^¥\d+(\.\d+)?$/); // 验证价格格式为'¥xx.xx'
});
console.log('所有断言验证通过');
});
执行以下命令启动 Playwright Test 测试（会自动执行 scripts 目录下所有 .spec.ts 后缀的脚本）：
npx playwright test
测试完成后，会在 midscene_run/report 目录下生成 HTML 格式的报告（如 playwright-merged-20250810_102030.html）。双击打开报告，可看到以下核心信息：
aiQuery 提取的商品名称和价格，与脚本输出一致；报告不仅是测试结果的记录，更是问题排查的重要依据。例如，若'点击搜索按钮'步骤失败，可通过报告中的'过程截图'查看当时的页面状态，判断是否因广告弹窗遮挡了搜索按钮，进而优化脚本（如增加'关闭弹窗'的步骤）。
掌握基础用法后，开发者还可通过以下进阶技巧，进一步提升 Midscene.js 的自动化精度和场景覆盖能力，解决复杂业务场景中的问题。
Midscene.js 的核心是'模型理解意图'，因此自然语言 prompt 的质量直接影响操作精度。以下是优化 prompt 的 3 个关键原则：
避免模糊表述（如'点击搜索按钮'），应补充元素的颜色、形状、位置等视觉特征。例如：
await aiTap('点击搜索按钮')await aiTap('点击页面右上角、蓝色背景、白色文字的'搜索'按钮')当页面存在多个相似元素时（如商品列表中的'加入购物车'按钮），可通过相对位置定位。例如：
await aiTap('点击加入购物车按钮')await aiTap('点击第一个商品卡片右下角的'加入购物车'按钮')对于多步骤的复杂操作（如'登录→进入个人中心→修改密码'），建议拆分为多个独立的 aiAction 或 aiTap 步骤，而非一次性描述所有操作。例如：
// 拆分前（易出错）
await agent.aiAction('点击右上角登录按钮，输入账号 admin 和密码 123456，点击登录后进入个人中心');
// 拆分后（更稳定）
await aiTap('页面右上角的'登录'按钮'); // 步骤 1：打开登录弹窗
await aiInput('admin', '登录弹窗中的账号输入框'); // 步骤 2：输入账号
await aiInput('123456', '账号输入框下方的密码输入框'); // 步骤 3：输入密码
await aiTap('登录弹窗底部的'登录'按钮'); // 步骤 4：提交登录
await aiWaitFor('页面跳转至个人中心'); // 步骤 5：等待页面切换
虽然 Midscene.js 具备智能能力，但在某些场景下（如精准获取接口返回数据、操作 iframe 内部元素），Playwright 的原生接口仍更高效。Midscene.js 支持与 Playwright 原生接口无缝结合，例如：
// 1. 使用 Midscene 完成搜索操作
await agent.aiAction('在百度搜索'Midscene.js'');
// 2. 使用 Playwright 原生接口监听搜索接口请求，获取返回数据
let searchResponse: any = null;
page.on('response', (response) => {
if (response.url().includes('https://www.baidu.com/s')) {
searchResponse = response.json(); // 保存搜索接口返回的 JSON 数据
}
});
// 3. 等待接口返回后，使用 Playwright 的 expect 断言验证结果数量
await page.waitForResponse(response => response.url().includes('https://www.baidu.com/s'));
expect(searchResponse?.data?.length).toBeGreaterThan(10); // 断言搜索结果数量大于 10
这种'智能操作 + 原生断言'的组合，既利用了 Midscene.js 的视觉定位能力，又通过 Playwright 的底层接口确保了数据验证的精准性。
在企业级项目中，页面可能包含大量自定义业务控件（如金融系统的'风险评估弹窗'、电商平台的'优惠券选择器'），多模态模型默认可能无法识别这些控件的功能。Midscene.js 支持外挂业务知识库，将控件的视觉特征、交互逻辑录入知识库，让模型快速理解特定领域的界面元素。
knowledge 文件夹，新建 business-controls.json 文件，录入控件信息：[
{
"controlName": "风险评估弹窗确认按钮",
"description": "金融系统风险评估弹窗底部的确认按钮，红色背景，白色文字，位于弹窗右下角，文字内容为'确认评估'",
"scene": "风险评估页面",
"action": "点击后提交风险评估结果，关闭弹窗"
},
{
"controlName": "优惠券选择器",
"description": "电商结算页面的优惠券下拉框，灰色边框，内部显示当前可用优惠券金额（如'¥10'），位于'实付金额'上方",
"scene": "结算页面",
"action": "点击后展开优惠券列表，可选择使用的优惠券"
}
]
PlaywrightAgent 时，通过 knowledgeBase 参数引入知识库：const agent = new PlaywrightAgent(page, {
knowledgeBase: require('../knowledge/business-controls.json') // 加载业务知识库
});
// 模型会结合知识库信息定位自定义控件
await aiTap('点击风险评估弹窗确认按钮');
await aiTap('点击优惠券选择器');
通过外挂知识库，Midscene.js 可快速适配企业特定业务场景，避免因模型对自定义控件不熟悉导致的操作失败。
Web 页面中常见的'动态加载'（如滚动加载商品、异步渲染表格）是自动化脚本的常见痛点。Midscene.js 提供 aiWaitFor 接口，可通过自然语言描述等待条件，避免使用固定的 sleep 函数（固定等待时间可能导致超时或浪费时间）。
aiWaitFor 用法：// 等待商品列表加载，直到显示至少 10 个商品
await aiWaitFor('页面中的商品列表显示至少 10 个商品卡片', { timeoutMs: 30000 });
// 等待用户信息接口返回，直到页面显示用户名'张三'
await aiWaitFor('页面顶部导航栏显示用户名'张三'', { timeoutMs: 20000 });
// 等待广告弹窗关闭，直到弹窗消失
await aiWaitFor('页面中的广告弹窗完全消失', { timeoutMs: 15000 });
aiWaitFor 的核心优势是'基于视觉结果等待'，而非'基于时间等待'，更符合人类操作习惯，也更能适应不同网络环境下的页面加载速度。
Midscene.js 的多模态能力不仅限于 Web 自动化测试，还可广泛应用于以下场景，为不同领域的开发者提供价值：
aiQuery 提取页面结构化数据，无需解析复杂的 DOM 结构；根据 Midscene.js 的开源路线图和社区反馈，未来该工具可能在以下方向持续进化：
在 AI 与 Web 技术深度融合的时代，Midscene.js 的出现并非偶然——它代表了 Web 自动化从'代码驱动'向'意图驱动'的进化方向。通过整合多模态大模型的视觉理解能力，Midscene.js 解决了传统工具'元素定位难、维护成本高'的痛点，让自动化脚本具备了类似人类的界面认知能力。
对于开发者而言，Midscene.js 的核心价值在于：
当然，Midscene.js 并非完美——它目前依赖大模型部署环境，在网络不稳定或模型响应较慢时可能出现超时；同时，对于完全无视觉特征的动态元素（如隐藏的 API 请求按钮），仍需结合传统定位方式。但不可否认的是，Midscene.js 为 Web 自动化领域提供了全新的思路，随着多模态模型技术的持续进步，它有望成为未来 Web 自动化与测试的主流工具之一。
如果你正在面临 Web 自动化脚本维护成本高、页面变化导致脚本失效等问题，不妨尝试 Midscene.js——它可能会彻底改变你对 Web 自动化的认知，让你在 AI 时代的自动化工作中事半功倍。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
生成新的随机RSA私钥和公钥pem证书。 在线工具，RSA密钥对生成器在线工具，online
基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。 在线工具，Mermaid 预览与可视化编辑在线工具，online
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online