【Vue3】eruda移动端控制台调试工具+动态引入（html通用）
warning:
这篇文章距离上次修改已过445天，其中的内容可能已经有所变动。
<!DOCTYPE html>
<html>
<head>
<title>Eruda Mobile Debugger</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
// 动态检测是否需要引入eruda
if (location.search.indexOf('eruda=true') !== -1) {
// 引入eruda库
(function () {
var src = 'https://cdn.jsdelivr.net/npm/eruda';
if (process.env.NODE_ENV === 'development') {
src += '/eruda.min.js'; // 开发环境
} else {
src += '/eruda.min.js'; // 生产环境
}
// 创建一个script元素
var script = document.createElement('script');
script.async = true;
script.src = src;
script.onload = function () {
// 脚本加载完成后初始化eruda
eruda.init();
};
document.head.appendChild(script);
})();
}
</script>
</head>
<body>
<h1>移动端控制台调试示例</h1>
<p>打开手机浏览器，访问此页面，并打开开发者工具，或者通过地址栏输入 eruda=true 来启动eruda控制台。</p>
</body>
</html>这段代码通过检查URL的查询参数来决定是否需要引入和初始化eruda移动端调试工具。如果URL包含eruda=true，那么会动态创建一个script元素来加载eruda库，并在加载完成后初始化调试工具。这个方法非常适合在移动端进行快速的开发和调试。
评论已关闭