一、调试能力-常用调试器面板使用

调试器

概念：调试器是一个包含多种功能的集合面板，不同的集合面板分别提供不同信息的查看和调试功能

基本功能：

  1. Console(控制面板)
  2. Wxml(结构样式面板)
  3. Network(网络请求面板)
  4. Scurces(源码资源面板)
  5. Storage(存储面板)
  6. AppData(应用数据面板)
  7. Mock(模拟面板)
  8. Audits(分析面板)
  9. ······

可以看出调试器的基本和浏览器还是比较相似的，容易上手，同时基于微信小程序本身的需要添加了新的功能，方便开发

AppData（应用数据面板）

功能介绍：通过这个面板可以直观的看到页面数据的使用情况，包括当前页面的data数据以及vuex持久化储存的数据在当前页面的显示情况，同时可以修改数据，直接在页面查看修改后效果。

踩坑日记（不知道这个面板是一种怎样的场景）：

  • 在页面对数据进行初始化数据或者执行修改操作后都要对数据在控制台在打印一遍，查看是否为预期效果，这也就导致查看之后还得及时清除（不清理的结果就是控制台一堆打印，找个数据比较麻烦，即使是在打印时添加说明，要想精准的找到对应的数据依旧需要时间）

二、调试能力-真机调试

真机调试目的

  • 验证真机的表现
  • 排查真机的故障

调试入口

  • 二维码调试
  • 真机自动调试

设置-结点审查

勾选后在真机操作会变成点击对应区域显示当前结点信息，而原本设置的相应效果（比如：点击跳转页面）不会触发

三、开发便捷能力-局部编译

编译背景

随着开发页面数量的增多，代码的体积随之增大，编译等待时间就越长，从而造成：模拟器加载时间、预览和真机调试时间过长，而在开发过程中往往是调试一个页面时不需要调试其他页面，所以造成了资源、时间上的浪费

原因

模拟器中，需要加载至少一个分包下的所有代码，预览或真机调试时要加载小程序的所有代码，局部编译就这一问题实现了

仅编译和加载某个的代码

开启局部编译：

  1. 如果需要关联其他页面可以点击选择对应的页面

设置完成后表示编译速度直接起飞，只能用真香来形容了。

补充：如果是开发需要登录并且拿到用户数据的信息才能继续进行的页面，这里的解决方案是，在登录页面配置作为首个地址，然后依次按顺序添加就好，然后编译，速度确实是提高很多，同时场景多种多样，根据实际情况而定。

局部编译原理：

开发者工具对小程序的代码进行依赖分析，然后选择相关的代码文件进行编译吗，达到局部编译的效果