iOS Web Debugging on Windows and Mac
August 24, 2016 by Kenneth Auchenberg
Our new iOS Web Debugger works quite similar to our Chrome debugger which we introduced back in February. Under the hood, it’s the same debugger running inside VS Code, which is powered by our open source vscode-chrome-debug-core library. To make the connection from our debugging library to the iOS device, we are leveraging two open source projects, ios-webkit-debug-proxy and ios-webkit-debug-proxy-win32, that enables communication with the iOS devices over USB through the WebKit Remote Debugging Protocol. The protocol is compatible with the Chrome Debugging Protocol for the script debugging APIs, and this means our debugger works without additional mapping logic.
Enabling easy local development through emulated port forwarding
When developing websites running locally, it’s a cumbersome process to enable mobile devices access your local development server, which usually is a HTTP server running on localhost. To make this easier, platforms like Android supports port-forwarding natively, but iOS doesn’t support this.
So we found a way to emulate port forwarding by adding the option to start an instance of localtunnel, that behind the scenes creates HTTP tunnel from your local computer to the public internet for the specified
tunnelPort property. This HTTP tunnel is then used by the iOS device to get access to your local development server, just as any other public website.
To get started, you simply open the Command Palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)) inside VS Code and type "ext install" to run the Extensions: Install Extension command. When the extension list appears, type "ios" to filter the list and install the Debugger for iOS Web extension. You'll then create a launch-configuration file which we explain in detail in our README right here.
In this release, we support the following features:
- Setting breakpoints, including in source files when source maps are enabled
- Stack traces
- The Locals pane
- Debugging eval scripts, script tags, and scripts that are added dynamically
- Virtual port forwarding via HTTP tunnel from local computer.
Experimenting out in the open
Our new iOS Web Debugger is a public experiment and this means we are releasing it to the public to find out if integrated script debugging for iOS are valuable for developers, so please let us know what you think.