开发工具箱

实用的在线开发工具集合，提升开发效率，解决日常开发中的常见问题

JSON格式化

代码工具

格式化、验证和美化JSON数据

JSON 格式化验证

颜色选择器

设计工具

选择颜色并获取HEX、RGB、HSL值

颜色设计调色板

Base64编码

编码工具

文本与Base64之间的编码解码

Base64 编码解码

正则表达式测试

代码工具

测试和调试正则表达式

正则测试匹配

时间戳转换

开发工具

Unix时间戳与日期时间的转换

时间戳日期转换

二维码生成

实用工具

生成自定义二维码

二维码生成分享

Markdown编辑器

编辑工具

在线Markdown编辑和预览

Markdown 编辑预览

图片压缩

图片工具

压缩图片大小，优化加载速度

图片压缩优化

代码格式化

代码工具

格式化多种编程语言的代码

格式化代码美化

工具使用示例

快速上手，提高开发效率

代码格式化

一键格式化代码，统一代码风格

颜色选择

实时预览颜色，获取多种格式值

多功能集成

一站式解决开发中的常见问题

常用代码片段

精选实用代码，复制即用

防抖函数

javascript

                                function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}

JavaScript 性能优化

深拷贝对象

javascript

                                function deepClone(obj) {
    if (obj === null || typeof obj !== "object") return obj;
    if (obj instanceof Date) return new Date(obj.getTime());
    if (obj instanceof Array) return obj.map(item => deepClone(item));
    
    const cloned = {};
    Object.keys(obj).forEach(key => {
        cloned[key] = deepClone(obj[key]);
    });
    return cloned;
}

JavaScript 工具函数

CSS Flexbox居中

css

                                .center-flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

CSS 布局