置顶如何更高效调试微搭低代码应用精选热门

2023-06-29

1689浏览

0评论

深入探讨了如何更高效调试微搭低代码应用,了解调试在软件开发中的重要性，以及微搭低代码整体架构和应用核心 DSL 的相关知识。学习如何成为调试大师，包括掌握调试工具和方法、应用开发排障最佳实践

如何更高效调试微搭低代码应用

大家好，我是 Booker，今天的分享主题是《如何更高效调试微搭低代码应用》。在这个时代，应用开发已经成为了一项非常重要的技能，而微搭作为一款低代码开发平台，更是让应用开发变得更加简单和高效。但是，即使是使用微搭这样的低代码平台，应用调试仍然是一个非常重要的环节。为什么呢？因为调试能够提高开发效率和质量。

在经典的技术书籍《编程风格的要素》中，作者布莱恩·克尼汉曾经说过：“调试是软件开发中最费时、最痛苦的活动之一，但也是最重要的活动之一。”这句话非常贴切地说明了调试的重要性。在应用开发过程中，我们难免会遇到各种各样的问题，比如代码逻辑错误、界面显示异常、性能瓶颈等等。如果没有一个好的调试工具和方法，我们就很难快速地定位和解决这些问题，从而导致开发效率低下和应用质量不佳。

这里有个小插曲，事实上这段开场白是由 AI 生成的，最开始给的引用来源不太正确，说是引用自经典书籍《代码大全》，我查阅了之后发现并没有这段话，最后 AI 才告诉我搞错了，应该是来自《编程风格的要素》。看起来即便是 AI 也会犯错，也需要调试。

因此，今天我想和大家分享一些关于微搭应用调试的经验和技巧，希望能够帮助大家更加高效地开发和调试微搭应用。

软件开发中调试的重要性

惊人的事实：不同开发者调试相同错误，效率可能差距 20 倍

为何要提到调试？是否人人都懂调试？事实并不是这样。在《代码大全》一书中，有个对有经验的程序员的研究发现，调试相同错误所需时间比从 20 到 1 不等。而且，有些程序员不仅能迅速发现错误还能准确地改正错误。

以下是对至少四年工作经验的专业程序员调试一个含有 12 个错误的程序的效率的研究结果：

三个最好的程序员在调试中发现错误所用时间为三个最差程序员的三分之一，而所产生错误数仅为最差程序员的五分之二。
最好的程序员可发现所有的错误，并改正它们而不再产生新的错误。
最差的程序员漏掉了 12 个错误中的 4 个,而且在改正了 8 个错误后却引入了另 11 个错误。

许多其它研究也已经证实了这种大的差别，我们可以看到调试对于开发者是如此的重要，掌握了高效调试技能，对于开发效率的提升非常有帮助。

今天的分享主要针对高效调试微搭低代码应用，在正式开始调试的内容分享之前，我们首先对微搭低代码及其应用的架构进行一个整体的了解和回顾。

微搭低代码整体架构

腾讯云微搭低代码是一个高性能的低代码开发平台，用户可通过拖拽式开发，可视化配置构建 PC Web、H5 和小程序应用。在数据接口层面，通过内置及自建数据源完成数据 CURD，支持打通企业内部数据，轻松实现企业微信管理、工作流、消息推送、用户权限等能力，实现企业内部系统管理。连接微信生态，和微信支付、腾讯会议，腾讯文档等腾讯 SaaS 产品深度打通，支持原生小程序，助力企业内外部运营协同和营销管理。

产品架构

微搭基于云原生底座，依靠云开发丰富成熟的 serverless 能力，对外提供流程编排，应用权限管控数据访问，资源存储，编译构建，发布托管等能力。

在功能上包涵多人协同，可视化编辑，实时预览，独立构架发布等功能，在系统默认基础能力的基础上提供了各种扩展机制来应对复杂开发场景

基于底层服务和功能，在微搭上编辑的应用最终会生成平台无关DSL，并经过构建服务直接发布为不同运行的标准应用。

系统架构

