嵌入式网页调试脚本eruda

动态同步加载 Eruda 调试脚本（适配嵌入式网页）

你需要在嵌入APP、小程序、Electron的网页中，实现基于环境/参数判断的 Eruda 调试脚本动态同步加载，仅在开发/测试环境或指定参数下启用调试工具，同时规避脚本加载的语法和执行时机问题。

一、核心功能与应用场景

应用场景

适配嵌入APP内置WebView、小程序WebView、Electron窗口的网页，仅在指定环境下加载 Eruda 调试工具，方便移动端/桌面端嵌入式页面的调试，生产环境自动屏蔽。

核心逻辑

• 环境判断：开发（.dev.）/测试（.test.）域名自动触发，或 URL 带 eruda=1 参数手动触发；
• 动态同步加载：通过 document.write 同步加载 Eruda 脚本，保证执行顺序；
• 安全兼容：规避 document.write 的语法陷阱，确保脚本正确加载并初始化。

二、完整实现代码

<!-- 动态同步加载 Eruda 调试脚本（适配嵌入式网页） -->
<script type="text/javascript">
  // 1. 环境/参数判断：满足以下任一条件则启用 Eruda
  // - URL 包含 eruda=1 参数
  // - 域名包含 .dev.（开发环境）或 .test.（测试环境）
  var canIUseEruda = location.href.indexOf('eruda=1') > -1 || !!location.href.match(/.(dev|test)./);
  
  // 2. 动态同步加载 Eruda 脚本（规避标签闭合陷阱）
  if (canIUseEruda) {
    // 拆分 </script> 为 </s'+'cript>，避免浏览器误识别为脚本结束标签
    document.write('<s' + 'cript type="text/javascript" src="//public.yitong.com/libs/eruda/2.3.3/eruda.min.js"></s' + 'cript>');
  }
</script>

<!-- 3. 独立脚本初始化 Eruda（确保脚本加载完成后执行） -->
<script type="text/javascript">
  // 双重校验：环境满足 + Eruda 脚本已加载
  canIUseEruda && window.eruda && eruda.init();
</script>

三、关键说明（避坑指南）

1. document.write 语法陷阱

• 必须将 script 标签拆分为 s'+'cript：若直接写 <script>/</script>，浏览器会误将其识别为当前脚本标签的结束符，导致语法错误；
• 执行时机限制：document.write 仅能在文档加载完成前使用（嵌入式网页加载阶段执行，无此问题）；
• 加载顺序：document.write 引入的脚本不会立即执行，需在独立的 <script> 标签中初始化，确保脚本加载完成。

2. 触发条件规则

触发场景	示例	是否启用 Eruda
开发环境域名	https://page.dev.yitong.com	✅
测试环境域名	https://page.test.yitong.com	✅
生产环境+手动参数	https://page.yitong.com?eruda=1	✅
纯生产环境	https://page.yitong.com	❌

3. 初始化时机

• 必须将 eruda.init() 放在独立的 <script> 标签中：若与 document.write 写在同一脚本，Eruda 脚本尚未加载完成，window.eruda 会为 undefined，导致初始化失败。

四、参考资料

• document.write 脚本加载问题：https://segmentfault.com/q/1010000007224347?_ea=1277187

总结

1. 核心触发逻辑：通过域名（.dev/.test）或 URL 参数（eruda=1）控制 Eruda 加载，生产环境自动屏蔽；
2. 语法关键：拆分 script 标签避免解析错误，独立脚本初始化保证执行顺序；
3. 适配场景：完美兼容APP、小程序、Electron的嵌入式网页，无需侵入生产环境代码。