H5 page, commonly used browser access compatibility test

Compatibility test
Compatibility test includes:
  (1) Browser compatibility test: test whether the program can run normally on different browsers and whether the function can be used normally;
  (2) Screen size and resolution compatibility test: test program in different resolutions under properly displaying;
  (3) operating system compatibility test: the test program can normally run on different operating systems the following functions are working correctly, the display is correct and so on;
  (4) different device models compatible test: for in APP , Now there are a variety of mobile device models, mainly to test whether the APP can run normally on mainstream devices and whether it will crash.
Testing method:
one is manual testing, that is, full manual testing compatibility; the other is to use third-party compatibility testing tools;
how to conduct compatibility testing
  Web compatibility testing
  first conduct manual testing, test engineers test mainstream browsers and common operating systems Test the main process and the main interface to see if there is any problem with the main process and the main interface. If there is a problem, record the bug, as well as the browser model and version, and the operating system, accurately locate the cause of the bug, submit the bug, and inform Developer modification. All mainstream devices need to be tested, focusing only on the main process and main interface. After all, there are not many main processes and main interfaces in each system, so this workload is still affordable.
  Secondly, with the help of third-party testing tools, the third-party web testing tools that I think are easier to use at present are IEtester (offline), SuperPreview (offline) and Browsershots: browsershots.org (online), one can test the compatibility of IE, and the other can Test the compatibility of major browsers, including Google, Firefox, Opera, etc. With the help of third-party testing tools, find the location of the bug, analyze the test results, and inform the programmer to adjust.

Install BrowserSync globally

npm install -g browser-sync

Insert picture description here
The running command does not
Insert picture description here
work. Solution: Use the browser synchronization test tool browersync in the Vue project

Partially install browser-sync

 npm install -g browser-sync (项目中局部安装  npm install --save-dev browser-sync)

Then in your package.json, you will see the new dependency, and then configure your

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

Next, in the project directory under cmd, enter npm run dev
Insert picture description here
browser
Insert picture description here
Insert picture description here

Okay, what's wrong

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)

translation:

Refuse to execute the inline script because it violates the following content security policy directive: "default-src'self'". To enable inline execution, a hash ('sha256ThhI8UaSFEbbl6cISiZpnJ4Z44uNSq2tPKgyRTD3LyU=') or a nonce> ('nonce-...') is required. Also note that'script-src' is not explicitly set, so'default-src' is used as a fallback.


Reference documents:
H5 page mobile terminal compatibility test
mobile terminal test method
how to test web page loading speed, WebPagetest use skills,
web mobile terminal common interview questions and adaptation compatibility issues.
Vue project uses LAN multi-terminal access and real-time automatic update (using browser-sync)

Guess you like

Origin blog.csdn.net/fengtingYan/article/details/105657828