在技术的系统架构上，采用基础的 BS/CS 架构，设计态客户端包括编辑器，控制台，以及 CLI 工具，分别对应用内容，模块元信息以及组件等进行管理，服务层部署于云上，以云开发服务为底层基础。

其中编辑器围绕核心数据协议 CALS 完成编辑器的应用及属性配置化生成，最终产物为运行平台无关的 DSL 描述，包含 UI、业务逻辑等基础元信息。

应用核心 DSL

领域特定语言(domain-specific language)（DSL）是一种旨在特定领域下的上下文的语言。微搭应用的核心 DSL 是Common Application Language Specification(CALS)，这份核心 DSL 是应用的元信息，可以完整描述一个微搭应用，事实上可视化编辑器、应用预览和构建发布都是基于 CALS。

编辑：多人协作修改 CALS 文件
发布：基于 CALS 生成应用产物
应用产物：包含小程序 + Web
预览：基于 CALS 渲染实时预览页面

运行时核心组成

应用在编辑完成之后，点击发布和预览之后，就从设计态进入了运行态，我们一起来看看微搭的运行时应用都有哪些主要组成部分。

应用框架: 应用运行时框架负责调度和处理生命周期、渲染和解析指令，并处理应用内的事件系统
组件：组件作为应用的主要可见部分，有不同的功能和种类，可以分为数据容器类和展示类、表单表格类等，也是用户接触最多的部分，其中组件在运行时暴露了属性、Widget API 包括组件的实时状态值和方法等
Runtime API: 微搭使用 $w 作为统一的作用域引用和命名空间，微搭前端运行时所有能力都可以通过这个命名空间访问到。典型的用法有：组件实例访问,平台属性和方法,循环作用域中数据和索引的访问

了解完微搭的架构和应用核心部分之后，我们正式进入今天的主要环节，聊一聊如何成为调试大师，如何掌握调试工具和方法。

如何成为调试大师：掌握调试工具和方法

常见调试工具及原理

常见的应用调试工具

常见的应用调试工具按照类别可以分为下面几类：

浏览器页面调试工具：如 Chrome DevTools、Firefox DevTools、Safari Web Inspector 等，用于调试和优化前端技术，如 JavaScript、CSS、HTML 等。
移动应用调试工具：如 Android Studio、Xcode 等，用于开发、调试和测试移动应用。
跨平台应用调试工具：如 Flutter、React Native 等，用于开发、调试和测试跨平台应用。
小程序调试工具：如微信开发者工具、支付宝小程序开发者工具、百度小程序开发者工具等，用于开发、调试和测试小程序。
框架和库的调试工具：如 React DevTools、Vue.js DevTools、Svelte DevTools、Weda DevTools 等，用于调试和优化特定的框架和库。

应用调试工具的基本功能

常见的应用内调试工具的基本功能一般包括以下几个要点：

UI 布局和样式：帮助开发者查看应用程序的 UI 布局和样式，以便发现和解决 UI 相关的问题和错误。
代码断点调试：帮助开发者在代码中设置断点，以便在程序执行到该断点时暂停程序的执行，以便开发者进行调试和分析。
网络请求调试：帮助开发者查看应用程序的网络请求和响应，以便发现和解决网络相关的问题和错误。

查看日志：帮助开发者查看应用程序的日志信息，以便发现和解决程序中的错误和问题。
性能分析：帮助开发者分析应用程序的性能，包括 CPU 使用率、内存使用率、网络延迟等指标，以便发现和解决性能相关的问题和错误。
应用审计分析：帮助开发者对应用程序进行审计分析，包括安全性、可靠性、可维护性等方面的评估，以便发现和解决潜在的问题和风险。

应用调试工具的基本原理

下面从 Chrome DevTools 的角度来分析应用调试工具的基本原理， Chrome DevTools 是一款用于 Web 应用程序的调试工具，其实现原理如下图所示：

