最近更新.rss.xml

更新于 2024-06-19

为什么现在需要它

AI 编程正在逐步完全接手写代码这件事情，但前端项目的调试一直是一个难点：如果能够使用本地浏览器直接给 agent 调试则还算可以，例如 vscode 的 copilot 支持内嵌浏览器的调试

但还有更多的场景是不支持直接被 copilot 进行操控的，silkpluse 就是为了将这个能力扩展到一切前端项目运行的终端设备。

我相信调试工具的下个形态就是 AI-native：工具不仅仅为人使用而设计，还要为给人服务的 agent 使用而设计。silkpulse 是我这个信念的一次实践

在线体验：打开 silkpulse 控制台（输入密钥或以访客身份进入）点"➕ 接入新设备"生成 iife 代码去其他网页控制台粘贴，30 秒把任意线上页面接入进来。

开源地址：https://github.com/2234839/silkpulse gitee地址： https://gitee.com/d0d/silkpulse

我相信调试工具的下个形态就是 AI-native：工具不仅仅为人使用而设计，还要为给人服务的 agent 使用而设计。silkpulse 是我这个信念的一次实践

和 vconsole 等方案不一样在哪里：

写的 H5 在用户手机上白屏了，但本地 DevTools 鞭长莫及。只能求着用户截屏、录屏，或者在 vConsole 那巴掌大的屏幕上艰难翻日志，或者和测试会议查看，手机端还不能通过会议的画笔工具指指点点。

更绝望的是，现在 AI 都能帮你写代码了，但调试时它却帮不上忙——因为它“看”不到远程设备。于是你只能自己盯着控制台，做一个复制粘贴的人肉转发器。

silkpulse 的出现，就是为了终结这种原始状态。

支持远程接入 vue devtools 和 react devtools

支持 agent 使用 silkpulse 进行调试而无需人工参与，通过一个 skill + HTTP API 就能操作一切

还支持许许多多的能力，例如 log/请求/element 的查看，还有 storage 的查看与修改，基于 snapDom 的截图能力，目标设备的特性支持检测

通过公网服务端连任意终端，不使用强大但受限的CDP

传统远程调试多基于 CDP（Chrome DevTools Protocol）：需要设备开调试端口（ --remote-debugging-port）或走 adb/USB 转发，意味着你必须能"碰到"那台设备、能控它的启动参数。别人的手机、客户环境里的 webview、生产环境 App 内嵌页，这些都做不到

silkpulse 通过 ws 和设备建立链接，使用动态执行脚本来实现各项能力

为什么叫 silkpulse：悬丝诊脉

《西游记》第六十九回，朱紫国国王染疾三年，悟空揭了皇榜。国王见这毛脸雷公嘴的和尚，不敢让他当面诊脉，悟空便取出三条金线，让宫人系在国王腕上，自己捏住线头隔着帘幕诊脉这

我觉得这个产品的形态非常符合悬丝诊脉这个意象，所以我将它命名为 silkpulse！

silkpulse 的出现，就是为了终结这种原始状态。

silkpulse 是什么

我给他的定位是一个 AI 原生的远程设备调试器，让 AI Agent 像医生悬丝诊脉一样，直接查看、诊断、操作运行在任意远程设备上的网页（线上 H5、移动端浏览器、WebView），所有本地 DevTools 够不着的地方，它都能触达。

我觉得这个产品的形态非常符合悬丝诊脉这个意象，所以我将它命名为 silkpulse！

在线体验：打开 silkpulse 控制台（输入密钥或以访客身份进入）点"➕ 接入新设备"生成 iife 代码去其他网页控制台粘贴，30 秒把任意线上页面接入进来。

支持 agent 使用 silkpulse 进行调试而无需人工参与，通过一个 skill + HTTP API 就能操作一切

silkpulse 通过 ws 和设备建立链接，使用动态执行脚本来实现各项能力

支持远程接入 vue devtools 和 react devtools

但还有更多的场景是不支持直接被 copilot 进行操控的，silkpluse 就是为了将这个能力扩展到一切前端项目运行的终端设备。

支持 agent 使用 silkpulse 进行调试而无需人工参与，通过一个 skill + HTTP API 就能操作一切

支持远程接入 vue devtools 和 react devtools

写在最后

中文字体在 Web 世界的处境一直很尴尬：设计很好看但用户设备上没有对应字体，引入全量字体包流量又消耗不起。

