Debug the IOS web page

Prerequisite: System environment

PC operating system: Windows 10 Professional 64-bit iPad operating system: iOS 10.3.2

Step 1: Enable debug mode in iOS

Settings -> Safari -> Advanced -> Enable the Web Inspector

Step 2: Install scoop

1. Use Powershell for installation

Note: installation process is very slow, need to climb ladder installation!!

iex (new-object net.webclient).downloadstring('https://get.scoop.sh')
Copy the code

2. If it fails (See Figure 1)

Figure 1:

Run the following commands to reinstall the software

Set-ExecutionPolicy RemoteSigned -scope CurrentUser  // Modify the execution policy
iex (new-object net.webclient).downloadstring('https://get.scoop.sh')
Copy the code

3. If the installation fails again, run the following commands to reinstall the installation

Set-ExecutionPolicy RemoteSigned -scope CurrentUser // The preceding 2 has been executed, do not need to execute again
iex (new-object net.webclient).downloadstring('https://raw.githubusercontent.com/lukesampson/scoop/master/bin/install.ps1')
Copy the code

After installation, perform the following operations:

scoop update
Copy the code

If the following conditions occur:

instructionsInstallation failed(Failure reason is: possible network speed problem, Scoop is not installed successfully, this command can not be executed), need to uninstall reinstall!

Reinstall steps (still using Powershell to execute commands) :

    1. Run the following commands in sequence:
scoop uninstall scoop
Set-ExecutionPolicy RemoteSigned -scope CurrentUser
iwr -useb get.scoop.sh | iex
Copy the code

If the first sentence above is not successful (pro test is not successful!!) , try another scheme (assuming your Scoop is installed in the default location) :

cd
del .\scoop -Force
Copy the code

    1. To reinstall, run the following command:
iex (new-object net.webclient).downloadstring('https://raw.githubusercontent.com/lukesampson/scoop/master/bin/install.ps1')
Copy the code

Step 3: Install ios-Webkit-Debug-proxy through Scoop

Run the following commands in sequence:

scoop bucket add extras
scoop install ios-webkit-debug-proxy
Copy the code

1. Run the Scoop bucket add extras command. The following information occurs:

The reasons may be:

  • The network is slow;
  • Scoop is not the latest edition;
  • Scoop is not installed;

2. If the execution

scoop help
Copy the code

Scoop installation successful!!

3. View the version status of Scoop

scoop status
Copy the code

If prompted as shown, scoop needs to be updated

4. Scoop Update execution appears the following situation, is a network problem!!

It can only be executed again

scoop updata
Copy the code

5. Run scoop Status to check whether the update succeeds

Scoop update installed successfully at this moment!

6. Because it was executed last timescoop bucket add extras

Extras need to be removed

scoop bucket rm extras
Copy the code

7. Run the command again

scoop bucket add extras
scoop install ios-webkit-debug-proxy
Copy the code

Installation successful now!

8. If the network is really slow, you can try the following solutions (it is recommended to use powershell command to execute, so that the decompression and placement may cause unpredictable problems)

If the timeout https://github.com/lukesampson/scoop-extras/ after decompression can be downloaded in a run/bucket/extras/directory

Step 4: Enable ios-webkit-debug-proxy

In Powershell, -f specifies the front-end tool. In this case, chrome-devTools is used for debugging

ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html
Copy the code

After successful execution, the Powershell window is displayed

Note: Enabling iOS_webKIT_DEBUg_proxy will affect Internet access!

Step 5: Link devices and debug web pages

A:

1. Enter a value in chromelocalhost:9221After entering the web page, the name of your device appears (as shown in the picture), indicating that the connection is successful

2. Click on thelocalhost:9222, you will find that the inside is blank, indicating that you have not opened the H5 page, usesafariOpen an H5 page,Refresh the chrome, you’ll find a few more pieces of data

3. Refresh Chrome on your computer and click on the hyperlinks that appear. Clicking on one of them (e.g. 4.) will open a new TABchrome-devtools://devtools/bundled/inspector.html? ws=localhost:9222/devtools/page/4Or right click to copy the link address and open it in a new TAB:

Open new TAB page blank!!

Method 2:

Open Chrome and type in the url:chrome://inspect/#devicesClick as shown belowinspect, can debug, but there is a blank.

Solve the debug page blank problem
  • (1) Installationvs-libimobile
npm install -g vs-libimobile
Copy the code

  • (2) Install the latest version of the adapterremotedebug-ios-webkit-adapter
npm install remotedebug-ios-webkit-adapter -g
Copy the code

  • (3) The mobile phone also needs to open the Web inspector, USB connected to the computer

  • Remotedebug_ios_webkit_adapter –port=9000 (default port=9000, you can specify your own port)

remotedebug_ios_webkit_adapter --port=9222  Ios-webkit-debug-proxy will run automatically for you without a separate startup
Copy the code

  • (5) Google Chrome openschrome://inspect/#devices-> Configure -> Configure the port specified in the previous step

  • (6) Connect the device to the PC through USB and enter the following information in the address bar of Chrome:chrome://inspect/#devices

  • (7) When you open a web page on your phone, Chrome will detect the page and clickInspectYou can debug it directly

Remark:

  1. Remote debug-ios-webkit-adapter (remote debug-ios-webkit-adapter); / / Remote debug-ios-webkit-adapter (remote debug-ios-webkit-adapter) There are few other cases where links break.)
  2. The first time you use it, you may need to climb over the wall. If the cache is not cleared later, you can immediately debug without climbing over the wall
  3. Ios debugs after inspect, the debug panel is reflected on the mobile phone, not the PC debug panel
  4. Enabling remoteDebug_iOS_webKIT_Adapter does not affect Internet access
  5. You can only debug web pages, but cannot debug wab pages embedded in the APP