Google表格showModalDialog添加getElementById后alert失效排查

你遇到的弹窗失效问题，是两个独立的运行时/语法错误叠加导致的，只要触发任意一个，就会直接掐断整个页面的JavaScript执行流，后续的alert根本没有机会运行：

• 语法错误问题：代码中document.getElementById("errMsg").style.font-weight = "normal"存在语法问题。JavaScript中使用点语法操作style对象时，带横杠的CSS属性必须转换为驼峰命名（font-weight对应fontWeight），直接写带横杠的属性名会触发语法解析错误，直接终止整个脚本运行。
• 空引用错误问题：如果脚本执行时机早于DOM渲染完成，document.getElementById('errMsg')会返回null，对null值读取innerHTML、设置样式时，会抛出"无法读取空值属性"的运行时错误，同样会中断后续所有代码的执行。
• 把这两段代码注释掉之后，上述两个错误都不会触发，脚本执行流程没有被中断，alert自然可以正常弹出。

• 修正样式设置的语法写法，把style.font-weight = "normal"替换为style.fontWeight = "normal"，如果一定要用带横杠的写法，可以通过style.setProperty('font-weight', 'normal')实现。
• 把所有DOM操作逻辑放到DOMContentLoaded事件的回调函数中，确保等页面所有节点渲染完成后，再执行元素查找、属性修改的操作。
• 执行DOM查找后增加空值判断逻辑，避免因为偶发的元素加载延迟导致整个脚本崩溃，示例代码：

  const errMsgEl = document.getElementById('errMsg');
  if (errMsgEl) {
    errMsgEl.innerHTML = 'All fields are STILL required';
    errMsgEl.style.fontWeight = 'normal';
  }
  

• 注意Apps Script模态弹窗的执行时序：通过showModalDialog加载的HTML页面，脚本默认加载顺序和普通公开网页有差异，如果内联脚本写在页面头部，不等DOM渲染完成就执行，必然会出现找不到元素的问题。

针对当前看不到console.log、后端Logger.log输出的场景，用以下方法排查效率最高：

• 不要依赖后端Logger.log调试前端逻辑：Logger.log仅能捕获Apps Script服务端代码的运行输出，前端JS的运行错误、打印信息根本不会同步到后端日志，自然看不到输出。
• 不要依赖浏览器原生console.log调试沙箱弹窗：Apps Script的模态沙箱环境对浏览器控制台API的支持不稳定，很多版本下输出会被直接拦截。
• 用分段插入同步alert的方法定位执行断点：在可疑代码段的前后各加一个alert弹窗，因为alert是同步阻塞执行的，只要看到前一个alert弹出、后一个没弹出，就能精准定位到触发错误的代码行，在没有控制台的场景下比其他调试手段可靠。
• 临时在页面中预留调试输出区域：创建一个固定位置的div块，把所有需要查看的调试信息直接拼接成文本写到这个div的内容里，所有运行时的变量值、执行进度都能直接在弹窗页面上看到，不受沙箱环境限制。

内容的提问来源于stack exchange，提问作者aNewb