Frontend：调试器前端是一个 Web 应用程序，它由 HTML、CSS 和 JavaScript 实现，用于展示应用程序的运行时状态和数据。Frontend 通过调试协议和消息通道与后端进行通信，以便获取应用程序的状态和数据。
Backend：调试器后端是由 Chromium、V8 或 Node.js 实现的，它包括浏览器内核、网络栈、JavaScript 引擎等多个组件。Backend 通过调试协议和消息通道与前端进行通信，以便获取应用程序的状态和数据。
Protocol：调试协议是一种基于 JSON-RPC 的协议，它定义了一组 API，用于描述和控制浏览器的行为和状态。协议分为多个域，每个域定义了类型、命令和事件，用于前端和后端之间的通信。
Message Channels：消息通道是一种在前端和后端之间发送协议消息的方式。Chrome DevTools 支持多种消息通道，包括 Embedder Channel、WebSocket Channel、Chrome Extensions Channel、USB/ADB Channel 等。

其实 React DevTools 及 Vue.js DevTools 的实现原理也非常类似，总结一下，类似于 Chrome DevTools 的调试工具的基本原理是通过前端、后端、协议和消息通道，来实现对应用程序的调试和分析。这些技术手段相互配合，共同构成了调试工具的基本原理和功能。

调试的定义和目的

了解完调试工具的基本原理，我们再回来总结下调试的定义和目的。

调试的定义

调试是指在软件开发过程中，通过一系列工具和技术手段，监控程序的运行状态，分析程序的执行流程和数据结构，以便发现和解决问题的过程。

调试的目的

更好地理解程序的运行机制和内部实现
更好地优化程序的性能和功能
提高程序的质量和稳定性
减少程序的错误和故障

微搭 Web 应用调试

接下来会进入分享的实战环节，分享如何进行微搭 Web 应用的调试，包含实时预览页面、发布后的应用及企业微信端应用等场景

安装微搭开发者工具

为了方便开发者调试实时预览页面，我开发了一款 Chrome 扩展：微搭开发者工具，目前测试阶段需要手动来安装。

从Release[1] 页面下载扩展的 zip包，在本地进行解压
Chrome 浏览器打开 chrome://extensions 页面
开启开发者模式
点击加载已解压的扩展程序，选择第一步解压的文件夹

安装 Chrome 扩展之后，在应用编辑器中点击 ▶️ 按钮打开预览页面，点击分享，并新窗口打开

在新打开的页面，打开 Chrome 开发者工具

在 Chrome 菜单中选择更多工具 > 开发者工具
在页面元素上右键点击，选择 “检查”
使用快捷键 Ctrl+Shift+I（Windows）或 Cmd+Opt+I（Mac）

然后找到微搭开发者工具面板进行调试

使用组件面板调试运行时状态值

组件面板是微搭开发者工具中的一个面板，它可以帮助开发者查看应用程序中的组件树、属性、样式、事件配置等信息，以便调试运行时状态值。具体来说，使用组件面板调试运行时状态值的方法包括以下几个步骤：

打开组件面板：在 Weda DevTools 中，点击组件标签页，即可打开组件面板。
查看和检索组件树：在组件面板中，可以查看应用程序中的组件树，以便了解组件之间的关系和层次结构。
查看单个组件的属性、样式、事件配置：在组件面板中，可以选择单个组件，然后查看其属性、样式、事件配置等信息，以便了解组件的具体属性和行为。
查看组件的运行态状态值：在组件面板中，可以选择运行态组件，然后查看其状态，包括 props 和 state 等信息，以便了解组件的运行时状态，例如可以查看 ListView 的 records 属性，即可查看到运行态获取到的后端列表数据。

使用组件面板调试运行时状态值可以帮助开发者更好地了解应用程序中的组件树、属性、样式、事件配置等信息，以便调试运行时状态值。

在遇到页面某个部分不能按照预期渲染的时候，推荐使用组件面板查看具体是配置或者状态问题还是渲染问题，可以提升问题的定位效率。

使用API面板调试网络接口

API 面板是可以帮助开发者调试网络接口，以便更方便地查看微搭相关运行态接口的入参、出参、异常信息、错误码、requestId 等信息。

使用代码面板+断点调试应用代码