按需子集化是这个问题的正解，我来把他做到极致简单——写一行 new WebFontPlugin(leafer) 就完事了。

如果你在做海报编辑器、H5 生成器、富文本画布，欢迎试用和提 issue。觉得有用的话，给个 Star 是对我们最大的鼓励 🌟

web-font 是一个完整的开源字体子集化服务（在线裁剪 / 增量加载 SDK / Leafer 插件 / 自部署 Docker），欢迎 Star：github.com/2234839/web-font

免费用，也可自部署

公共服务：https://webfont.shenzilong.cn，免费、无需注册，插件默认就指向它

自部署：web-font 一条 Docker 命令拉起，数据不出内网

插件源码：leafer-x-webfont（MIT）

在线体验（改字/切字体/导出 PNG，开 DevTools 看子集体积）：webfont.shenzilong.cn/leafer-demo

插件源码：leafer-x-webfont（MIT）

在线体验（改字/切字体/导出 PNG，开 DevTools 看子集体积）：webfont.shenzilong.cn/leafer-demo

6 个字 6KB，而不是 16MB。画布里的 Text 用什么字，就只加载那几个字。

插件源码：leafer-x-webfont（MIT）

公共服务：https://webfont.shenzilong.cn，免费、无需注册，插件默认就指向它

自部署：web-font 一条 Docker 命令拉起，数据不出内网

公共服务：https://webfont.shenzilong.cn，免费、无需注册，插件默认就指向它

服务端生图也能用

插件现在是浏览器 / Node 双端同构的。

            js
            
          
import { Leafer, Text, useCanvas } from '@leafer-ui/node'
import { Canvas, loadImage } from '@napi-rs/canvas'

useCanvas('napi', { Canvas, loadImage })
const webfont = new WebFontPlugin(leafer)

海报机、批量证书生成、动态分享图……以前要往服务器塞几个 GB 的字体文件，现在每个请求只拉自己那几个字的子集。

            js
            
          
import { Leafer, Text, useCanvas } from '@leafer-ui/node'
import { Canvas, loadImage } from '@napi-rs/canvas'

useCanvas('napi', { Canvas, loadImage })
const webfont = new WebFontPlugin(leafer)

简单接入

            js
            
          
import { Leafer, Text } from 'leafer-ui'
import { WebFontPlugin } from 'leafer-x-webfont'

const leafer = new Leafer({ view: window })
// 就这一行
const webfont = new WebFontPlugin(leafer)
leafer.add(
  new Text({ text: '静心茶舍', fontFamily: '令东齐伋复刻体.ttf', fontSize: 96 })
)

插件会：

扫描画布里所有 Text，收集「字体 × 用到的字符」

只把这几个字符发给服务端，毫秒级裁出 KB 级子集字体

注册为 FontFace，触发画布重绘——你的代码无需任何感知

增量请求：文字改变只对新增的字符发请求

扫描画布里所有 Text，收集「字体 × 用到的字符」

只把这几个字符发给服务端，毫秒级裁出 KB 级子集字体

注册为 FontFace，触发画布重绘——你的代码无需任何感知

增量请求：文字改变只对新增的字符发请求

            js
            
          
import { Leafer, Text } from 'leafer-ui'
import { WebFontPlugin } from 'leafer-x-webfont'

const leafer = new Leafer({ view: window })
// 就这一行
const webfont = new WebFontPlugin(leafer)
leafer.add(
  new Text({ text: '静心茶舍', fontFamily: '令东齐伋复刻体.ttf', fontSize: 96 })
)

开源项目 web-font 在服务端解决了裁剪问题（任意字体、任意字符、毫秒级出子集）。现在接到了 LeaferJS 上，做成了插件 leafer-x-webfont。

6 个字 6KB，而不是 16MB。画布里的 Text 用什么字，就只加载那几个字。

做海报编辑器、设计工具、数据大屏的同学一定撞过这堵墙：产品想要"国潮古籍体"，设计稿里的标题美得冒泡，一到实际前端环境就各种问题

整包中文字体 10MB+，FontFace 加载又慢流量消耗又大

裁好子集再上传？改一个字就要重新裁一次然后发版部署

整包中文字体 10MB+，FontFace 加载又慢流量消耗又大

最近更新.rss.xml

为什么现在需要它

通过公网服务端连任意终端，不使用强大但受限的CDP

为什么叫 silkpulse：悬丝诊脉

silkpulse 是什么

最近实践

写在最后

免费用，也可自部署

服务端生图也能用

简单接入