H5页面，常用浏览器访问兼容性测试

兼容性测试
兼容测试包括：
　　（1）浏览器兼容测试：测试程序在不同浏览器上是否可以正常运行，功能能否正常使用；
　　（2）屏幕尺寸和分辨率兼容测试：测试程序在不同分辨率下能否正常显示；
　　（3）操作系统兼容测试：测试程序在不同的操作系统下面能否正常运行，功能能否正常使用，显示是否正确等；
　　（4）不同设备型号兼容测试：针对于APP，现在移动设备型号五花八门，主要测试APP在主流设备上能否正常运行，会不会出现崩溃的现象。
测试方法：
一种是人工测试即全手工测试兼容；另外一种是借助第三方兼容性测试工具；
如何进行兼容性测试
　　Web兼容性测试
　　首先开展人工测试，测试工程师测试主流浏览器和常用操作系统测试主流程和主界面，看看主流程和主界面是否有问题，如果存在问题，那么记录下bug情况，以及浏览器型号和版本，以及操作系统，准确定位bug产生的原因，提交bug，告知开发人员修改。所有的主流设备都需要进行测试，只关注主流程和主界面，毕竟每个系统主流程和主界面不是很多，所以这个工作量还是可以承受的。
　　其次借助第三方测试工具，目前我觉得比较好用的第三方Web测试工具有IEtester（离线）、SuperPreview（离线）和Browsershots：browsershots.org（在线），一款可以测试IE的兼容，一款可以测试主流浏览器的兼容，包括谷歌、火狐、Opera等等。借助第三方测试工具，找到bug产生的位置，分析测试结果，告知程序员调整。

全局安装BrowserSync

npm install -g browser-sync

运行命令不起作用

解决方案：在Vue项目中使用浏览器同步测试工具 browersync

局部安装browser-sync

 npm install -g browser-sync （项目中局部安装  npm install --save-dev browser-sync）

然后在你的package.json中，你会看到新的依赖，然后配置你的

"scripts": {
    "dev": "browser-sync start --server --files \"*.html, css/*.css, js/*.js\"",
    "start": "npm run dev"
  },

接下来，你在cmd下的项目目录中，输入npm run dev

浏览器

好吧，到底哪里出问题了

localhost/:1 Failed to load resource: the server responded with a status of 404 (Not Found)
localhost/:7 Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-ThhI8UaSFEbbl6cISiZpnJ4Z44uNSq2tPKgyRTD3LyU='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

localhost/:1 Failed to load resource: the server responded with a status of 404 (Not Found)

翻译：

拒绝执行内联脚本，因为它违反了以下内容安全策略指令:“default-src ‘self’”。要启用内联执行，需要一个散列(‘sha256ThhI8UaSFEbbl6cISiZpnJ4Z44uNSq2tPKgyRTD3LyU=’)或一个nonce> (‘nonce-…’)。还要注意，'script-src’没有被显式地设置，因此’default-src’被用作回退。

---

参考文档：
H5页面移动端兼容性测试
移动端测试方法
如何测试网页加载速度，WebPagetest使用技巧
web移动端常见面试题以及适配兼容问题
vue 项目使用局域网多端访问并实时自动更新（利用 browser-sync）