代码面板将应用中配置的 JS 代码和配置按照文件树的形式展示了出来，这里有一个非常实用的功能，例如想调试某个事件 hander 的代码，可以不用改任何代码，直接定位到文件，点击蓝色的 调试代码 即可快速跳转到 Chrome DevTools 的源代码面板，然后就可以直接打断点进行代码调试。

微搭开发者工具的基本原理

作为一款 Chrome 扩展程序，主要核心原理和其他类似的工具比较类似，下面进行简单的讲解。

通过 Chrome 扩展的 panels background、content script 、inject script来实现应用程序和浏览器扩展程序之间的数据交换和通信。
通过 Chrome 扩展的 content script 和 inejct script 来注入微搭应用程序的代码，以便获取应用程序的运行时状态和数据。
通过 UI 组件和界面，来展示应用程序的运行时状态和数据，以便开发者更好地理解和分析应用程序
通过 Chrome Devtools 的 API 来获取和调用网络请求和 JS 资源相关调试信息

其他 Web 应用调试技巧

除了实时预览页面的调试之外，针对发布后的 Web 应用，这里还有一些应用调试的技巧：

使用 Chrome DevTools 或者 vConsole 查看日志输出

可以通过浏览器的开发者工具、例如 Chrome DevTools、Firefox和 Safari 的开发者工具，切到 Console（日志）面板查看 console 打印的调试和错误日志

或者在微搭的应用编辑器中的代码配置中引入 vConsole[2] 的 CDN JS 来查看运行态的日志

使用 Chrome DevTools 全局搜索排查代码问题

这是一个非常有用的功能，在页面报错没有堆栈信息的时候，可以通过全局搜索来检索代码找到可能出问题的地方，然后可以打断点进行调试。

打开开发者工具，点击 Console 标签，按 ESC 弹出，点击左边竖形排列的三个小点，选择 Search ，输入关键字进行检索

使用 Chrome DevTools 的 Performance 来调试应用性能

打开 Performance 面板：在 Chrome DevTools 中，点击 Performance 标签页，然后点击左下角的录制按钮，即可打开 Performance 面板。
进行性能测试：在 Performance 面板中，可以进行性能测试，以便了解应用程序的性能瓶颈和问题。
分析性能数据：在 Performance 面板中，可以查看性能数据，包括 CPU 使用率、内存使用率、网络请求等信息，以便分析应用程序的性能瓶颈和问题。
优化应用程序：根据性能数据，可以进行优化和改进，以提高应用程序的性能和响应速度。

调试企业微信中的微搭应用

针对桌面企业微信客户端，可以参考官方文档中的客户端调试[3] 的说明，可以调试 Windows/Mac 企业微信客户端应用
针对安卓企业微信小程序，可以参考 X5 内核的调试[4] 方式调试企业微信中的应用

微搭小程序应用调试

聊完了微搭 Web 应用的调试，我们来看如何调试小程序应用，主要会介绍两个方式，vConsole 和微搭唤起 IDE 预览

使用 vConsole 调试体验版小程序

打开 vConsole 步骤

打开胶囊菜单的三个点按钮
点击开发调试
在开发调试面板中点击打开调试
重新加载小程序后就可以看到绿色的悬浮 vConsole 图标，点击即可唤起调试面板

使用 Log 面板调试小程序日志

查看小程序中输出的日志信息。可以通过筛选器来过滤日志信息，以便更好地查看和调试。
执行 command 命令来获取全局变量值
开发者调用 console API 打印的日志内容，是转换成 JSON 字符串后传输给 vConsole 的，导致 vConsole 中展示的内容会有一些限制

使用 WXML 面板调试运行状态和样式

调试步骤

点击 Click Select
选中页面中的节点
查看运行态的属性/style 等
点击 Tree/ Details 切换详情和组件树

微信开发者工具预览调试小程序

vConsole 的功能相对局限，如果想在运行时打断点调试还是需要用微信开发者工具来调试。微搭编辑器支持唤起微信开发者工具进行调试，在微搭编辑器编辑了应用之后，点击微信开发工具预览，会同步应用功能到本地「微信开发者工具」。

具体可以参考微信开发者工具预览[5]文档

相比 vConsole ：

