A new extension for Visual Studio Code aims to allow developers to debug JavaScript web apps and sites running on iOS devices directly from their editor both on Mac and Windows, writes Microsoft program manager for JavaScript Diagnostics Kenneth Auchenberg.
Debugging iOS web apps used to require access to a Mac to run Safari Web Inspector, Auchenberg explains, or to use a specific cross-browser compatibility checkers such as BrowserStack. The new Visual Studio Code “Debugger for iOS Web” extension leverages vscode-chrome-debug-core, an open-source library that Microsoft developed to power their Visual Studio Code Chrome debugger, and uses two additional libraries to enable communication with an iOS device over USB, ios-webkit-debug-proxy and ios-webkit-debug-proxy-win32. Communication with iOS devices complies with the WebKit Remote Debugging Protocol, which is compatible with the Chrome Debugger Protocol for the script debugging API, which means that Microsoft debugger for Chrome can work almost unmodified.
The Visual Studio Code extension can either launch a URL in Safari on the device, or it can attach to a tab inside of Safari, depending on the configuration specified in the .vscode/launch.json file in your project root. To make it easier for the device to access the local development server, usually an HTTP server running on localhost, Microsoft decided to use localtunnel to emulate port forwarding, which is not natively supported by Apple. Localtunnel can proxy all requests to a local web server through a unique, publicly accessible URL, so you can share a local web service running on your development machine without modifying your DNS and firewall settings.
This is a list of features that Debugger for iOS Web supports:
- Setting breakpoints
- Stepping through code execution
- Stack traces
- Debugging eval scripts, script tags, and scripts that are added dynamically
- Watches
- Console
Visual Studio Code Debugger for iOS Web extension is available on the Visual Studio Code Marketplace,