如何区别原生页面和H5页面

前言

软件采用混合开发的模式时，测试发现了bug找开发沟通有时会找错人，明明是H5模块的错误却找了负责原生模块的开发，显得很不专业~那在测试时该如何区分是原生的报错还是H5报错呢？

原生开发

原生开发（Native App开发），是为特定操作系统（如 iOS 使用 Objective - C/Swift、安卓使用 Java/Kotlin）专门开发的移动应用。它直接使用操作系统提供的SDK（软件开发工具包），能够深入访问设备的硬件功能和操作系统的 API（应用程序接口）。

特点

• 性能优越：原生应用通常具有更高的性能，响应速度更快，因为它们直接与设备的操作系统和硬件层进行交互。
• 功能完整性：可以充分利用设备的各种硬件特性。像智能手机的摄像头、GPS、蓝牙、指纹识别等功能，原生应用能够直接调用这些硬件来提供丰富的服务。比如，银行应用可以使用指纹识别或面部识别功能让用户快速登录，地图应用能够精准地获取用户的位置信息并提供导航服务。
• 用户体验佳：原生应用遵循操作系统的设计规范和用户交互习惯，界面风格和操作方式与系统原生应用一致。
• 开发和维护成本高：每个操作系统（iOS/Android/HarmonyOS NEXT）有不同的开发语言、工具和框架。开发团队需要分别为每个平台编写代码，从而增加了工作量和时间成本。随着操作系统版本的更新，原生应用需要定期进行维护和更新，以确保兼容性和安全性。这涉及持续的开发和测试工作

H5开发

H5 应用是基于 HTML5、CSS和 JavaScript 等 Web 技术开发的移动应用。它本质上是一个网页应用，可以通过移动设备的浏览器访问，也可以被封装成一个类似原生应用的形式（通过一些工具如 Cordova、PhoneGap 等），在设备上安装和运行。

特点

• 跨平台性强：主要基于 Web 技术，只要设备的浏览器支持 HTML5，就可以运行 H5 应用，无需针对不同操作系统进行重新开发。
• 开发成本低、周期短：代码可以在不同平台复用。比如，对于一个小型企业的产品展示应用，利用 HTML5 开发可以快速完成，而且可以同时在不同操作系统的设备上展示产品信息。
• 更新方便：因为是基于网页的应用，更新时只需要更新服务器上的代码，用户下次访问应用时就可以看到更新后的内容，无需像原生应用那样等待应用商店的审核和用户手动下载更新。
• 性能相对较弱：依赖浏览器解析，无法直接访问硬件，多次网络请求，资源缓存策略复杂等
• 用户体验依赖浏览器：受到浏览器性能和功能的限制

混合开发

原生主导的开发模式：需要安卓和IOS原生开发人员，整个App既有原生开发的页面，也有H5页面，在需要H5页面时由原生开发工程师实现内嵌。
H5主导的开发模式：只需要H5开发工程师，借助一些封装好的工具实现应用的打包与调用原生设备的功能，如HBuilder的云端打包功能

怎么区别是原生还是H5

• 看加载方式：如果在打开新页面导航栏下面有一条加载的线的话，这个页面就是H5页面，如果没有就是原生的。
  
• 看断网情况：把手机的网络断掉。然后点开页面。然后可以正常显示的东西就是原生写的。 显示404或者错误页面的是html页面。原生部分页面是可以正常打开的，打不开的原生和H5的报错也是有区别的。
• 下拉页面的时候显示网址提供方的一定是H5
• H5页面在测试环境里，开发一般会加一个vConsole
  
• 抓包，看他有没有返回URL地址

总结

其他判断的方法也有比如打开开发者模式显示布局边界等，不过网上也有人说html写死到app包里是判断不了的。我想在实际应用中可以适当花时间进行一下判断，如果通过简单的方法还是判断不出来就直接问开发得了。

年末了，很多项目都不让发版了，少了实战让我积累经验，下一个项目是大屏测试也是我第一次测试大屏，到时候测试踩过的坑整理出来和大家分享~