钉钉微应用开发调试竟如此简单 （包含内网穿透，也适应微信网页开发调试）

一、前言

最近在将一个H5项目迁移至钉钉应用，在引入钉钉相关能力的时候 （如：接入H5微应用系统免登） ，需要在钉钉的沙箱环境下才能执行相关操作。但是在钉钉沙箱环境中 Log日志、request请求，缓存数据，无法直接查看，这对开发阶段带来了极大的困扰，经过翻阅文档整理出针对钉钉开发环境的测试方案

二、结论

先放调试结论，再说钉钉微应用沙箱调试步骤（已经知晓发布顺序，可以直接看结论就好了）

方案一（官方方案）

微应用调试工具

不过官方提供的调试工具，我在使用的过程中出现了以下几个问题

• 1、微应用四端调试工具—网页版： 调试按钮未出现（不确定是否是旧项目原因）
• 2、微应用调试工具-IDE：旧项目是通过hbuilder创建，且非cli模式，没办法执行命令。所以就放弃了
• 3、其他几个方案，也要下载工具，由于是旧项目，也就没必要再一一尝试了

方案二 （vConsole）

vConsole 是微信小程序的官方调试工具， 是框架无关的。可以查看日志，网络、存储、dom节点。这些特性就非常适合在沙箱环境中进行调试使用。vConsole的使用方式很简单。

• 安装vConsole

npm install vconsole

• 使用

import VConsole from 'vconsole';
// 或者使用配置参数来初始化，详情见文档
const vConsole = new VConsole({ theme: 'dark' });

// 接下来即可照常使用 `console` 等方法
console.log('Hello world');

// 结束调试后，可移除掉
vConsole.destroy();

三、微应用开发

创建

• 创建应用
• 配置H5首页地址
  

此处需要线上地址，但是总不能开发一点功能就部署上线吧。此处我们可以借助内网穿透。参考内网穿透步骤，将映射后的地址填入上方即可

授权

参考下图对当前应用所使用到的钉钉api 进行授权

发布

点击下方的版本管理与发布对当前应用进行发布测试

如果发布后移动端可能看不到是因为权限不够，让管理员将应用添加一下就可以看到了

调试

点击网页应用下的去调试

此处需要本地下载钉钉应用，在钉钉应用内进行调试