00:00
大家晚上好啊,我是布克。呃,今天我分享的主题是如何更高效的调试V大D代码应用。嗯,那首先的话,大家先到的同学可以先扫码加入我们的这个,关注我们的腾讯的公众号,或者是加入我们的客户群。然后呃,接下来的话,我正式开始我的分享。呃,在这个时代的话,应用开发已经成为了一项非常重要的技能。而微达作为一款低代码平台,更是让应用开发变得更加简单高效。但是即使是使用微达这样的低代码平台,应用的调试仍然是非常的重要的环节。啊,为什么呢?因为调试呢,本身它可以提高开发的效率和质量啊,那我在分享的过程当中,大家如果有什么样的问题啊,可以在评论区里面提问,我可以随时啊可以回答大家的问题啊,如果看到的话。嗯。
01:01
在经典的一本书里面就是编程风格的要素。这本书里面。我们的作,呃,就是作者布莱恩克尼汉,他曾经说过,就是调试是软件开发中最费时、最痛苦的活动之一,但也是最重要的活动之一。这句话的非常贴切啊,就是它说明了调试的重要性。在应用开发当中,我们难免会遇到各种各样的问题,比如说代码逻辑的错误,界面显示异常。性能瓶颈啊等等,如果没有一个好的调试工具和方法呢,我们就很难去迅速的定位啊,解决这些问题。从而导致开发效率低下和应用质量不佳啊,那这里有个小插曲啊,这个我这个开场白啊,实际上是由AI生成的,那最开始他给的这个引用来源呢,不太正确。他说的是这个是引用字经典书籍,呃,这个代码大全我查阅了之后呢,发现并没有这句话,最后呢,AI他告诉我他搞错了,应该是来自于编程风格要素这本书,所以看起来即便是AI也会犯错,也需要去调试它。
02:08
因此呢,我今天想跟大家分享一些关于微达的应用调试的经验和技巧,希望大家呢,能够帮助大家能够高效的开发和调试未来应用。啊,我的分享的话,大概会分为四个部分,第一个部分呢是啊软件开发调试的重要性,那第二是维达低代码的整体架构,那第三呢是最重要的部分,就是我们如何成为调试大师,掌握调试工具和方法。那第四部分呢,是一些啊最佳实践,包括应用开发排账的一些最佳实践。啊,首先呢,我们为什么要去调试呢?是不是人人都懂调试呢?事实上并不是这样的,在代码大全中啊,这个是代码大全这本书里面写的。如果就是有有一次他们对这个有经验的程序员呢,有一个研究啊。
03:01
发现调试相同的错误,那所需的时间啊,其实会相差接近20倍。啊,如果而且有些程序员呢,他不仅能够发现错误呢,而且还能够迅速的改正错误,那下面呢,就是他们这个一个对于四年的工作经验的专业程序员,调试一个含有12个错误的程序的效率的研究啊。这个研究的话,大家可以看出来,最快的和最最慢的程序员的这个速度啊,相相差大概是啊1/3。啊,然后那个。呃,最慢的程序员呢,他在发现这个调试过程当中呢,还去漏掉了很多错误,而且呢,他改正了新的错误之后呢,他又引入了另外的错误啊,那这种其实会发现不同的,呃,经同样工作经验的程序员,他其实调试技能也是会有很大差别的。我们可以看到,呃,这个差别是挺影响非常大,可能最大可能到20倍,那我们。
04:03
如果调试队伍开发者是这么重要的话,我们首先就是要掌握高效调试的一个技能,这个对于我们的这个开发效率的提升是非常有帮助的。那我今天的分享呢,主要是针对高效的呃,调试维达低代码的应用,那在是正式的开始调试部分的分享之前呢,我们首先会对。呃呃,低代码的这个。呃,应用应用架构。进行一个整体的了解和回顾啊,刚才有同学说这个声音比较小,我调大了一点啊。嗯。首先的话,V代码它是一个什么平台呢?它是它是一个基于这个云原生底座的一个。一个这样一个。真心可以吧?是一个高性能低代码的一个开发平台呢,用户他可以通过这种我们可以看到这种拖拽式的开发去可视化的构建应用啊,这个应用包括像PC端,H主端,外部端,小程序端啊,这个在数据的接口层面呢,呃,通过内置及自建的数据源完成数据的CD。
05:14
啊,可以支持很多这种组件的生态,包括开源的组件啊,可以集成进来啊,那呃,它也可以去结合这个一些像企业内部数据啊,比如说做企业微信啊,然后工作流啊,消息推送,用户权限,包括连接我们微信的生态啊,像腾讯微信支付,腾讯会议,腾讯文档,包括腾讯的一些其他的SaaS产品。啊,助力呢,我们的这个企业的内外部协同和营销的管理。啊,那我们聊完了这个呃,产品的这个呃,功能之外呢,我们看一下它产品的架构啊,我们产品的架构是怎样的呢?首先的话,它本身呢,是基于这个呃,云原生的底座,云原生底座的话就是实际上就是我们首先会基于像我们的TSFTCSTCB啊,主要是云开发这些层,这些层啊包括成熟的一些service的一些技术,那对外呢,提供了上层的这个服务层,包括引擎服务,构建服务啊,包括系统服务等等的。
06:11
然后在功能上面的话,又支持多人协同可视化编辑啊组件的编辑,包括文档这个功能是很强大,那呃,最终的话,其实它它会做什么呢?它会生成一些。呃,平台无关的一个DSL,就我们的应用是什么呢?应用其实是用这个啊。D来描述的一个平台无关的一个东西,然后呢,看DSL,这是我们后面再再提的啊,然然后经过我们的构建服务呢,最后直接发布为不同的标准化的应用。OK,那这是我们的平台的一个架构,大家有问题可以随时在评论区出来。然后那系统整个系统是怎么样架构呢?我们也可以看一下。整个系统的话,我们首先的话,它是很常,它也是采用一种就是常规的这个啊BS架构啊,我们的呃。
07:00
设计态和运营态有一个区分,设计态呢,就是包括了编辑器啊,控制台包括C啊,这些是客户端的工具啊。他们分别呢,会管理应用啊,模块组件啊这些东西,这是我们的设计机器的功能。它的服务层呢,是在云上啊,云上的话,它实际上就刚才讲的一些基于云原生的一套东西,包括一些构建什么的。嗯,然后呢,呃,我们今天主要的内容是应用相关的,所以我们讲一下编辑器里面,编辑器里面它实际上围绕的是我们的核心数据协议,就是叫我们的DSL来完成应用的搭建,那最终产物就是我们的,呃,这个包括包含我们应用的UI,业务逻辑的一些技术的一些原信息等等。那那这个核心呢,是什么呢?这个核心呢,我们称之为呃维达的一个核心变色叫CS啊这个呢是什么呢?它是我们叫称为一种叫做DSL的东西,它是呃,DSL是领域特定语言,它是一种就在特定领域下的一种上下文的语言,可以简单说就是一种啊,就是为大家特有的协议吧。
08:07
啊,那它的,呃,这个协议呢,是我们相当于是我们整个应用的一份原信息,它可以完整的描述一个应用。事实上呢,我们的这个看可视化编辑器,应用预览和构建发布过啊,这些都是基于这份协议叫做CS,那翻译过来可能就是通用的应用描述啊,语言规范啊。啊,这个东西是我们的一个核心的部分。嗯,那这个呃,基于这份协议的话,我们就可以做什么呢?就首先他编辑的时候多人协作啊去修改的,实际上就是这份C,然后呢,在发布的时候,实际上是基于cos来生成应用的产物,那应用产物的话,我们可以包含小程序和web,或者将来可能会拓展出更多的啊,就是一些应用类型啊。OK。那在预览的时候呢,它可以不用构建,它直接生成一个渲染一个啊,基于这个cos生成一个实时预览的页面,那么后面也会讲到怎么去调试这个实时预览页面,这个也是一个啊,它基于快照的一个一个一个方式啊。
09:13
这个我们后面可以关注一下,嗯。嗯。OK。呃,那应用运行时,那核心有什么呢?核心呃,我们的应用编辑完之后,再点击发布和预览之后,我相当于就从这个设计态进入了运行态,那这个设计态啊,就是编辑态到运行态之后,实际上就进入这个不管是预览或者生产的一个环境啊。这个我们可以看一下V大的应用运营时的这个应用的话,它的组成部分都有哪些呢?大家可以看看这张图啊,不知道能不能看的清楚啊,就是首先的话,我们会分为三大块,第一大块呢,是应用框架部分,就是我们的应应用运行式框架,它呢负责调度呃和处理生命周期啊,就是我们应用它一个应用的话,它有什么,比如说你进入应用打开显示应用啊,包括进入某个页面,显示某个页面的生命周期。
10:11
包括它的指令,比如说这个组件,它是是否渲染啊,是循环或者什么之类的啊,这些指令系统,以及一些事件系统,比如说点击点击的那个,嗯。那个按钮的时候,它触发了一系列事件,然后后续又做了一些处理,我们事件系统这个呢,都是我们的应用师框架,那运营师框架在调度啊,他去处理,他去渲染和解析指令,并处理这个啊事件系统。然后呢,呃,另外第二个大块呢,是组建,组建呢是什么呢?组建就是我们现在呢,呃。应用的主要的可用可见部分啊,它有很多不同的功功能啊,一种类,我们可以把它简单分为像数据容器类啊,展示类,表单表格类啊啊等等的这些啊。包括图表啊这些,这是我们最终用户呢,接触的最最明显的最多的地方。
11:03
那其中呢,组件的话,它自己在运行态也暴露了很多的属性啊,包括我们的呃,一个叫VG的API,这个相当于我们组件上面的AAPI,那可以获取到什么呢?获取到。组建的一个实时的状态值啊,实时的状态值。实时状态值呢,呃嗯。这个和包括组件的挂挂载的一些方法啊,举个例子啊,比如说组件的它可能啊,就会有什么呢,就是呃。一个比如说input组件,它可能会有什么,它可能会有它的输入值啊,就当前用户正在输入的值,我们可能叫做到w.input1.value啊,这可以获取到它的一个当前获取到一个值啊,这个可能是V大个特色啊,然后另外呢,就是在。呃,就是它这个组件呢,可能会有一些方法,比如说这个input,它可能会有一些clear value啊,或者是set value的方法,那也可以通过这种方式呢,去调用它啊,去获取,去设置值啊,去清空啊。
12:07
这样这样的一些包括触发校验啊等等这些的一些方法。啊,这个就是我们组件上面的一些功能啊,就是它可能会有微置的API啊,就是用来让我们的运营它的啊,一些其他的啊代码呀,或者是其他组件啊去跟他啊,包括事件啊去跟他联联动啊另外呢,有一块呢,就是啊我们的组件呢,上面会有样式API,就是样式API呢,它是实际上是关注于这种展示性的,比如说呃,就是像CSS变量,我们可以通过CS变量来控制整个VR的一些组件的样式,包括主题啊,啊包括这种啊颜色,颜色啊大小啊尺寸这些东西。啊,那还有一些就是我们的样式的class,这些也是可以云台去通过CSS去控制的,对。呃,那另外呃,最后一大块呢,就是我们运行时,就是除了这个展现的东西,包括框架之外呢,还有一个就是API,就是我们叫运行时API。
13:05
因A篇的话,呃,它首先你看可以看到这个它的都比较,呃这个。呃,标准啊,都是通过WW开头的,这个是我们V达统一的一个作用域的,呃,引和引用和命营空间啊,这个是在V达前端的运行时,所有的能力啊,都可以通过这种方式啊运营空间去访问的,那可以访问到什么东西呢?大概会有嗯这么几样。比如说呃,组件的实例啊,实例啊,我们前面讲的这个input是吧,Input。Input。然后,呃。然后包括那个平台的一些属性和方法。平台属性方法的话,它会有什么呢?比如说像啊这个环境相关 Ww.EV啊 Ww.cloud这这个呃,我们可以看到这个命名,可以看出来它有什么区别给比如说这个APP呢,它可能指的是应前端的应应应用,Cloud呢,指的是这个我们去调用云端的一些能力,比如说调用数据源啊。
14:07
或者是什么,或者是呃,就是啊,去上传图片,上传文件等等的这些啊。呃,然后。嗯,然后在环境相关的话,有什么呢?就是我们的呃。叫到UV啊WUV还有一些工具方法啊,包括一些设备信息这些东西的话,都是我们的这个组件的运营态的一些平台方法,平衡属性。嗯,那然后除了这个之外,其实还有一些包括像我们在前面讲循环的时候,这种指令的时候。它可能会有这个循环作用域啊,包括我们可以拿到这个循环体作用当中的数据和索引,比如说类似于啊,很多框架里面都有这个for什么什么,然后item,然后index的这个东西啊,其实也是通过这个我们运营时的这个API,然后去。普通的。
15:00
OK,那这个呢,其实就主要就是我们的一个微大的那个呃,架构啊和应用的一个呃,核心部分。那我们呃,介绍完这个之后,大家相信大家可能对微大有一个呃认识啊了解啊,就是可能以前用过或者没用过的,反正整体的话会有个认识,不管包括产品功能,还有就是产品的架构以及技术的啊,这个大概的一个组,包括我们讲的一个。CS啊,包括时预览这东西,对,那我们下面的话就正式的进入我们主要的环节就是啊,我们的一个调试相关的就是。如何成为调试大师啊,这个掌握一些啊,调试工具和方法。那这个呢,呃,我们在呃讲维达之前啊,我们先看看。市面上有什么样的调试工具啊,这个可能大家都很多都很熟悉啊,这里列举了一下,大概有很多种啊,可以看到有什么呢?就是。
16:00
呃,像分分类的来看的话,有浏览器的这个页面调试工具,像比如说Chrome的话,它我们用的最多啊开发者。用的这个啊,它的它有那个dev to啊,这个这个是觉得可能最好的一个这个开发工具啊,然后包括这个firefox的这个dev。然后以及Safari啊,它也有这样一个web inspector,这是我们浏览器来调试啊页面的一个工具,然后呢,呃,这个。如果看移动应用的调试啊,现在呢,主流的像iOS安卓的话,它都有自己的这个C和插扣的这个是。调试他自己的iOS应用和安卓应用。啊,然后呢,嗯,第三块呢,是什么呢?就是跨平台的应用调试工具,比如说现在比较流行的像flutter呀,React native啊,可能用的比较多的,以前以前用的比较多啊。这些包括呃,这些的话,它其实也有对应的一些调试工具,那的话,它其实它的调试工具是一个跟react那个调调试工具是非常类似的啊,就是它其实是一平长得很像,然后但是跟但是它是个独立的一个客户端,其实呃,研究发现的话,他会发现它的前端可能都是一样的。
17:16
嗯,大家有什么问题可以在群里面,在那个评论区啊,就是发出来啊这个。我可以,如果说有遇到什么样的问题的话,可以发后面可以解解答。然后呃,小程序啊,这个就我们微信小程序,它这个也有相相关的调整工具啊,就集中在我们的微信开发者工具里面。包括支付宝百度啊这些等等的,它也有这个相应的工具啊,啊,那小程序的话,其实除了这个开发者工具啊之外呢,它其实还有一个微康,So微康呢,它是在。运行态就在小程序运行的时候啊可以啊,就是体验版的时候可以打开。打开的话,他可以去看到一些啊,就是。就是页面的日志啊,包括一些报错啊,这些信息,包括一些啊,这个页面的W3MML的这个结构啊等等等等这些,那最后一块呢,可能就是前端的这些框架库啊,常见的就是像。
18:14
VIVO啊,还有这个也新兴的框架,包括V达的to,其实也归属于这类啊,就是属于是特定的框架啊。和库,他自己会有相应的一个调试工具,OK,我们看了这么多调试工具,那。他们有没有什么共同特点?可以看一下。呃呃,这里其实列举的事例啊,可能都是这个。这个Chrome的这个APP to的工具啊,这个这个图啊,但是其实大部分的调试工具呢,都很接近啊,都很像,它们都有类似的功能。啊,比如说呢,就是第一个呢,是什么呢,就是。呃。最重重要的就是做UI嘛,就是前端页面啊,应用都会都会,首先要调应用布局,UI布局样式这些。
19:02
基本上所有的应用这个调试工具都会有这样的一个功能,他帮助开发者去查看应用的程序的UI布局样式,去发现呢解决这个UI相关的错误和问题。那第二块呢,是代码的一个,呃。断点调试啊,这个这个非常重要的,这个因为在代码运行了之后啊,就是我们如果去调试。这个代码的话,最高效的除了打日志啊,打日志这个之外,打日志本身它是一件,就是可能你你需要呃,那个修改代码才能实现。断点的话,它其实可以。可以就是方便的设置在代码当中,然后运行的时候直接它可以程序呢,可以执行到这里啊,可以暂停,暂停下来呢,我们可以看到啊,这个执行的状态,比如说现在这个里变量的值啊,它的这个自动域里面的一些值啊,包括啊这这些变量的一些东西啊。
20:00
然后,嗯。第三块呢是什么呢?就是网络请求的调试啊,因为大部分应用都会有发网络请求,那这个的话,呃,一般都会有这样的一个工具,它可以去查看呢,网络的一个请求和响应。去发现呢,解决网络的一个相关的问题和错误啊,Come,这个的话,它就可以过滤,比如各种各样的资源类型,然后呢啊一些包括可查看一些响应时间等等的啊,这是它的工具,那另外一块就是我们的常见的应用调试工具,它都有的功能啊,就是日志啊。日志这个很基础,大家都可能会打,所以呢,日志功能也是一个基本的标配的。嗯,还有就是,嗯,这个叫什么性能的分析啊,性能性能分析。呃,这块非常重要,我们在做应用做完之后啊,除了这个能跑,嗯,没有bug之外,它的这个。信用的体验,比如卡不卡啊,它内存占用啊,这些东西其实非常重要,那这个其实所有的工具里面基本上也都会有啊,就是有这个能看得到什么呢?就是我们的CPU的一些应用的CPU的占用。
21:08
内存的使用情况,网络的延迟啊等等,它的一般都会通过这样的工具,那Chrome的话,它其实啊,它这个里面是非常强大的,包括它各个线程的一些执行啊,包括做一些啊这个JS的一些啊,就是我们的火焰图啊,就是调用的一个。整个的一个完整的一个profile啊,然后都可以通过这个方式来总结出来,看到我们代码里面哪里是存在可能环节啊,包括就是有一些。可能丢帧啊,就是比如说你的页面卡顿,它也是可以发现。啊最后一块呢,就是一些啊应用审计,应用审计的话,它做什么呢?其实是啊,包括整个应用的一个安全性,可靠性,包括可维护性,可访问性啊比如说呃,这些东西的话,是我们的一般的这些框架平台啊,他会给出一些建议,他会说告诉你啊,这个东西你你不符合这个最佳实践啊,或者是呢啊就是评分很低啊,或者是不安全,或者是对于这个无障碍不不不太好。
22:09
啊,可能会有各种各样的这些审计,他会给出一个评分和建议啊,这个也是应用调试工具的一些基本的一些功能。OK,那这个呃,我们看了一下,呃,整个大大部分的应用调试工具基本上都会有这些东西。嗯,那了解完这些之后呢,我们看看嗯,原理吧,就是。嗯,我们从这个Chrome的这个dev里面去研究研究它到底啊这些应用调试工具的话,它都是怎么实现的啊,那这个右边这张图呢,是什么呢?是Chrome dev to啊,它的一个实实现啊,就是它的会分什么分,分为这个左边的这个叫做啊前front前前端,右边是backon,这两个都听起来好像像是网页的前端后端啊这个不是,这是实际上是什么呢?是它的。
23:00
这个调试器的前端,这个调试器的后端,调试器的前端呢是什么?是一个外部的程序,就是个网页,它是由HTMLCSSSJ,嗯,JS实现的,它可以展示呢应用的整个一个运行状态数据。就是我们看到的前面的截图全是他对吧。然后呢,它可以通过调试协议呢,和呃,和这个消息通道呢,和我们的这个。后端的进行通信,后端是谁呢?后端是啊,比如说Chrome浏览器的话,它就是Chrome啊。可能呃,比如说note GS的话,可能它有一些V8呀啊啊note GS的一些实现啊,也是也可以做后端,也可以去连连上Chrome去的调试工具去调试。这些是它们的后端,它包括了内核网络啊,这些包括GS引擎,因为它后端的话,它真正要掌握数据啊,比如说前面我们说。怎么去调那个网页,怎么去调它的这个网络,包括这个呃,页面渲染,包括这个JS执行,其实呢,它要串起来,它的后面的实现,包括浏览器的内核啊,包括JS的引擎啊,包包括网络是怎么发的啊,他都能感觉到。
24:10
这个back的话,它其实通过调试协议呢,去啊去跟前端通信啊,去啊跟那前通信呢,把这个东西同步给这个。所谓的这个前端啊,前端去获取啊这个信息,比如说我要去查看某个element的一些啊元素的一些信息,传给后端,后端解析完之后传给他啊就这样,那这个协议是什么?这个协议叫做Chrome的协议,叫做CDP啊,它叫做Chrome to protoc protocol。这个是,呃,一种类似于这种接算IPC的这种协议啊,它是一种有很多这种AAPIAPI里面呢,他去描述了。控制了浏览器的一些行为和状态,那协议呢,它会分为多个域啊,包括像浏浏览器里面会分啊各个命名空间吧,把那很多功能分开。
25:00
这个话它它可以干嘛呢,可以去用于前后端去通信啊。那他们通信的话,它通过什么通信呢?啊,这个就是叫做消息通道,这通道的话就是一些媒介吧,就是这个媒介的话,它呃。呃,它是一种在前端和后端发送协消息协议的一种方式,Chrome devs的话,它有多个消息通道,包括这个这个,嗯,这个,比如说呃,类似于web socket,包括USBADB啊,这些东西都是可以的。OK,看完了这个,呃,这个它的实现啊,那我们其实可以总结一下,呃,大部分的这个,呃,开发者工具啊,它都是类似的原理,它会有什么呢?前端后端协议,消息通道这四部分组成来实现一个调试工具啊。销售工具。呃,这个调试工具的话,呃,然后呢,它主要就是配合起来呢,就把应用程序的状态呢,去同步给让开发者可以看到去方便的看到,去调调试它去分析这个应用,OK。
26:07
呃,那我们回看完它这个常见调试工具和原理啊,我们去了再回顾一下调试是啊什么调试是为了什么对吧?调试呢,我们可以给他一个定义啊,它首先就是我们在软件开发的时候啊,其实通过一系列的工具手段那去监控程序的运行状态。啊分析啊,应应用程序的一个执行的流程和数据的结构啊,这个很重要,就是数据流程,数据执行的流程就数就是大家用我们代码逻辑和数据的结构,因为我们程序呢,是做什么呢,说白了就是在。处理数据嘛,对吧,很多时候都在处理数据。这个其实就是很关键的部分,就是我们要去调试这个运行状态里面的数据结构和流程是不是对的,然后来发现呢和解决问题。那调试的目的就是不言自明啊,就是我们要去理解它这个运行机制,内部实现及优化我们的程序的稳定性啊,性能啊,包括性能功能啊和质量,然后减少程序的一个错误和故障。
27:11
啊,这个是我们的一个目的。嗯,这个是比较啊,就是啊那个。就是。理论的部分我们后面啊,就是进入到这个实战的一个环节啊,实战环节。实战环节的话,就是我们从V的这个呃,应用开始啊,怎么去实战去调试啊,这个是我们今天讲的一个。除了呃,理论加实践的啊,还有一个部分。OK,那呃首先的话,呃,这个呃应用的话会分为几种啊,就是我们应用一般会有。像外部应用,小程序应用。Web应用的话。它它有什么呢?它就是它有呃,就是实时预览的页面。还有呢啊,这个发布后的应用,这两个是有区别的,我们前面讲过,就是一个是预览页面,一个是发布构建后的,还有还有一种场景,也就是我们的VW知识企微嘛,很多时候它会放到企业微信里面,那这个该怎么调试呢,对吧。
28:14
这三种啊,其实是我们今天想给大家分享的就是这三类的页面的话,都有一些调试的技巧啊。啊,那第一步的话,首先我们这个实战开始啊,就安装这个微单开发者工具啊。那维达开发者工具是个啥呢?其实我们刚刚讲了很多这个,呃,这个开发者工具啊,那个我们我们也做了一个开发者工具,为了方便大家的调试。呃,这个目前是测试阶段,就暂时还没有在Chrome的商店上架,所以大家可以通过get up打开这个网址啊。就是那个呃网址的话可以去呃下载这个,可以扫这个二维码,可以可以下载这个这个工具的这个release页面,可以下载这个Z包,下载完之后的呃可以在Chrome的浏览器打开。
29:06
啊,打开呢,打开Chrome的这个下载完之后要解压,解压完之后打开这个Chrome的这个extensions啊,这个这个页面就是扩展页面,然后呢,我们打开开发者模式。打开完之后呢。就可以去加载本地已解压的这个扩展程序了,我们就可以选择前面解压好的这个工具啊。啊,这个工具的话,它就可以出现在这里啊,然后呢,我们就后面的话就可以用它来去做调试了啊,这里其实也简单说一下这个,呃,这个调试的过程吧,首先我们在维达的编辑器当中啊,就是我们有一个看到一个播放按钮,这个播放按钮是什么呢?就是它是一个。这个,呃。预览的预览按钮,就是刚讲的这个实时预览。点完之后,那就可以去生成一个实时预览的页面啊。
30:03
我们点分享,它会生成一个数据页页面。然后呢,我们可以打开这个页面。慢我们我这里打开了就是,呃,打开完之后啊,其实我们就可以在Chrome里面通过开发者工具这个右边更多工具开发者工具,然后包括一些快捷键也可以记一下,打开之之后呢,就可以看到可能在右边可能左边有一个维拉开发者工具。啊,这个是我们的伟大的一个,呃,开发者工具啊。这个开发式工具的话,它它是什么,它有什么功能呢?它其实跟刚才前面讲的那个调压式工具啊。呃,我看有同学说这个国产的朋友给我联系,其实呃可以用那个类似Chrome内核的呃工具啊,Chrome内核很多工具都是呃基于Chrome的呃这个内核,然后它也是可以装这个扩展的,比如说像呃国内的一些安全的浏览器啊等等一些双核浏览器大部分也是基于Chrome的,所以呃在国内的同学可以其其实也可以通过这种方式来。
31:09
来用啊,嗯,然后嗯。我们可以看到一个,还有很多面板可以简单看一下,有什么呢?比如说这个组件API代码日志,组件库。组件库,顾名思义啊,就可以看到我们这个应用里面用的什么组件库的版本啊,就是为大的一些组件和版本这些东西啊,然后呢,呃,这个。可以看到跟我们前面讲的那个东西,财税工具分类非常像。上也会有一个组件查看UI的,对,我们可以看一下怎么去,呃,怎么去用它去查看,嗯,这个UI首先打开这个组组件面板,我们可以看到这个是一个组件数,组件数的话啊,它是用英文啊这个ID来表示的,你看有个页面,呃,我们这个页面叫配置,然后下面有什么呢?有这个啊导航栏有插槽,有哎这个网络布局。
32:01
然后有行列。啊,以及里面的文本啊,包括按钮对这些的话,就可以看到它组建的这个关系层级啊,都可以一目了然,哎,还还可以搜索,就是我们看一下这个里面啊,有多少个文本啊,这个里面可以看到啊。OK,然后嗯。我们有了这个之后干嘛呢?我们为什么要用这个工具呢?我们其实可以看到啊,除了这个,我们如果一个如果没有这个工具的话,我们想调试,比如说想调试这个这个列表,那怎么做呢?啊,如果它没有显示数据,那怎么办呢?现在我们看一下list view,这个是它的这个这个组组件,我选中它之后呢,我们可以看到诶可以很方便的看到它的属性的配置,就是它这个组件,它有很多属性的配置,它配了啊,比如说它的查询条件的数据源啊,一些一些其他的配置分页啊等等的。然后它的呃,样式配置没有它的事件啊,也没有配置指令啊,都是处就是默认显示对。然后呢,这很最重要的部分是什么,我们查看刚刚讲讲过调试,调试什么,调试的是状态数据和状态。
33:06
数据和状态,那我们就看重点看右边这两个,一个叫做运行值啊,运行态的值。就是我们可以看到这里呢,这个query condition呢,它是一个什么呢?它是一个。啊,这种我们叫做绑定的东西,前面加了冒号之后是绑定,那他在在运营态的时候,它有可能把那个半变量啊,在生态的时候可能看不出来它是什么效果,在运态的话可以直接的看到它的值啊,当然这里这个例子不太恰当,因为它都是一个啊这个。都是一个静态的值啊,有的时候它可能是这边是一个变量名,这边可能就是实际的值啊,我们可以看到在真正静态的时候,它传给主编的是什么东西啊。然后呢,第二个呢,是什么呢,就是。组件的内部状态啊,这个很重要,就是我当我传了属性给给组件之后,组件到底有没有查到数据呢?比如说现在这个数据容器啊,他是负责拉取这个文章列列的。
34:04
那他有没有拉到数据呢?我们可以看到它有个属性叫record啊,这个记录啊列表,这个就是从后端返回的拉条,拉到了六条数据,哎,这个就就就能看到他运营态啊,实际啊是能拿到了这个状态啊。这个嗯。我们很多时候可能遇到一些什么页面不能按按按按,嗯,预期去渲染。那这个其实我非常推荐大家去用这个面板啊,去解决这个问题,就是看怎么看呢,到底看看什么呢?看是传参传的不对呢,还是没数据呢,还是有数据但是没渲染啊,这个其实就是我们把这个问题就可以啊,就是很明确的去看出来,假设说啊这里有数据,但是这里没有,那说明是不是这下面也有没什么什么问题,我们可以去UI上去看,如果发现这里都没数据,那是不是我们条件传的有问题啊,就可以看看条件是不是传的有问题,比如变量的值。这个是真的是非常非常有管用的一个,呃那个呃,一个技能啊,所以这个我非常推荐大家,就是使用V大开发的时候,可以用起来这个组件,查看UI的一些配置和运行它的状态值啊,这个灵活去用。
35:16
啊,然后除了呃这个呃,查看这个组件之外啊,我们可以看API,我们可以刷新一下啊。嗯,那我们刚才假设说,我们刚刚那个例子看到它啊,这个网络是有问题啊,没有,呃,这个假设是说,呃,如果发现这个接口没拉,拉没拉回来数据啊。假设说没发没拉回来这是空的,那我们看看,我们想知道这接口到底传的,呃,就是它反返回是啥对吧?这里的话可以用浏览器的工具啊,但浏览器的话,因为我们的协议啊,就是V达的这个传输协议也做了一些处理啊,就可能混淆了一下或者怎么样的,就是会看起来不是很直观啊。工具上也做了一些优化,可以让他很直观的看到我们,呃呃,加载页面的时候有哪些这个。
36:04
啊,有哪些什么呢?有有哪些网络请求,比如说啊,第一个你可很直观的看到你打开页面的时候,它有一个外部用户的登录啊,登录的时候请求是这个,响应的是这个对吧,然后返回了一些东西,后端返回这些东西,然后查询了这个导航的菜单啊。然后呢,查询了一些页面的权限啊,然后呢,还查询了一下数据,诶这个是不是我们就我们刚刚看到那个数据呢,是吧,就是看到这六数据对吧,这个就是我们现在看到的信息啊。这个里面我们除了看到这个很方便的看到请求和响应之外呢,我们还可看到什么呢?就是它的一些耗时啊,还有包括一些这个请求ID,包括错误码,还有就是它的参数啊。参数啊,传了什么什么东西,这里如果检查参数的时候可以非常好的去看,然后包括heads啊这些一般情况下可能用不到,有的时候可能会用一下啊。
37:02
然后后端后端返回的这个什么呢?返回的这些数据啊,然后也可以看出来,包括它的长度啊,包header啊这些信息都可以看到,然后还有就是耗时的,耗时的话会呃会呃,就是跟浏览器一样,它会有。各个阶段的,像阻塞时间,DNS解析时间啊,握手时间,包括发送等待接受啊,请求阻塞队列啊,这些东西都都是那个。嗯。呃,这个叫什么都是可以看到的。然后呃,API的话,我相信通过大这个的话,大家可以就是去解决什么,解决很多这种就是接口请求,包括请求数据源进行API,进行外部的一些东西啊,一些接口的时候啊,那除了我们前面讲到说应用这个调试工具,它有很多这个所谓的呃重要状态啊API之外呢,还有一个很重要的功能,就是我们要调试代码的逻辑。
38:01
把代码的逻辑这个怎么调,这个这个是非常关键的,就是这个程序已经运行起来,我们怎么调,怎么调试它呢,对吧,这个。呃,我们这里还有一个tab叫代代码这个代这个tab的话做什么呢?他把我们微达这个的一个。编辑器里面啊,编辑器里面我们除了拖拉拽之外啊,啊拖拉之外,写组件之外,我们其实可以做很多的这个,写一些轻量级的代码脚本啊,比如说我们加载成功的时候,这个图片加载成功的时候就调一个啊啊JS代码我可以写,我可以写写一个代码是吧,比如说console log一些个啊这个事件。啊,对吧,然后可以添加一个方法test。啊,这个就是我们的代码部分,然后我们整体的话可以再呃保存一下。这个页面加载完之后,他应该就会去打印一个日志。嗯,那这个代码编辑器打开,可以看到我们这个应用里面就有很多很多这样类似的代码。
39:02
这个代码呢,呃,它会有很多种,首先会全局于级别的,包括像这我们的一些样式,包括刚前面讲到的生命周期啊,还有就是这个A,呃,那个。嗯,小程序的这个呃工具啊,我看呃评论里面有人说这个调试界面怎么打开,我这里再回回讲一下,就是大家可以去github上去搜索这个,呃,这个二维码,就是搜索这个这个这个同学可以截图一下啊,就是打开这个,呃,这个二维码去那个get up上啊,打开这个。这个网址去下载这个工具,然后安装啊,安装和下载教程这里面都有啊,都可以看一下,包括一些功能介绍,大家可以呃截图一下这个二维码,否则我可能后面又又又看不到了,对。然后也可以下面再呃课下再再看吧,对,然后呃,安装完之后,其实打开实时预览,那就可以很方便的调试了,这个我看提问的同学也是我们的这个呃维达的资深用户啊对,可以用一下。
40:14
然后,呃。我们讲到这个代码部分,代码部分的话,哎,好,我们讲的这个页面,这个页面现在是叫做blog日志啊呃,博客页面我们想调一下,给大家演示一下怎么能调试对吧,比如说我看到这个生命周期里面。它有一个什么呢?它有一个life口啊,它是配置的生命周期啊,这个东西,那我可以点击调试。诶,直接跳进了跳跳跳到了这个Chrome的这个啊,源代码的这个面板了。啊,那可可以在这里干嘛呢,打断点对吧?啊,我当然我这里啥都没写啊,这个写的时候可能会好一点,可能打一单点断点,这有没有用呢?我们刷新一下看一下。就是这个好处是什么呢?就是我们不用去把。
41:03
诶,进来了可以看到这个,我我我没有对应用序做任何的修改,我就去啊打了个断点,然后看这个,诶诶这个query看一些状态,看一些变量是不是正确啊对吧,这个就非常方便了,就效率很高,对吧,如果是改一下应用还要发布,还要去调,还要去怎么样就很麻烦啊对吧?这个是一个非常非常好用的,所以大家可以在呃代码面面板里面贴到你要调的嗯里面。啊,这个里面去点击调试,然后打断点啊,比如说这里我我初始化一下。微康,我看他为什么没出来啊,这报错了。刷一下他就他就进来了。啊,这个we can so,有啊。为什么没出来对吧,所以所以所以这个时候就就可以出来了,被看索性出来了。所以这里就是我们的一个代码调试的功能啊,非常强大,这个呃,我然后呃看一下后面的这个实时预览部分,我相信啊。
42:11
主要这三板斧啊。基本上日日部分没有实现,大家可以看这个日子就是呃,基本上可以解决大部分的这个运行态的问题啊。嗯,这个不知道大家有没有什么问题啊,有问题的话也可以说一下,嗯。然后我们,呃,也。讲一点理论论吧,讲一下我们这个工具是怎么做的,怎么实现,如果大家想了解的话啊,这个。嗯,可以,呃可以那个就是。呃,可以。看一下这个我们工具的实现原理啊,首先呢,我们是一个Chrome的一个扩展工具,Chrome扩展工具的话,它本身呢,它。他有很多的这个。嗯。呃,通通用的原理啊,比如说我们现在呢,实际上呢,它是根据这个扩展里面有这个panel页面,就是我们这个卡尔工具这个,呃,下面这个面板,它里面的一个面板里面的pan页面,然后还有一些背景执后台执行的DS,以及我们可以在页面里面注入一些content script,然后包括呃这个呃一些东西,然后来去做一些通信啊。
43:20
它彼此啊可以这样去通信,不能直接通信,但它可以去连起来去通信,然后呢,通过我们的UI,这个里面的UI界面去展现呢,这个我们运营态的一些啊。这个应用程序的一些状态和数据,让我们开发者呢,更好去理解和分析啊。嗯。然后就是呃,这些任务刚才实战的时候已经讲过了,这个就是我们呃,就不再去看了啊,然后呃。除了这个实时预览之外,我们前面讲到说我们实时预览啊,大家发666啊,这个如果大家有帮助的话,可以可以在群里面啊,也也也回复一下,对。
44:04
然后呃,就是这个,我们除了实时预览之外,然后看一看这个。呃,叫什么呢,看一下。我们除了生预览,还有就是那种发布后的应用,那怎么去解决呢?这个呢,其实就用我们的这个叫做啊Chrome two的本身的一些啊功能啊,就是它的,呃,功能刚才也也看到了,就如果是发布发布之后。其实也是可以通过通用的东西去看,这个很多同学肯定知道啊,但那我担心有人不知道,所以就也讲一下。啊,这里其实这些可以看到,哎,其实发布后的应用的话,打开控制台,反正能看到日志啊,看到各种日志啊,我这为什么做错啊,然后。嗯。然后呃,除了这个抗日之外,我我给大家讲一个高级功能啊,这个高级功能我觉得估计很多人都没用过,就这个个全局搜索排查代码问题,这个是怎么用呢?先演示一下,我在这埋了个地雷啊,埋了个地雷就这个,这有个炸弹点一下,诶为为什么。
45:12
啊,为什么他报错了啊,这个是为什么呢,对吧。报错了,报错了。这个是因为什么呢?因为我们啊这个V大的事件响应系统,如果啊,我可以看一下这个绑定啊,这个地方上绑定了一个,呃,一个按钮,按钮上绑定的事件。我们先不看,先不看他怎么,我们先从盲猜他怎么了。啊,发现这样了蹦,那怎么办呢?我们应用程序里面突然报报错了,好,那我们打开。拍工具,然后打开搜索啊三个点,然后点search。然后呢,可以下一般都会在下面隐藏起来了,好我们就剧透了,搜索一下这个动这个这个词啊。就是这个打出来这个东西,我们找一下,看能不能找到它。
46:04
好,看到了。哎,然后。它这个地方我们可以看到很多文件啊。一个泵,哎,点进来。六泵好。大家可以看啊,这里有个炸弹,还有不对吧,所以哎,是不是这里去去那个去写了个代码有问题呢,对吧?所以呃,我们可以看一下,检查一下这个代码是在它的地址啊,复制一下地址啊,Copy copy copy link address。啊,这里粘贴你可看到是index里面啊,这个看没没啥用,我们就去大应用里面去找一下。啊,哪里写的这个对吧,然后呃,刚刚才可以应该可以看到这个是在哪个里面叫做handle啊,这里local the block handle the boom啊,这个是。这样一个文件里面去看。啊,找他找他。
47:00
一代码里面代码编辑器,然后打开local code handle了。呃,都然后这哎这故意写了一个这个抛错,那为什么会弹出来呢?因为我们方便,为了方便他开发的调试啊,我们在除了正式版之外,预览和正式和体验的时候。就是如果你的事件你绑绑了一些,呃,那个。一些动作,但是呢,这个动作有报错,你默认你如果你没有去做错误处理的话,它自动会弹一个弹窗,但是你发布之后啊,你发布正式版之后。它就没有了,体验版和预览版都会有,所以这个主要是用来方便大家去调试用的啊。好,OK,呃,这个大家不知道有没有get到,就是Chrome的一个非常强大的一个色试功能啊,这个是解决什么,就可以调试我们发布后的应用。然后。嗯。发调试发布后的应用,然后呃,这个调试发布会应用的话,它可以去找到我们代码出问题的地方,然后去去解解决,去去定位它,我看刚刚有个用户问了个问题,他说预览和发布后的页面区别有哪些啊,预览的话我们讲啊,说明它是一个快捷的啊,就是渲染的方式,那这个呃这个的话实际上是什么呢?就是。
48:23
呃。他可以去能够快速的去查看我们应用的一个状态,但是呢,它域名是我们腾讯的域名,它不能直接对外的服务啊。呃,这个服务的话,它是用来让我们快速去啊,就是去分享去去快照啊,我们大家去看一下你的效果,但是呢,你最终上线的时候可能有一些性能啊,可能一些性能问题啊,或者是为了性能优化啊,考虑我们的构建后的东西啊,其实是会做很多的这个优化的,所以发布之后的这个应用,其实呢,包括体验版和正式版都会去做一些代码的一些压缩混淆啊啊等等的一些处理啊,这些包括它的网址也会变成开发者自己的啊这个地址,比如说你的默认域名,然后你可以绑自定义域名啊,这个就是。
49:16
嗯,这个我们。叫做嗯。正式版的一个跟预览版的一个区别。嗯。OK。然后,嗯。有同学问这个零零基础能不能学习下,我我我这个零基础可能会稍微有点门槛,但是可能要学习一下呃,JS的一些知识啊,因为这里面会写到一些样式啊,JS这些东西其实呃也不难啊,就是会前端啊,会基本的前端应该就可以去写为它。然后呃,我们讲一下后面的一个小小技巧啊,就是呃这个呃开发者工具它本身呢,它其实有什么呢。
50:00
呃,有这个performance的一个功能,它可以调试我们的这个应用的性能。嗯。用的性能。你的性能,然后这个呃。只要刷新啊,点击这个,点击这个录制,或者是点击这个刷新,它就可以干嘛,他就可以去呃。调试啊,这个页面的一个加载过程里面会包含了什么,包含了这个页面的这个。页面的一个JS执行网络请求啊等等的一些东西,这个对于发布会的应用都是管用的啊,大家可以看到就是咱们的应用如果有人反馈卡顿啊都或者干嘛的,可以用这个方式去调,看看哪里有有没有问题。然后还有一块呢,就是小程序,呃,就是企业微信里面的应用怎么调啊,因为企业微信是一个客户端啊,它不是浏览器。所以呢,这个我就我就不在这展开了,因为后面可以给大家一个链接啊,这个我后面会整理成文章啊,这个里面会有呃,一个链接就是打开咱们这个。
51:04
啊,企业微信的这个官文档,它会有Mac和这个Windows的这个。呃。客户端的一个debug的一个功能,呃,同时呢,呃呃小程序呃,不就是那个H5上面,如果想调试的话,可以调试这个安卓的,因为安卓的话,它是用的用的那个。呃,叫做。呃,叉五内核可以在网上搜索一下叉五内核的调试,就可以打开它的调试工工作。嗯,那然后剩剩下的就是这个,嗯。前面讲到了,讲完了这个我们的外部应用的调试,我们看看微大的另外一个产物啊,就是小程序端的应用怎么调试,那这块其实呃前面前前面也也有也有提过,就是呃微console呃呃就是微cons是什么?微console是就是微信提供的一个功能,它可以通通过这个小程序啊的一个体验版啊,打开呢之后呢,点点击三个点啊这三个点。
52:09
然后呢,在这个下面的菜单里面可以打开调开发调试,然后然后在服务从里面可以打开,嗯,点打开调试之后就会看到页面上,它重新进入小程序之后,就可以看到出现一个微康索。那这个可以干嘛呢?他可以去啊,调试我们的页面的日志啊,这个小程序里面就是你如果报错了或者干嘛,是不是没地方看啊,这个方式就很很好。他就可以去筛选和过滤。啊,然后呢,它也可以去指指定呃这个呃command执行command命令,然后去获取全局变量值,然后呢,开发值呢,它其实的注意就是打印的日志的时候,这个其实它它是会接次性序列化的啊,会传输给微,所以它的内容可能会有一些限制,如果你这个东西啊本身啊不能阶层序列化啥的,就会可能会有一些问题。
53:08
呃,然后就是呃那个。呃,我们在前面讲到了,我们可以去解去调试web应用的这个。组件的状态和样式啊,其实在小程序里面也是可以的,点开这个WL,然后点击下面这个click select,我们就可以去点击页面里面的一个节点去选中它。填入它之后呢,可以看到这个节节界面,就是也是个树状结构,比如我们可以看到这个button啊,这个button按钮,然后它这个节点啊,然后呢,它以及以及下面的一些,呃。可以点击details,可以切换到这个叫做。啊,切换到呃,水滴切换到这个它的组件的一些样式啊,就是详情啊。我们可以看到里面就有它的属性和它的样式的style的部分,这一块是非常啊好用的,就是如果说大家就是对小程序的调试组件调试啊,其实可以用这个工工具去搞。
54:07
嗯,那除了这个之外呢,呃,其实可能还不够啊,因为小程序的。呢,它其实是有一些限制的,它其实没法去打断点,没法去打断点,所以呢,如果我们想去打断点,去调调试。那呃。我们推荐大家用这个V达的这个叫做ID预览,就是拉起来这个开发者,我们的官方文档里面有这个开发者工具啊,预览这个文档的话,大家可以打开这个club,里面有这个微信开发者工具预览,它可以干嘛呢?可以安装一个工具,然后呢,登录完之后本地跑起来。啊,这编辑器里面直接可以换起来微信开发者工具,然后呢,呃,每次呢,你点击ID预览之后。它就可以在呃这个呃,微信开发者工具里面去调试预览,这里面你其实是可以用微信的调试器去啊,打断点呀,打日志啊,嗯,包括调试一些微信特有的能力,都是可以在这里面做的。
55:10
OK,那小程序的部分其实主要是,呃,这个它两个啊互相弥补啊,就是微康素的话,可以调试一些日志。然后W餐,然后可以调试体验版的,然后呢,呃开始工具呢,它可以去真正的去锻炼调试去呃去实时的修改代码去预览,OK,那讲完这个呃,V达的应用调试的一些技巧,实战啊实实战技巧我们了解了一些原理啊,包括调试工具原理原理以及外部小程序啊的一些调试技巧。那我们。最后呢,其实聊一点啊,就是方法论,就是说我们呃,应用开发台账有哪些最佳实践啊,调试的有哪些基本的方法,对吧,可以看一下。呃,首先呢,后面后面画了一个小房间啊,这个是一个很很经典的小房间调试法,那这个呃,我们看看调试成一个成问题啊,其实它有哪些基本的方法。
56:10
比如说我们首先要确认和复现问题,然后呢去查看啊,首先啊去了解具体情况,然后呢,确认之后呢,我们去可以查看一看日志啊,看一看运行状态,比如说看它的组件的运行时的值,看它的样式,对吧,看这些东西去看具体的一些表现影响。然后呢,对代码逻辑呢,我们可以通过这个断点的调试,然后去啊,逐步的查排查和定位问题。在断点调试呢,无法解决的情况下呢,我们可以采用小黄鸭的调试吧,就是我们将问题呢,描述给一个虚拟的小黄鸭,就是一个人吧,然后你可以告诉他,你说你大概的代码逻辑是怎样的。然后可能可能会有什么样的问题啊,你在你在讲述的过程当中,你你可能就会把这个问题去,呃,进行一个思考和和解决啊,就是。
57:01
然后,呃。嗯,在我们,呃,有了这个调试之后呢,我们去排除假设我们就看到哪些东西可能是呃。不是的,哪些东西可能是有可能是是吧,我们去去改一些代码,去调整调整。去验证一下,然后最终呢啊去测试啊验证最后就实现了这个。我们的一个啊。调试啊,这个这是我们的一个调试的基本方法,基本上大大部分的调试方法就可以这么去啊去用,这是一种一个基本的方法呢,然后呃,在应用开发的时候,我也想给大家分享一些最佳实践吧,就是。嗯,首先呢啊,我觉得就是我们啊在开发不,无论是用微单呀,还是用很多平台开发的时候都要去遵循啊文档说明去开发,这是效率最高了,大家不要觉得这个啊文档可能看起来很累,但是很多时候犯错啊或者干嘛的,就是可能就也没有有看文档,文档可能说了,但是我们没看啊,这个我们也一样,就是看小程序啊,包括看很多地方他可能没看清楚,然后我们就做了,然后查了半天发现。
58:10
啊,原来文档里面有说明啊,是这样的。然后呢,呃,在尤其是多端开发的时候,去注意这个多端的平台的呃差异和兼容性,比如说呃这个。呃,小程序和H5啊那个,呃,它的里面是不一样的,比如说我们不能在小程序里面去搞盗操作啊,这个是很常见的一些错误,对吧,大家知道你代码是在哪运行的。所以呃,然后就是呃。错误的处理和容错啊,就是代码写了之后呢。我们应该去啊,尽量的去避免啊,代码去报错崩溃啊,然后另外就是像维达这种很很常见的一些应用,它都是这种有事件流啊,就是有这种事件驱动的,我们要去了解这些事件的概念机制,它怎么串起来的啊,然后这个是呃,很关键的。
59:02
然后呃,最后呢,就是我们啊,在做应用开发的时候,要去对API的请求啊,减少去滥用,比如说我们不要去啊,发很多很多请求去啊,去搞一个什么东西啊,这可能是一个很常见的错误是吧。比如说可以考虑把那请求放在后端统一处理,比如说在我们被大的云函数里面去写啊,或者是把逻辑进行优化。那另外一块就是我们尽量去减少这个代码的一个冗余和长度啊,就是代码如果写的很长就很难维护了,代码要尽量去赋用,就是VR的低代码里面能写代码,但是尽量大家可能。去少去写,写就是写写简单的代码,或者写啊能复用的代码,就是这样,维护起来也是比较简单的。OK,那如果说呃,我们呃自己开发也注意了,调试也也注意了,那还是会遇到问题的话,我们该怎么去高效的去反馈问题呢?这个也跟大家分享一下,这个主要就是啊一个啊很有名的这个叫做提问的智慧啊,这个就是一个极客叫Raymond啊这个。
60:12
这个人他是一个,呃。知名的开源啊软件活动家和作家提出了一个著名的一个提问的智慧啊,这个指南很多年前了,几十年了吧。呃,他呃,主要是帮助人们去更好的提问和回提提问啊。就是为什么要学会提问呢?这个其实是帮助我们去解决,提升效率,对。因为在你提问的时候,很多时候如果说问题表达不清楚,然后大家可能很很难去帮你解决问题,所以我们在提问之前应该做好准备,做好什么准备呢?我们去做一些。啊,比如说阅读一下文档,看一看资料员,然后尝试去解决,我们先先去有一个基本简单准备,然后去把问题去描述清楚,对吧?比如具体它是什么样的一些个情况,他的一些错误信息是什么样的,我应用是什么样的,因为别人是不知道你的,你的问题的,只有你自己知道,所以你要告诉他你现在遇到什么情况,对吧,各种各样的情况告诉他。
61:11
然后呢,另外就是啊。呃,我们要提供一个最强化的工作,是这样是最快的,因为这叫m we啊这个东西。呃,这个是叫最小,最小化的可重性的问题是这可能对大家来说要求有点高啊,但是很多时候这个是最快的方式,这样的话可以屏蔽掉我们代码里面的一些其他的业务逻辑,只关注于啊这个部分。让别人帮你去啊,看单独看这个问题,然后我们描述的时候呢,要去清晰啊,简洁的语言去描述,去更好的表达,去理解,然后当然我们提问啊,就是很就是。有一些啊,就是我们可能也尊重别人吧,就是也也感激别人,这个是一个就是我们在啊程序员啊或者干嘛的一种礼仪吧,就是对吧。在提问的时候,其实是需要有一些啊这样的一些考虑啊,就是这样的话,我们的提问啊,或或者说我们的这个,呃。
62:07
反馈啊,可能会更加高效啊。OK,然后那今天我的主要分享的话,其实呃是高效的调试VD代码的应用,那这个是我今天的一整张图,还可以看要点。这块啊,是我的一个一张一张图一张图总结。总结一下今天的内容,我们可以看看到我们今天了解到了什么,来知到这个调试的重要性啊,然后啊,就是比如说这个20倍啊,这个这个差异,然后VD代码的应用是怎么组成的,比说我们的DSL是cos,然后它怎么发布的,包括常见的应用调试工具,以及应用调试工具的一些基本功能,包括它的基本原理,包括CDP啊,前端后端。这个以及一些呃协议啊,这个叫做消息通道啊,包括实战的部分我们去看了,呃,就是演练了一下怎么去调试啊,V达的web应用,包括实时预览,我们介绍了我们的V达的一个,呃,开工具啊以及。
63:11
企业微信应用,包括Chrome Chrome的这个工具的一些基本功能,能帮助大家提升效率的一些方式。也分享了这个微达的小程序的这个呃应用的一个调试,就主要是结合微cons和呃和IID预览来去解决。啊,然后嗯。最后呢,我们还去分享了一些一些方法论,包括调试的一些基本的方法。比如说像小黄鸭调试法断点调试啊,包括啊这个去查看应用的运行状态这些。包括我们在微大家开发应用,或者是开发一些场景应用的时候,应该怎么去做啊,对接加实践啊这些东西啊,那。呃,最后呢,其实对高校的反馈问题问题问题反馈也提提供了一些建议,就希望大家能够更好的去提问和去解决问题啊,主要是问题能够快速的被解决。
64:06
那我希望呢,我的分享的话,也能够对大家有帮助啊,让大家在这后面的这个。微大的应用开发当中啊。更加高效,更加优秀啊,我们做出来更好应用,这就是我的目的,如果能够达到这样的目的,我觉得我的分享也也能够啊,那就是产生价值。啊,那最后呢,就是希望大家,就是感谢大家的倾听啊,感谢大家今天一个小时的啊这个直播分享。先听不听,然后如果大家对微达感兴趣,对我们的啊,这个今天讲的内容感兴趣,欢迎大家扫码呢,加入我们的微达的一个客户群啊,左边是客户群,右边的是我们V达接代码的一个啊公众号啊,那我是布克啊,那就是我主要负责的是这个。啊,V大的一个接代码的应用组件和runtime啊,大家有有什么问题后面也可以跟我交流啊。
65:00
嗯,然后我看评论区里面好像回答的问题也。基本上。嗯,没有了。有没有什么新的问题,看大家有没有什么问题啊,如果有问题的话也可以啊,就是。聊一聊。啊,如果没有什么问题的话,那就我们的这个,呃,分享的话,今天就先到这里,然后也欢迎大家去收听我们下一次的看直播啊,就是因为大家也经常会有这样的直播啊,每周二会有直播对。那感谢大家。再见。
我来说两句