preface

In general, if front-end engineers want to debug the performance of Safari on iOS devices, they need to enable the Web inspector for Safari in the iOS system Settings and use the Safari developer tool on macOS to debug. However, accustomed to the powerful Chrome DevTools, we still have a lot of trouble using Safari’s developer tools. So Google uses Apple’s Remote Web Inspector service to create protocols and tools that convert Chrome DevTools operations into Apple remote Web Inspector service calls: IOS WebKit Debug Proxy (also known as IWDP) Let’s take a quick look at how to use this tool to debug iOS Safari with Chrome DevTools.

Environment depends on

  • MacOS /Linux
  • Xcode
  • Chrome
  • ios-webkit-debug-proxy
$ brew update
$ brew install libimobiledevice
$ brew install ios-webkit-debug-proxy
Copy the code

How to Start

Iwdp supports iOS emulators as well as real devices, but to use an emulator, you must start the emulator before starting the agent (IWDP).

Start the iOS emulator, or use a physical device (iPhone/iPad) :
# Xcode changes these paths frequently, so doublecheck them $ SDK_DIR="/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs" $ SIM_APP="/Applications/Xcode.app/Contents/Developer/Applications/Simulator.app/Contents/MacOS/Simulator" $ $SIM_APP - SimulateApplication $SDK_DIR/iPhoneSimulator8.4. SDK/Applications/MobileSafari app/MobileSafariCopy the code
Modify iOS Safari Settings and open a Safari browser TAB:
Settings > Safari > Advanced > Web Inspector = ON Settings > Safari > Advanced > Web Inspector = EnabledCopy the code
Open the agent

-f allows you to select a DevTools UI. This UI can be arbitrary. Here we use Chrome’s developer tools:

$ ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html Listing devices on :9221 Connected :9222 To SIMULATOR (SIMULATOR) Connected :9223 to Daft PunkCopy the code

Open thehttp://localhost:9221/That is as follows:

Enter the SIMULATOR page:

Note: Because Chrome does not allow openingchrome-devtools://Protocol link, so need we copy the link in the address bar to manually open:

Error handling

Question 1:

$ ios_webkit_debug_proxy
Listing devices on :9221  
Could not connect to lockdownd. Exiting.: Permission deniedConnected :9222 to SIMULATOR (SIMULATOR)  
Invalid message _rpc_reportConnectedDriverList: <dict>  
    <key>WIRDriverDictionaryKey</key>
    <dict>
    </dict>
</dict>  
Copy the code

Solution:

sudo chmod +x /var/db/lockdown  
Copy the code

Question 2:

$ ios_webkit_debug_proxy
Listing devices on :9221  
Connected :9222 to SIMULATOR (SIMULATOR)  
Invalid message _rpc_reportConnectedDriverList: <dict>  
    <key>WIRDriverDictionaryKey</key>
    <dict>
    </dict>
</dict>  
Disconnected :9222 from SIMULATOR (SIMULATOR)  
send failed: Socket is not connected  
Copy the code

Solution, reinstall dependency tools:

$ brew uninstall --force ignore-dependencies -libimobiledevice ios-webkit-debug-proxy
$ brew install libimobiledevice ios-webkit-debug-proxy
Copy the code

Question 3:

$ ios_webkit_debug_proxy
Listing devices on :9221  
Connected :9222 to SIMULATOR (SIMULATOR)  
send failed: Socket is not connected  
recv failed: Operation timed out  
Copy the code

Solution, specify UI interface:

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

Question 4:

The following error may occur when you connect to an iOS 10 device:

$ ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html Listing devices on :9221 Could not connect  to lockdownd. Exiting.: Broken pipe Unable to attach <id> inspectorCopy the code

Update the latest LibiMobileDevice:

$ brew upgrade libimobiledevice --HEAD
Copy the code

reference

  • google/ios-webkit-debug-proxy
  • Could not connect to lockdownd. Exiting Permission denied #160
  • send failed: Socket is not connected #19
  • could not connect to lockdownd. Exiting.: Permission denied #168