【实用工具整理】程序员必知的超实用在线工具大集合

前文概述

俗话说得好,工欲善其事,必先利其器!日常程序员们常常需要使用各种工具来辅助编程、学习和生活。本文将介绍一个收集了多种在线工具的工具箱,包括编解码、正则表达式、网络查询、在线编译运行、可视化/格式化、在线生成器等多个类别,涵盖了常用的工具。如果您是一位程序员或学习编程的大学生,这篇文章将会为您节省大量搜索工具的时间,提高工作和学习的效率。
当然,该工具箱还会不断更新和添加新的实用工具,我们也欢迎大家通过评论留言向我们推荐好用的工具,让它变得更加实用和便捷。

工具箱介绍

在这里插入图片描述

在线编解码工具
工具名称描述
在线URL编码解码将URL进行编码或解码
MD5编码工具将任意长度的输入转换成固定长度的输出
AES/DES加解密对称加密算法
JWT解码工具对JSON Web Token进行解码
ASCII编解码工具将字符转换为 ASCII 码值或反转
Unicode编解码工具将字符转换为 Unicode 码值或反转
UTF-8编解码工具将字符转换为 UTF-8 编码或反转
字符串编解码工具支持多种编解码格式的字符串转换

在这里插入图片描述

在线转换工具
工具名称描述
在线ASCII码对照表显示 ASCII 码表中所有字符及其对应 ASCII 码值
通用进制转换工具可以将各种进制的数字互相转换
在线浮点数十进制转换将浮点数转换为十进制表示
RGB颜色转换在不同的颜色表示法之间进行转换
时间戳转换工具可以将 UNIX 时间戳转换为常见日期格式
计量单位换算工具可以将各种计量单位互相转换
在线JSON解析将 JSON 格式的字符串转换为 JavaScript 对象
在线JS代码格式化工具将 JavaScript 代码格式化,使其易于阅读
SQL压缩/格式化工具可以对 SQL 语句进行压缩或格式化
JSON和XML在线转换可以将 JSON 格式的字符串转换为 XML 格式,或者将 XML 格式的字符串转换为 JSON 格式
JSON/YAML在线转换可以将 JSON 格式的字符串转换为 YAML 格式,或者将 YAML 格式的字符串转换为 JSON 格式
人民币大小写转换工具将人民币金额数字转换为中文大写

在这里插入图片描述

其他工具
工具名称描述
正则表达式可视化工具可视化正则表达式的模式匹配过程,帮助用户理解和调试正则表达式。
正则表达式调试工具通过可视化界面展示正则表达式模式匹配和替换过程,方便用户调试。
IP地址归属地查询在线查询 IP 地址的归属地信息,方便了解网站、服务器等的位置信息。
IP地址查询在线查询 IP 地址的详细信息,包括地理位置、运营商、主机名等。
HTTP在线接口测试工具可以在线进行 HTTP 接口的测试,方便进行接口调试和测试。
在线编译工具套装提供多种编程语言的在线编译环境,方便用户快速进行代码编译。
C#在线编译运行提供在线的 C# 编译器和运行环境,方便用户进行 C# 代码编译和运行。
C/C++在线编译调试提供在线的 C/C++ 编译器和调试器,方便用户进行 C/C++ 代码编译和调试。
在线前端编辑器提供在线的前端代码编辑器,支持 HTML、CSS 和 JavaScript 编辑和调试。
在线数据可视化提供多种数据可视化展示方式,支持折线图、柱状图、饼图等常用图表。
在线CSS代码可视化工具将 CSS 代码转换为可视化的图形,方便用户理解和调试 CSS 样式。
XML格式化工具可以在线格式化 XML 文件,方便用户查看和编辑。
UUID在线生成器可以在线生成符合 UUID 规范的随机字符串,常用于数据标识和唯一标识。
随机数生成器可以在线生成指定范围内的随机数,方便进行数据模拟和测试。
在线Nginx配置工具提供在线的 Nginx 配置文件编辑器,方便用户进行 Nginx 配置和管理。
在线对比工具可以在线比较两个文件的差异,并可视化展示差异,方便用户进行文件比较和合并。
在线Chrome浏览器插件提供在线的 Chrome 浏览器插件开发环境,方便用户进行插件开发和测试。
在线接口文档管理工具提供在线的接口文档编写和管理功能,方便团队进行接口开发和文

