Vue DevTools在Google Apps Script Web应用中无法识别如何解决

• 修正Vue3 devtools开启方式
  你代码中注释的Vue.config.devtools = true是Vue2的配置写法，Vue3的全局配置需要挂载到你创建的app实例上，且必须写在mount挂载操作之前。
• 切换DevTools的iframe上下文
  GAS会把用户自定义页面嵌套在同域iframe中，打开浏览器开发者工具后，点击控制台/元素面板顶部的上下文选择下拉框（默认显示top），选择你实际业务页面对应的iframe条目，切换后刷新页面，Vue DevTools就能识别到Vue实例。
• （可选）使用开发版Vue CDN
  默认的https://unpkg.com/vue@3指向生产压缩版本，默认关闭devtools支持，你可以替换为开发版CDN地址https://unpkg.com/vue@3/dist/vue.global.js，无需额外配置就默认开启devtools支持。

修正后完整代码示例：

<!DOCTYPE html>
<html>
  <head>
    <!-- 可选替换为开发版CDN：<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
    <script src="https://unpkg.com/vue@3"></script>
  </head>
  <body>
    <script>
  document.addEventListener("DOMContentLoaded", function(event) {
    const app = Vue.createApp({
      data() {
          return {
              vueWorks: true,
              product: 'Socks',
              inStockCount: 50,
          }
      }
    })
    // Vue3开启devtools配置
    app.config.devtools = true
    const mountedApp = app.mount('#app')
  })
  </script>
    <div id="app">
<p v-if="vueWorks">If you see this Vue works</p>
<p v-else>But if you see this then well Vue does not work</p>

      <h1>{{ product }}</h1>
      <input :value="inStockCount">
<p v-if="inStockCount > 10">In Stock</p>
<p v-else-if="inStockCount <= 10 && inStockCount > 0">Almost sold out!</p>
<p v-else>Out of Stock</p>
    </div>
  </body>
</html>

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