Said in front

I am a small front-end, currently in charge of an APP embedded H5 project in the company. Do the project must be tested, so when testing the Web page, I generally use the android real machine with Google browser to test together, because it is relatively simple, only need a data line and an Android phone. But today we’re not talking about Android, we’re talking about how ios does Web testing with Chrome.

To solve this ios testing problem, I looked for a lot of materials, but to put it mildly, “none of them can be typed.” But it paid off. After a few days of “bumbling”, I finally succeeded. Next I will share it with you!

First, preparation

  1. PC Chrome
  2. IOS Safari
  3. Win system (Win7, Win10)
  4. iTunes
  5. remotedebug-ios-webkit-adapter
  6. One USB cable

2. Install dependenciesios-webkit-debug-proxy 

1. Use Win + R, then type PowerShell and prepare to install Scoop 2. Enter the following statement:

1. Set executionPolicy remotesign-scope currentUser The choice is 2. Iex (new-object net.webClient). Downloadstring ('https://get.scoop.sh') # Install scoopCopy the code

Installation completed:

If you follow the picture, you can use Scoop Install to install the resources you need, and the downloaded resources will be in a location like C:\Users\admin\scoop\apps

Scoop or scoop help can be viewed3. Download failure, generally the above situation, we can directly use. However, some partners may fail to install, as shown below:

Don’t panic in this situation, we will solve the problem! Usually when you reinstall it, it will show that it already exists, but it can’t be used. So we need to find it, kill it and then reinstall it. That said, where is he? Yes, the downloaded resource will find scoop in a location like C:\Users\admin\scoop\apps and change it. Then open PowerShell again and reinstall scoop, but this time the input statement needs to be changed to change the second statement:

1. Set executionPolicy remotesign-scope currentUser The choice is 2. Iex (new-object) Net. Webclient). Downloadstring (' https://raw.githubusercontent.com/lukesampson/scoop/master/bin/install.ps1 ') # installation run outCopy the code

That’s ojbk, then type scoop or Scoop help to see usage and instructions, and you’ve installed!

Set up the iPhone Safart browser

Settings > Safart Browser > Advanced > Open the Web Inspector

The diagram below:

Let your computer trust your iOS device.

Launching iTunes will prompt the "Trust this computer" dialog box, select Trust.Copy the code

5. Start the projectremotedebug-ios-webkit-adapter

Before we start, let’s write a configuration file. Create a launch.json file with the following configuration

{" version ":" 0.2.0, "" configurations: [{" name" : "iOS Web", "type" : "chrome", "request" : "attach", "port" : 9000, "url": "http://localhost:8080/*", "webRoot": "${workspaceRoot}/src" } ] }Copy the code

Then enter the command line in the project directory to install the dependencies

       npm install
Copy the code

With the dependencies installed, we can start the project

      npm start
Copy the code

The project starts and then we go to Chrome ://inspect/# Devices and we’ll see it

Then click the arrow to guide that, add your port number, default 9000, you can change your own preferences

And then you’re done#### how, is not very simple, interested partners quickly to try it, remember to like oh! ❥ (^ _ -)