在这里插入图片描述

在线教程和文档
工具名称描述
在线教程和文档包含Git中文教程和Nginx中文文档的在线学习资源
…可补充……可补充…

在这里插入图片描述

代码结构

代码是前端写的,不涉及后端代码哦,需要后端代码也可以补充进去哟!
代码结构:
在这里插入图片描述

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>Rucoding工具箱</title>
		<link rel="stylesheet" href="./layui-icon-extend/network/iconfont.css" />
		<link href="./images/favicon.ico" rel="icon">
		<link href="./layui/css/layui.css" rel="stylesheet" />
		<link href="./layui/css/admin.css" rel="stylesheet" />
		<script src="./layui/js/jquery-2.1.4.min.js"></script>
		<script src="./layui/layui.js"></script>
		<script src="./layui/js/index.js" data-main="home"></script>
	</head>
	<body class="layui-layout-body">
		<div class="layui-layout layui-layout-admin">
			<div class="layui-header custom-header">
				<ul class="layui-nav layui-layout-left">
					<li class="layui-nav-item slide-sidebar" lay-unselect>
						<a href="javascript:;" class="icon-font"><i class="ai ai-menufold"></i></a>
					</li>
				</ul>
				<ul class="layui-nav layui-layout-right">
					<li class="layui-nav-item">
						<a href="javascript:;">管理员</a>
						<dl class="layui-nav-child">
							<dd><a th:href="@{/logout}">退出</a></dd>
						</dl>
					</li>
				</ul>
			</div>

			<div class="layui-side custom-admin">
				<div class="layui-side-scroll">
					<div class="custom-logo">
						<img alt="" src="./images/logo.jpg">
						<h1>工具箱</h1>
					</div>
					<ul id="Nav" class="layui-nav layui-nav-tree">
						<li class="layui-nav-item">
							<a href="javascript:;">
								<i class="layui-icon">&#xe68e;</i>
								<em>主页</em>
							</a>
							<dl class="layui-nav-child">
								<dd><a href="./html/view.html">控制台</a></dd>
							</dl>
						</li>

						<li class="layui-nav-item">
							<a href="javascript:;">
								<i class="layui-icon">&#xe631;</i>
								<em>开发辅助工具</em>
							</a>
							<dl class="layui-nav-child">
								<dd class="layui-nav-item">
									<a href="javascript:;"><i class="layui-icon">&#xe653;</i> 在线编解码工具</a>
									<dl class="layui-nav-child">
										<dd><a href="javascript:;" id="online-url-encoding-tool">在线URL编码解码</a></dd>
										<dd><a href="javascript:;" id="online-md5-encoding-tool">MD5编码工具</a></dd>
										<dd><a href="javascript:;" id="online-aes-des-tool">AES/DES加解密</a></dd>
										<dd><a href="javascript:;" id="online-jwt-tool">JWT解码工具</a></dd>
										<dd><a href="javascript:;" id="online-ascii-tool">ASCII编解码工具</a></dd>
										<dd><a href="javascript:;" id="online-unicode-tool">Unicode编解码工具</a></dd>
										<dd><a href="javascript:;" id="online-utf8-encoding-tool">UTF-8编解码工具</a></dd>
										<dd><a href="javascript:;" id="online-string-encoding-tool">字符串编解码工具</a></dd>
									</dl>
								</dd>

								<dd class="layui-nav-item">
									<a href="javascript:;"><i class="layui-icon">&#xe614;</i> 在线转换工具</a>
									<dl class="layui-nav-child">
										<dd><a href="javascript:;" id="online-ascii-table-tool">在线ASCII码对照表</a></dd>
										<dd><a href="javascript:;" id="online-number-converter-tool">通用进制转换工具</a></dd>
										<dd><a href="javascript:;" id="online-float-converter-tool">在线浮点数十进制转换</a></dd>
										<dd><a href="javascript:;" id="online-color-converter-tool">RGB颜色转换</a></dd>
										<dd><a href="javascript:;" id="online-timestamp-converter-tool">时间戳转换工具</a></dd>
										<dd><a href="javascript:;" id="online-unit-converter-tool">计量单位换算工具</a></dd>
										<dd><a href="javascript:;" id="online-json-parser-tool">在线JSON解析</a></dd>
										<dd><a href="javascript:;" id="online-js-beautifier-tool">在线JS代码格式化工具</a></dd>
										<dd><a href="javascript:;" id="online-sql-beautifier-tool">SQL压缩/格式化工具</a></dd>
										<dd><a href="javascript:;" id="online-json-xml-tool">JSON和XML在线转换</a></dd>
										<dd><a href="javascript:;" id="online-json-yaml-tool">JSON/YAML在线转换</a></dd>
										<dd><a href="javascript:;" id="online-rmb-converter-tool">人民币大小写转换工具</a></dd>
									</dl>
								</dd>
								
								<dd class="layui-nav-item">
									<a href="javascript:;"><i class="layui-icon">&#xe670;</i> 正则表达式工具</a>
									<dl class="layui-nav-child">
										<dd><a href="javascript:;" id="online-regular-expression-visualizer-tool">正则表达式可视化工具</a></dd>
										<dd><a href="javascript:;" id="online-regular-expression-debugger-tool">正则表达式调试工具</a></dd>
									</dl>
								</dd>
								
								<dd class="layui-nav-item">
									<a href="javascript:;"><i class="layui-icon">&#xe7ae;</i> 网络工具</a>
									
									<dl class="layui-nav-child">
										<dd><a href="javascript:;" id="online-ip-address-location-tool">IP地址归属地查询</a></dd>
										<dd><a href="javascript:;" id="ip-address-query-tool">IP地址查询</a></dd>
										<dd><a href="javascript:;" id="http-api-testing-tool">HTTP在线接口测试工具</a></dd>
									</dl>
								</dd>
								
								
								<dd class="layui-nav-item">
									<a href="javascript:;"><i class="layui-icon">&#xe64e;</i> 在线编译运行工具</a>
									<dl class="layui-nav-child">
										<dd><a href="javascript:;" id="online-compilation-toolkit">在线编译工具套装</a></dd>
										<dd><a href="javascript:;" id="c-sharp-online-compilation-and-execution">C#在线编译运行</a></dd>
										<dd><a href="javascript:;" id="c-cpp-online-compilation-and-debugging">C/C++在线编译调试</a></dd>
									</dl>
								</dd>

								<dd class="layui-nav-item">
									<a href="javascript:;"><i class="layui-icon">&#xe639;</i> 可视化/格式化工具</a>
									<dl class="layui-nav-child">
										<dd><a href="javascript:;" id="online-frontend-editor-tool">在线前端编辑器</a></dd>
										<dd><a href="javascript:;" id="online-data-visualization-tool">在线数据可视化</a></dd>
										<dd><a href="javascript:;" id="online-css-code-visualization-tool">在线CSS代码可视化工具</a></dd>
										<dd><a href="javascript:;" id="xml-formatting-tool">XML格式化工具</a></dd>
									</dl>
								</dd>
								
								<dd class="layui-nav-item">
									<a href="javascript:;"><i class="layui-icon">&#xe62a;</i> 在线生成器</a>
									<dl class="layui-nav-child">
										<dd><a href="javascript:;" id="online-uuid-generator-tool">UUID在线生成器</a></dd>
										<dd><a href="javascript:;" id="online-random-number-generator-tool">随机数生成器</a></dd>
									</dl>
								</dd>
								
								<dd class="layui-nav-item">
									<a href="javascript:;"><i class="layui-icon">&#xe620;</i> 其他常用工具</a>
									<dl class="layui-nav-child">
										<dd><a href="javascript:;" id="online-nginx-configuration-tool">在线Nginx配置工具</a></dd>
										<dd><a href="javascript:;" id="online-diff-tool">在线对比工具</a></dd>
										<dd><a href="javascript:;" id="online-chrome-browser-plugin">在线Chrome浏览器插件</a></dd>
										<dd><a href="javascript:;" id="online-api-documentation-management-tool">在线接口文档管理工具</a></dd>
									</dl>
								</dd>

							</dl>
						</li>

						<li class="layui-nav-item">
							<a href="javascript:;">
								<i class="layui-icon">&#xe663;</i>
								<em>在线教程和文档</em>
							</a>
							<dl class="layui-nav-child">
								<dd><a href="javascript:;" id="online-git-tool">Git中文教程</a></dd>
								<dd><a href="javascript:;" id="online-nginx-doc-tool">Nginx中文文档</a></dd>
							</dl>
						</li>


					</ul>


				</div>
			</div>

			<div class="layui-body">
				<div class="layui-tab app-container" lay-allowClose="true" lay-filter="tabs">
					<ul id="appTabs" class="layui-tab-title custom-tab"></ul>
					<div id="appTabPage" class="layui-tab-content"></div>
				</div>
			</div>

			<div class="layui-footer">
				<p>© 2023 - Rucoding Blog : <a href="https://blog.csdn.net/rucoding"
						target="_blank">https://blog.csdn.net/rucoding</a></p>
			</div>
			<div class="mobile-mask"></div>
		</div>

		<script>
			layui.use(['layer', 'element'], function() {
				var layer = layui.layer;
				var element = layui.element;

				// 定义在线编解码工具等元素数组
				var linkElems = [
				  //在线编解码工具
				  { id: 'online-url-encoding-tool', url: 'https://www.bejson.com/enc/urlencode/', title: '在线URL编码解码' },
				  { id: 'online-md5-encoding-tool', url: 'https://www.zxgj.cn/g/md5/', title: 'MD5编码工具' },
				  { id: 'online-aes-des-tool', url: 'http://www.fly63.com/tool/cipher/', title: 'AES/DES加解密' },
				  { id: 'online-jwt-tool', url: 'http://jwt.calebb.net/', title: 'JWT解码工具' },
				  { id: 'online-ascii-tool', url: 'https://www.matools.com/code-convert-ascii/', title: 'ASCII编解码工具' },
				  { id: 'online-unicode-tool', url: 'https://www.zxgj.cn/g/unicode/', title: 'Unicode编解码工具' },
				  { id: 'online-utf8-encoding-tool', url: 'https://www.zxgj.cn/g/utf8/', title: 'UTF-8编解码工具' },
				  { id: 'online-string-encoding-tool', url: 'https://www.zxgj.cn/g/enstring/', title: '字符串编解码工具' },	
				
				  //在线转换工具
				  { id: 'online-ascii-table-tool', url: 'https://www.fly63.com/tool/ascii/', title: '在线ASCII码对照表' },
				  { id: 'online-number-converter-tool', url: 'https://www.zxgj.cn/g/jinzhi', title: '通用进制转换工具' },
				  { id: 'online-float-converter-tool', url: 'http://www.binaryconvert.com/', title: '在线浮点数十进制转换' },
				  { id: 'online-color-converter-tool', url: 'https://www.zxgj.cn/g/yansezhi', title: 'RGB颜色转换' },
				  { id: 'online-timestamp-converter-tool', url: 'https://www.zxgj.cn/g/unix/', title: '时间戳转换工具' },
				  { id: 'online-unit-converter-tool', url: 'http://www.fly63.com/tool/unitable/', title: '计量单位换算工具' },
				  { id: 'online-json-parser-tool', url: 'https://www.json.cn/', title: '在线JSON解析' },
				  { id: 'online-js-beautifier-tool', url: 'https://prettier.io/playground/', title: '在线JS代码格式化工具' },
				  { id: 'online-sql-beautifier-tool', url: 'https://www.zxgj.cn/g/sqlformat', title: 'SQL压缩/格式化工具' },
				  { id: 'online-json-xml-tool', url: 'https://www.zxgj.cn/g/jsonxml', title: 'JSON和XML在线转换' },
				  { id: 'online-json-yaml-tool', url: 'http://www.fly63.com/tool/jsonyaml/', title: 'JSON/YAML在线转换' },
				  { id: 'online-rmb-converter-tool', url: 'http://www.fly63.com/tool/renmingbi/', title: '人民币大小写转换工具' },
				  
				  //正则表达式工具
				  { id: 'online-regular-expression-visualizer-tool', url: 'https://jex.im/regulex/#!flags=&re=%5E(a%7Cb)*%3F%24', title: '正则表达式可视化工具' },
				  { id: 'online-regular-expression-debugger-tool', url: 'https://regexr.com/', title: '正则表达式调试工具' },
				  //网络工具
				  { id: 'online-ip-address-location-tool', url: 'https://www.ip138.com/', title: 'IP地址归属地查询' },
				  { id: 'ip-address-query-tool', url: 'https://www.ipip.net/ip.html', title: 'IP地址查询' },
				  { id: 'http-api-testing-tool', url: 'http://www.fly63.com/php/http/', title: 'HTTP在线接口测试工具' },
				  //在线编译运行工具
				  { id: 'online-compilation-toolkit', url: 'https://c.runoob.com/', title: '在线编译工具套装' },
				  { id: 'c-sharp-online-compilation-and-execution', url: 'https://rextester.com/', title: 'C#在线编译运行' },
				  { id: 'c-cpp-online-compilation-and-debugging', url: 'https://www.onlinegdb.com/', title: 'C/C++在线编译调试' },
				  //可视化/格式化工具
				  { id: 'online-frontend-editor-tool', url: 'https://codepen.io/', title: '在线前端编辑器' },
				  { id: 'online-data-visualization-tool', url: 'https://flourish.studio/', title: '在线数据可视化' },
				  { id: 'online-css-code-visualization-tool', url: 'https://enjoycss.com/', title: '在线CSS代码可视化工具' },
				  { id: 'xml-formatting-tool', url: 'https://www.zxgj.cn/g/xmlformat', title: 'XML格式化工具' },
				  //在线生成器
				  { id: 'online-uuid-generator-tool', url: 'https://www.zxgj.cn/g/uuid', title: 'UUID在线生成器' },
				  { id: 'online-random-number-generator-tool', url: 'https://www.zxgj.cn/g/suijishu', title: '随机数生成器' },
				  //其他常用工具
				  { id: 'online-nginx-configuration-tool', url: 'https://www.digitalocean.com/community/tools/nginx#?', title: '在线Nginx配置工具' },
				  { id: 'online-diff-tool', url: 'http://www.fly63.com/tool/textdiff/', title: '在线对比工具' },
			      { id: 'online-chrome-browser-plugin', url: 'https://www.crx4chrome.com/', title: '在线Chrome浏览器插件' },
				  { id: 'online-api-documentation-management-tool', url: 'http://www.docway.net/', title: '在线接口文档管理工具' },
				  
				  //online-git-tool
				  { id: 'online-git-tool', url: 'https://git-scm.com/book/zh/v2', title: 'Git中文教程' },
				  { id: 'online-nginx-doc-tool', url: 'https://www.nginx.cn/doc/index.html', title: 'Nginx中文文档' },
				  
				  
				];
				
				// 绑定链接元素点击事件
				linkElems.forEach(function(elem) {
				  $('#' + elem.id).on('click', function() {
				    openTab(elem);
				  });
				});
				
				// 打开一个新的选项卡
				function openTab(elem) {
				  var tabId = 'tab-' + elem.id;
				  var tabExist = checkTabExist(tabId);
				  if (!tabExist) {
				    var loadingIndex = layer.load(); // 加载loading效果
				    element.tabAdd('tabs', {
				      title: elem.title,
				      content: '<iframe src="' + elem.url + '" frameborder="0" scrolling="yes" width="100%" height="500px"></iframe>',
				      id: tabId
				    });
				    layer.close(loadingIndex); // 关闭loading效果
				  }
				  element.tabChange('tabs', tabId);
				}

				// 判断tab是否已存在
				function checkTabExist(id) {
					var tab = $('.layui-tab-title li[lay-id="' + id + '"]');
					if (tab.length > 0) {
						return true;
					} else {
						return false;
					}
				}
			});
		</script>

	</body>
</html>

导入为书签

当然,上述也是咱们日常收藏的书签格式,直接导入谷歌浏览器也可以的。
在这里插入图片描述

感谢阅读
Hi,我是Rucoding,码不停蹄!感谢阅读本文,欢迎一键三连哦。

如需对应的源码+书签文件,可以评论或者下方联系我,私信都可以哟~~~

下载"源码+书签文件"传送门

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Java智慧阁

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值