共计 1975 个字符，预计需要花费 5 分钟才能阅读完成。
摘要： 明天咱们来重点介绍下 CloudIDE 插件的调试技巧，在插件开发过程中调试作为重要的问题剖析和定位伎俩可能无效帮忙开发者晋升插件品质。
明天文章中的样例工程咱们持续以上一篇《实战 CloudIDE 插件开发 - 疾速上手》中的我的项目为根底，深刻介绍插件的调试办法。可能有的开发者对于插件的前后端相干概念会有所纳闷，大家能够参考这篇插件开发指南具体理解插件开发过程中会用到的根底概念和开发技巧。
后端调试
在插件的 src/node/ 目录下寄存的是插件的后端代码，后端代码运行在 IDE 实例的 nodejs 环境中，插件我的项目在创立的时候曾经默认生成了一个后端文件 backend.ts，对于轻量级的插件，只须要在该文件中增加本人想要实现的业务性能即可，该文件蕴含了三个默认的办法 init()、run()、stop()。另外还默认增加了一个 doSomething 办法，这个办法仅仅是作为示例应用，开发者能够依据须要进行批改或删除。这里咱们简略介绍下 init, run 和 stop 办法，具体的解析能够参考插件开发指南。
- init() 函数作为该后端实例的初始化办法，能够在插件启动的时候进行一些初始化操作，写在该函数中的代码肯定会先于 run 和其余函数被调用，这里须要留神的是对于前端裸露给后端的函数不能再 init 函数中进行调用，也就是不能在 init 办法中执行 this.plugin.call 调用。
- run() 函数作为后端实例的主逻辑函数，承当着业务性能入口的作用，在该函数中能够不便地调用 CloudIDE 的 API，比方 cloudide.window.showInformationMessage(
hello world!); 也能够调用前端裸露进去的函数，也就是能够在该办法中执行 this.plugin.call 调用。 - stop() 函数将会在插件被进行前被调用，如有须要能够进行一些资源清理的操作。
接下来将分七步来介绍调试的过程，大家能够对照动图来看上面的文字说明：
- 打断点，咱们尝试在 backend.ts 的 run() 函数中打上一个断点。
- 按 F1 或者点击查看 -> 命令面板调出命令面板。
- 输出 Hosted Plugin 进行搜寻，抉择 Hosted Plugin: 调试实例。弹出的门路抉择对话框咱们放弃默认，因为咱们的我的项目根目录默认就是咱们须要调试的插件。
- 期待调试实例启动，右下角弹出端口监听提醒，咱们点击确定。
- 在弹出的端口内部拜访权中给实例的监听端口增加内部拜访权，留神：这里的协定须要抉择 https，增加实现之后如右图所示。
- 点击拜访就能够拜访咱们刚刚启动的调试实例，在弹出的调试实例中咱们期待插件被加载，而后切换回咱们的 CloudIDE 开发实例。
- 断点被命中并暂停在断点处，此时能够不便地查看调用堆栈、变量或者增加监督表达式。
同样，咱们也能够在其余的办法中打上断点，大家有趣味也能够通过断点的形式来验证下 init()、run() 以及 stop() 被执行的程序。
前端调试
与插件的后端不同，前端的代码最终将被编译并运行于浏览器环境中，前端的代码寄存于 src/browser 目录中，插件我的项目在创立的时候会默认生成了两个前端源码文件 frontend.ts 和 dynamic-webview.ts。这两个文件的内容与后端 backend.ts 的构造十分类似，只不过运行的环境不同而已，这里就不再反复对这两个文件中 init()、run()、stop() 办法进行介绍。因为前端运行再浏览器环境中，咱们的代码调试将借助于浏览器自带的调试性能来实现，咱们直奔主题，看看怎么样来调试前端代码。
前端代码调试将分为以下几个步骤，大家同样能够对照动图来看上面的文字说明：
- 明确须要调试的代码所在的函数，比方这次调试的前端函数叫 myApi()。
- 切换到调试实例，按 F12 调出开发者工具。
- 在页面列表中咱们找到本人插件的首页，这里是 index.html (小技巧：很多开发者都会应用默认的首页名称，为了不便查找本人的插件首页，能够将首页文件名进行批改）。接下来逐级向下开展到 active-frame/{ 调试实例地址}/webview/dist/index.js。关上 index.js 文件。
- 按 ctrl+ f 进行搜寻，在搜寻框中输出须要调试的函数名，这里是 myApi。找到函数并在函数体内须要调试的地位打上断点。
- 点击浏览器的刷新按钮从新加载该页面就能命中刚刚打的断点，进行前端的调试。
简略总结下，CloudIDE 插件的调试其实分为前后端，后端的调试能够借助 CloudIDE 自身实现，而前端代码的调试则须要借助于浏览器的调试能力，在把握调试技能之后在后续的插件开发过程中对疑难问题的定位和解决将十分有帮忙。在后续的文章中将对插件的运行机制和 API 进行深刻介绍，有趣味的读者也能够先参考插件开发指南进行理解。
点击关注，第一工夫理解华为云陈腐技术~