支持断点调试
支持修改代码实时编译
IDE 中无法模拟小程序原生 API

以上是微搭的应用调试的一些实战技巧，我们了解了常见的调试工具和原理，以及 web 和小程序应用的调试技巧。

应用开发排障最佳实践

最后一个部分，我们来聊一些应用开发排障的最佳实践，前面聊了很多实践的内容，这部分主要是一些调试的理论或者方法论。

调试的基本方法

确认和复现问题：在调试过程中，首先需要确认和复现问题，以便了解问题的具体情况和原因。
查看日志和运行状态：在确认和复现问题后，需要查看日志和运行状态，以便了解问题的具体表现和影响。
断点调试：在查看日志和运行状态后，可以使用断点调试的方法，以便逐步排查问题和定位错误。
小黄鸭调试法：在断点调试无法解决问题时，可以使用小黄鸭调试法，即将问题描述给一个虚拟的小黄鸭，以便思考和解决问题。
排除假设：在使用小黄鸭调试法后，可以根据问题的具体情况，排除一些假设，以便更准确地定位问题和解决问题。
修改代码：在排除假设后，可以根据问题的具体情况，修改代码，以便解决问题和优化应用程序。
测试验证：在修改代码后，需要进行测试验证，以确保修改后的代码能够正常运行和解决问题。

应用开发最佳实践

遵循文档说明开发：在低代码应用开发中，开发者应该仔细阅读并遵循文档说明进行开发，以确保应用的正确性和稳定性。
注意平台的差异和兼容性：不同的应用平台可能存在一些差异和兼容性问题，开发者应该注意这些问题，并根据具体情况进行调整和优化，例如不能在小程序中使用 DOM API 。
做好错误处理和容错：在低代码应用开发中，开发者应该做好错误处理和容错，避免应用出现崩溃或异常情况，同时应该提供友好的错误提示和处理方式。
理解事件流：应用中的事件机制一般是异步的，开发者应该理解事件流的概念和机制，并根据具体需求进行事件的处理和触发。
优化 API 请求：在低代码应用开发中，API 请求通常是应用性能的瓶颈之一，开发者应该优化 API 请求，减少请求次数和请求数据量，提高应用的响应速度和性能。
代码复用，避免复制和冗长代码：低代码应用开发中，代码复用是一种重要的最佳实践，可以减少代码量和提高代码质量。开发者应该尽可能地复用代码，避免复制和冗长代码，提高代码的可维护性和可扩展性。

高效问题反馈指南

Eric S. Raymond 是一位知名的开源软件活动家和作家，他提出了著名的“提问的智慧”（How To Ask Questions The Smart Way）指南，以帮助人们更好地提问和回答技术问题。以下是 Eric S. Raymond 的提问的智慧的主要内容：

在提问前做好准备：在提问前，需要做好准备，包括仔细阅读相关文档、搜索相关资源、尝试解决问题等。
描述问题的具体情况：在提问时，需要描述问题的具体情况，包括操作系统、应用程序、错误信息等，以便更好地理解和解决问题。
提供 MWE（最小化工作示例）：在提问时，需要提供 MWE（最小化工作示例），即最小化的可重现问题示例，以便更好地理解和解决问题。
使用清晰、简洁的语言：在提问时，需要使用清晰、简洁的语言，以便更好地表达问题和理解回答。
尊重他人的时间和精力：在提问时，需要尊重他人的时间和精力，不要浪费他人的时间和精力。
感谢他人的帮助和回答：在得到他人的帮助和回答后，需要感谢他人的帮助和回答，以表达感激之情。

一页纸总结

在今天的分享中，我们深入探讨了如何更高效调试微搭低代码应用。我们了解了调试在软件开发中的重要性，以及微搭低代码整体架构和应用核心 DSL 的相关知识。同时，我们也学习了如何成为调试大师，包括掌握调试工具和方法、应用开发排障最佳实践等。最后，我们还分享了高效问题反馈指南，帮助大家更好地提问和回答技术问题。希望今天的分享能够对大家有所帮助，让大家在应用开发中更加高效和优秀。谢谢大家！

注：本文部分内容由 AI 生成