BT

Visual Studio Code Now Supports Debugging of iOS Web Apps

| by Sergio De Simone Follow 14 Followers on Aug 31, 2016. Estimated reading time: 1 minute |

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,

Rate this Article

Adoption Stage
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread
Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Discuss

Login to InfoQ to interact with what matters most to you.


Recover your password...

Follow

Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.

Like

More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.

Notifications

Stay up-to-date

Set up your notifications and don't miss out on content that matters to you

BT