测试能力培养之前端调试能力
在现在这个H5流行的时代，作为测试人员不能仅仅依赖UI的反馈来确定问题，掌握前端调试的方法是分层测试技术中的最前端。理解、分析、定位前端工作原理，可以有效的提高测试效率并且准确提交缺陷报告。
本周在合作伙伴咕泡学院的《企业级软件测试课程》中，带着学生快速梳理了一遍前端调试所需要的知识，其中发现了很多对于在职人员在学习中的问题。
学习内容：
HTML基本开发
CSS基本原理
JavaScript基本开发
PHP后台技术简介
Html篇
对于学员来说，一般都有HTML的基础，在初期写一些简单标签的时候并没有什么问题，但是往往都还存在眼高手低的情况，就是看都会，写貌似没效率，会写错。这些情况在后面的内容中会逐渐的体现，导致了后续学习的一些语法和基本错误。
例如：
基本的表单概念，可能看都明白Action、Method、Name、ID几个属性是干什么的，但是细化到比如隐藏表单，或者表单数据对应的时候就会有些概念上的模糊了，主要的原因还是写的少。进一步对于HTML的Xpath定位也一般都没有概念，这也是学习Selenium困难的原因之一。
总结：
HTML确实不难，但是对主要标签的概念、Xpath定位的编写、表单提交数据的对应性，基础HTML导致请求的集中情况，要真的想明白，还是需要花点心思的。
CSS篇
对于CSS来说，可能很多测试人员就比较陌生了，陌生之处在于看不懂CSS选择器。CSS选择器有两大类，一个是标签，一个是Class属性，在理解其选择器的原理之后，就是定位体系了，从传统的表格基础定位到布局的理解是需要一点时间的。
总结：
CSS由于是陌生知识，会缺乏例如兼容性以及布局查看的基本概念，虽然从测试角度可能影响不大，但是涉及到后面的对象创建及布局效果，这里还是有很多值得琢磨的地方。
JavaScript篇
由于是提升班，所以还好没有出现不会写分支循环的缺乏基础情况，JavaScript是一个非常重要的前端业务实现语言，加之主流的框架，让现在的系统可以做很多事情。
如何理解Document对象体系，如何定位对象，修改对象，在前端实现业务逻辑，以及与服务器交互，在逐步加深的过程中，学员就明显感到了吃力。主要原因还是以前并没有认真思考过这里的工作情况，或者没有机会深度去对JS脚本进行断点、跟踪、调试分析过程。
总结：
JS是一个语言，在浏览器端包括Node.js的产生在后端，都完成了举足轻重的效果，通过事件的驱动，Jquery之类框架的全新选择器，我们的页面产生了非常多的业务，常见的前端加密，Token令牌等机制都依赖于JS，而这些动态验证及安全策略，在传统测试中都没有进行有效覆盖。
对于学员来说突然要写一门语言，去理解同步异步机制，扩展断点及网络请求跟踪，都是不小的负担。
PHP后端
由于课程时间及安排，后端主要是讲Java（Sevlet或者微服务）体系的，为了给学员演示异步信息查询，所以简单提了一下PHP。如果有相关类C的开发基础，PHP还是一个可以10分钟就上手的后台语言，通过抓包去理解前端和后端的数据结构，交互体系，还是很有用的。
在这两天的课程中，主要围绕着写代码（Sublime）、抓包（Chrome F12）、元素定位分析（Chrome F12）、JavaScript调试跟踪（Chrome F12）进行的。对于大多数测试很少深度玩Chrome开发工具的，突然会发现有那么多有趣的事情，如何动态在页面上通过console调用JS函数，如何打断点跟踪JS变量，如何抓取网络请求，理解布局，分析元素加载的机制及可能涉及的功能、性能、安全问题，一下涉猎的面会很广，也正是因为这些，测试才有自己的内涵和定位。
也希望学员们通过这两天的课对前端深入产生浓厚的兴趣，在以后的测试中拿出自己修炼的绝招。
咕泡学院该课程地址：
https://ke.qq.com/course/252278
咕泡学院免费公开课地址：
https://ke.qq.com/course/249690