第二次作业

关于微信开发者工具的分析

导语：作为一个微信公众号的前端开发者，微信开发者工具是一个必备的调试具（只有这个软件能调试我也很绝望），今天就来分析一下这个软件。

一、调研，评测

1.下载软件并使用起来，描述最简单直观的个人第一次上手体验。

第一次上手感觉这就是微信开发的救星啊哥，没有了它我对调试根本无能为力啊！！！

a.打开软件后会让你选择开发项目的类型：小程序还有公众号，根据自己的需要选择。

b.选择完（这里选择的是公众号开发）就直接进入调试界面了，当然一开始只是一个空页面。输入项目部署的服务器地址，就可以进入项目了（前提是要先在微信开发者后台给你的微信号提供开发权限）

c.可以看到，这个界面跟chrome的调试工具十分相似，可以看到页面的dom结构，引入的外部文件，能看到控制台的错误信息，以及与服务器的http请求等等，还能模拟iphone各种尺寸的屏幕，这个对做移动端适配有很大的帮助。

2.按照《构建之法》13.1节描述的 bug 定义, 找出几个功能性的比较严重的 bug。

Bug：软件的缺陷

Bug可以分解为：症状（Symptom）、程序错误（Fault）、根本原因（Root Cause）。

1）症状：即从用户的角度看，软件出了什么问题。例如，输入（3211）时，程序出错退出。

2）程序错误：即从代码的角度看，代码的什么错误导致了软件的问题。例如，代码在输入为某种情况下访问了非法的内存地址——0X0000000C。

3. 根本原因：错误根源，即导致代码错误的根本原因。例如，代码对于id1==id2的情况没有做正确判断，从而引用了未赋初值的变量，出现了以上的情况。

在开发过程中，还是发现了许多bug和不合理的地方。

1. 旧版本中，点击下拉框显示不正确，导致无法测试（新版本修复了这个问题）
2. 有的时候切换手机类型会出现问题，例如从iphone6切换到iphone5的时候，有的时候不缩放，只能重启软件。
3. 一个不合理的地方就是，虽然开发者工具可以模拟屏幕的大小，但是确无法模拟手机的dpr以及内核。在我最近做的一个共享教室的项目中就遇到这个问题，因为之前不太了解ios8内核的兼容性，在微信开发者工具能跑的通，但是等做了一段时间后，发现在ios8的手机上出现不兼容的问题，最后只能重构，做兼容，代码量增大（当然，这也怪我们一开始没有做好架构的设计）
4. 还有一点要吐槽的，前几天学校发神经限制共享网络，（猜测）可能因为微信开发者工具涉及到转发包，所以学校也把微信开发工具当做共享网络了，导致网一直被封，开发一直被中断

3.选择一个朋友（用户）进行采访，并加以记载。

3.1. 介绍采访对象的背景和需求

对象角色：后端开发人员
需求：能在开发者工具中，正确的看到后台传过来的数据，方便测试。

3.2. 让采访对象使用该产品的功能

让开发员下载微信开发者工具，登录进去后，在地址栏写上控制器的名称，返回数据，能看到http请求的头部信息，以及请求的时长。

3.3. 描述用户使用这个产品的过程，用户的问题解决了么？软件在数据量/界面/功能/准确度上各有什么优缺点？用户体验方面有问题么？

• 使用过程：开发员下载软件并登陆，在地址栏写上控制器的名称，发现500的服务端错误，开发员查看报错，以及查看http请求头有没有正确发送数据，修改代码提交后，再次访问控制器，正确返回了数据，软件甚至将json字符串转化成了json数组方便查看。
  

• 优缺点：优点就是能正确的报错，并可以很容易的分析是什么问题造成的错误。缺点暂时没有发现。

• 用户体验：用户体验还是十分不错的，能准确报错，并且能看到数据传输的过程，对于代码调试有非常大的帮助。

3.4. 用户对产品有什么改进意见？

界面改进，希望更加流畅一点，以及上面提到的不合理地方希望有所改进。

3.5. 结论

这个软件对于微信开发者来讲真的是救星（因为基于微信开发不能再其他地方调试），但还是不够成熟完善，虽然很大程度的还原了chrome的调试工具，但是还是没有chrome的调试工具更加成熟，chrome的调试工具可以加各种插件，比如vue tools等，能更加方便的调试代码，以及我上面提到的bug与不合理方面，总的来说，这个软件只做到了基本的功能，还需要更加完善，评价我会给：好，不错。

二、分析

1.尽可能地使用软件的所有功能

开发者一般用到的是console，element，source以及network栏，输入地址加载一个页面，能够很清晰的在element看到页面的html结构，以及样式等等，还可以在console看到控制台输出的错误信息，source中有这个页面加载的所有文件，css、js云云，network可以看到http请求的具体情况。

2.分析这个软件目前的优劣 (和类似软件相比)， 推理出这个软件团队在软件工程方面可以提高的重要方面 (具体建议)。要求把对比的结果列出一个表格，对比每个软件各自的优点和缺点。

微信者开发工具其实没有竞争对手，因为基于微信端的开发不能在其他软件或者浏览器上调试，类似的软件就是chrome和firefox。
| 厂商 | 界面 | 基本功能 | 扩展功能 |
| - | :-: | -: |
| chrome | 8| 9 | 9 |
| Firefox | 7.5 | 8.8 | 8 |
| 微信开发者工具 | 7.5 | 9 | 0 |

由此看来，虽然微信开发者工具实现了基本的调试功能，但还是有许多需要完善的大方。

三、建议和规划

1.如果你是项目经理，如何提高从而在竞争中胜出？

首先要能模拟手机的dpr以及内核，做到这点，基本就能占下比较大的市场了，因为现在貌似还没有能够做到模拟这些的软件，其次，提供插件功能，可以学习chrome的做法，引入插件功能，并提供一个插件的开源社区，大家可以自己做插件，以及使用别人做好的插件，方便使用。

2.目前市场上有什么样的产品了？

按照市场份额来看，主流的web调试工具就是chrome以及Firefox，chrome的扩展性以及兼容性十分强。

3.你要设计什么样的功能？

同第一个问题所述。

4.为何要做这个功能，而不是其他功能？

因为这个是开发者迫切需要解决的需求，能极大的提高开发人员的效率。

5.为什么用户会用你的产品/功能？

因为微信不让在别的平台调试······

6.你的创新在哪里? 请使用 NABCD 分析

• N (Need 需求)：开发者（重点是前端开发人员）需要做手机移动端的兼容。
• A (Approach 做法)：模拟移动端屏幕大小，dpr以及手机内核
• B (Benefit 好处)：可以更好的做兼容，减少工作量
• C (Competitors 竞争)：我相信各大浏览器厂商也会去做这方面的创新

7.如果你来领导这个团队，会有什么不一样？

我会更注重用户的体验感，提高获取信息的简易性

8.如果你的团队有5个人, 4个月的时间，你作为项目经理，应该如何配置角色（开发，测试，美工等等）？

• 美工1个：先把原型图转化成ui图
• 开发4个：模块化开发，开发完一个模块先测试，再上线