JSON Schema 动态表单生成 - 自动构建输入
输入JSON Schema,自动渲染出一个美观可用的表单界面(演示)。
UD5工具箱
深度解析 package.json 依赖,对比版本差异,检查依赖健康度
请粘贴 package.json 内容并点击"分析依赖"
请粘贴 package.json 并点击检查
package.json 是 Node.js 项目的核心配置文件,记录了项目的元数据(名称、版本、描述等)、脚本命令以及所有依赖包的信息。它是 npm/yarn/pnpm 等包管理器识别和管理项目依赖的基础文件。
^ (Caret):允许不改变最左边非零数字的更新。如 ^1.2.3 可更新到 ≥1.2.3 且 <2.0.0。
~ (Tilde):允许 patch 级别更新。如 ~1.2.3 可更新到 ≥1.2.3 且 <1.3.0。
无前缀:精确版本,锁定特定版本。
* 或 x:通配符,匹配任意版本(不推荐用于生产环境)。
dependencies:生产环境必需的包,用户安装你的包时也会安装这些依赖。
devDependencies:仅在开发时需要的包(如测试框架、构建工具),用户安装你的包时不会安装它们。使用 npm install --production 可跳过 devDependencies。
peerDependencies(对等依赖)用于声明你的包需要宿主项目提供特定版本的依赖。例如,一个 React 组件库会声明 react 为 peerDependency,表示"你需要自己安装 React,我的组件才能正常工作"。npm v7+ 会自动安装 peerDependencies。
可以使用 npm outdated 命令查看过时的依赖。也可使用本工具粘贴 package.json 后点击"检查更新",我们会查询 npm registry 获取每个包的最新版本并进行对比。定期更新依赖有助于获取安全补丁和新功能。
package-lock.json 锁定了依赖的精确版本和依赖树结构,确保在不同环境中安装完全相同的依赖。它记录了每个包的具体版本、下载地址和完整性哈希值。应将其提交到版本控制系统中,以保证团队协作和 CI/CD 的一致性。
当多个依赖要求同一包的不同版本时会发生冲突。解决方法:1) 使用 npm ls <包名> 查看依赖树;2) 使用 resolutions/overrides 字段强制统一版本;3) 更新相关依赖到兼容版本;4) 使用 --legacy-peer-deps 绕过 peer 依赖检查(临时方案)。
版本格式:MAJOR.MINOR.PATCH(如 2.4.1)
MAJOR:不兼容的 API 修改(破坏性变更)
MINOR:向下兼容的功能新增
PATCH:向下兼容的问题修复
遵循 SemVer 能让开发者放心地使用 ^ 和 ~ 范围,自动获取安全的更新。
输入JSON Schema,自动渲染出一个美观可用的表单界面(演示)。
将复杂嵌套JSON数组转为CSV,支持选择性展平列和排除字段,适配数据导出需求。
通过表单设置方法、头、体等参数,自动生成对应的 cURL 命令,方便复制执行。
选择国家,生成符合当地格式的随机假地址,包括街道、城市、邮编和电话号码。
输入服务地址与方法,构造 gRPC-Web 请求,查看二进制帧与反序列化后的响应消息。
演示Service Worker或简单代理拦截fetch请求并返回自定义JSON数据。
通过浏览器原生界面选择联系人,获取姓名、电话、邮箱等字段,用于分享或填写表单。
输入Accept-Language标头值,按权重排序并匹配你的支持语言列表,辅助多语言应用开发。
拖动导出Postman集合JSON文件,浏览器中展示请求分层与细节,方便快速查阅。
将网页内容添加到浏览器的离线内容索引中,便于用户在下载页面查看。
通过下拉选择宽度、高度、分辨率等,逻辑组合并生成完整的@media规则。
为图片生成同时支持WebP和传统格式的<picture>标签代码,确保全浏览器兼容。
生成ECDSA或RSA密钥对,对文本签名并使用公钥验证,演示Web Crypto API的签名能力。
同时展示两种盒模型下元素的尺寸变化,直观理解宽度计算差异。
创建左右布局的对话气泡样式,配置尾巴方向和颜色,生成聊天组件。
在浏览器生成PGP公私钥对,用于邮件加密与签名验证演示。
输入名字,生成带有首字母的彩色圆形头像,适合无头像用户使用。
使用PasswordCredential和FederatedCredential存储用户登录信息,并实现一键自动登录。
粘贴Base64编码的SAML Response,解码并格式化显示其中的属性、断言与签名信息,便于调试。
加载SVG文件,查看和修改其内部<title>, <desc>等元数据,提升可访问性。
输入meta标签属性,模拟显示Twitter分享卡片的大图或小图样式,检验标记是否正确。
输入文本和容器宽度,计算所需的字体大小使文本不换行,利用JS测量实时反馈。
快速创建FAQ样式的手风琴列表,填入问题与答案,生成HTML/CSS/JS交互代码。
利用浏览器内置SubtleCrypto生成RSA-OAEP或RSASSA-PKCS1密钥对,并导出为JWK或PEM格式(前端安全)。
可视化定制弹窗样式、按钮文案和动画,生成替换原生alert的HTML/CSS/JS代码。
对图片应用多种滤镜组合,对比原图与效果,学习 filter 属性的视觉影响。
调用摄像头,通过Shape Detection API实时识别图像中的条形码或人脸位置。
上传SVG,自动生成多种尺寸的透明PNG表情包,适合聊天分享。
录制一段语音,生成带有音频波形和自定义文本的分享卡片图片。
单独对元素背景区域应用模糊、亮度、灰度等滤镜,生成兼容的CSS backdrop-filter属性。