为了改一行文案，我做了个本地 HTML 页面工作台：测试、产品不用再等开发

一份 HTML 报告已经生成，标题错了一个字，按钮文案要换，卡片间距也想调一下。

如果这份页面只是测试报告、演示页或离线交付物，为这几处修改再去找源码、装环境、重新构建，事情会变得很长。于是做了 PageLab：浏览器本地打开一个 HTML 文件，改完直接导出新的副本。

项目在 GitHub：https://github.com/xsoway/editor-html

它处理哪些场景

PageLab 面向已经拿到 HTML 文件的人。

测试报告发出前，修改版本号、风险说明和页面文案；
产品审原型时，调整标题、按钮文字、卡片间距；
开发把离线 HTML 交给同事检查，同事能把问题落到具体元素；
演示页临时改动，先出一份可确认的页面副本。

它修改的是导入文件的副本。项目源码、Git 提交、线上发布、接口调试和浏览器兼容性测试，仍然在原来的工程里完成。

页面里有什么

工作台分三栏。

左边是文件操作、查找替换、批注和本地草稿；中间放导入页面；右边是元素检查器。点中页面元素后，右边会显示标签、CSS 路径、属性和常用样式。

画布支持自适应、1280px、768px、390px 四种宽度。看报告或原型时切一次 390px，按钮换行、卡片拥挤、标题过大的问题通常会直接出现。

项目没有运行依赖，目录也很简单：

index.html    页面结构
styles.css    视觉与响应式布局
state.css     组件显示状态
app.js        导入、编辑、草稿、批注与导出
LICENSE
README.md

能做什么

直接改页面内容

导入或拖入 .html、.htm 文件；
原位修改标题、段落、说明和按钮名；
选中文字后调整粗体、斜体、下划线、删除线和颜色；
选中区块后复制、排序、删除；
修改文字、背景、边框颜色，以及字号、圆角、内外边距；
编辑 id、class、data-* 等属性；
切到源码模式，直接修改完整 HTML。

按钮是可编辑对象。点击按钮时，编辑器会先拦截原始点击，再进入文字编辑，避免改“提交”两个字时把表单真的提交出去。

查找、批注和草稿

页面有重复的版本号、项目名或占位文案时，可以使用查找替换。

发现问题后，选中元素，填写 P1、P2、P3 和说明。批注可以导出 JSON，里面保留元素路径、优先级、描述和时间，后续再放进缺陷平台或表格。

每次修改会写入当前浏览器的 localStorage。再次导入同名且源内容一致的文件时，PageLab 会询问是否恢复草稿。页面也提供撤销、重做和回到导入时版本。

预览和导出

默认是静态安全预览，导入文件中的 JavaScript 不执行。需要查看动画、分页或动态渲染时，可以手动开启“运行脚本”；只建议打开可信文件，开启后可视化编辑会关闭。

修改完成后可以导出 HTML，也可以导出便携副本。后者会尝试把允许读取的图片转成 Data URL。遇到跨域图片时，浏览器不允许读取像素，导出文件会保留原图地址。

图片资源未同步：Xnip Helper 2026-09-15 08.35.46

怎么用

1. 启动

克隆仓库后，直接打开 index.html 即可。如果浏览器对本地文件有限制，在项目根目录执行：

python3 -m http.server 4173

再访问 http://localhost:4173。

2. 改一处文字或按钮名

点击“打开 HTML”，选择文件；
点击标题、段落或按钮；
输入新文字；
点击页面空白处，结束编辑；
点击右上角“导出页面”。

需要调样式时，选中页面元素，在右侧输入色值、字号、圆角或边距。需要改标签嵌套、整段属性或脚本相关内容时，切到源码模式处理。

3. 做一轮页面验收

导入 HTML；
点击顶部“手机”，切换到 390px；
点中有问题的元素；
点击左边“添加验收批注”，写下问题和优先级；
切到“批注”标签，导出 JSON。

静态 HTML 的文案、布局和元素定位适合在这里处理。页面依赖登录态、接口数据或复杂脚本时，回到原工程修改会更省时间。

谁会用到它

测试同学可以用它整理报告和验收页，改版本号、补风险说明、留问题位置，再导出交付物。

产品同学可以用它查看原型文案和小屏展示。页面调整确认后，把明确的问题和修改内容交给开发回写源码。

开发同学可以把它当作离线 HTML 的检查台，快速定位到某个标签、属性或样式。

当前状态

仓库是静态网页项目，没有账户、在线协作和云端保存。草稿只存在当前浏览器中。

项目地址：https://github.com/xsoway/editor-html

#测试工程 #产品协作 #HTML编辑器 #本地工具 #PageLab