Chrome dev tools

Open a web socket proxy when debugging is started with chrome option

Author: KristinaKoeva

lib/declarations.ts

@@ -103,6 +103,7 @@ interface IOptions extends ICommonOptions {
 	rebuild: boolean;
 	syncAllFiles: boolean;
 	liveEdit: boolean;
+	chrome: boolean;
 }
 
 interface IInitService {
@@ -233,7 +234,8 @@ interface IAndroidToolsInfoData {
 }
 
 interface ISocketProxyFactory {
-	createSocketProxy(factory: () => any): IFuture<any>;
+	createTCPSocketProxy(factory: () => any): any;
+	createWebSocketProxy(factory: () => any): any;
 }
 
 interface IiOSNotification {

lib/device-sockets/ios/socket-proxy-factory.ts

@@ -1,6 +1,5 @@
 import { PacketStream } from "./packet-stream";
 import * as net from "net";
-import * as semver from "semver";
 import * as ws from "ws";
 import temp = require("temp");
 import * as helpers from "../../common/helpers";
@@ -12,25 +11,65 @@ export class SocketProxyFactory implements ISocketProxyFactory {
 		private $projectDataService: IProjectDataService,
 		private $options: IOptions) { }
 
-	public createSocketProxy(factory: () => net.Socket): IFuture<any> {
-		return (() => {
-			let socketFactory = (callback: (_socket: net.Socket) => void) => helpers.connectEventually(factory, callback);
+	public createTCPSocketProxy(factory: () => net.Socket): any {
+		let socketFactory = (callback: (_socket: net.Socket) => void) => helpers.connectEventually(factory, callback);
 
-			this.$projectDataService.initialize(this.$projectData.projectDir);
-			let frameworkVersion = this.$projectDataService.getValue("tns-ios").wait().version;
-			let result: any;
+		this.$logger.info("\nSetting up proxy...\nPress Ctrl + C to terminate, or disconnect.\n");
 
-			if(semver.gte(frameworkVersion, "1.4.0")) {
-				result = this.createTcpSocketProxy(socketFactory);
-			} else {
-				result = this.createWebSocketProxy(socketFactory);
-			}
+		let server = net.createServer({
+			allowHalfOpen: true
+		});
+
+		server.on("connection", (frontendSocket: net.Socket) => {
+			this.$logger.info("Frontend client connected.");
+
+			frontendSocket.on("end", () => {
+				this.$logger.info('Frontend socket closed!');
+				if (!(this.$config.debugLivesync && this.$options.watch)) {
+					process.exit(0);
+				}
+			});
 
-			return result;
-		}).future<any>()();
+			socketFactory((backendSocket: net.Socket) => {
+				this.$logger.info("Backend socket created.");
+
+				backendSocket.on("end", () => {
+					this.$logger.info("Backend socket closed!");
+					if (!(this.$config.debugLivesync && this.$options.watch)) {
+						process.exit(0);
+					}
+				});
+
+				frontendSocket.on("close", () => {
+					console.log("frontend socket closed");
+					if (!(<any>backendSocket).destroyed) {
+						backendSocket.destroy();
+					}
+				});
+				backendSocket.on("close", () => {
+					console.log("backend socket closed");
+					if (!(<any>frontendSocket).destroyed) {
+						frontendSocket.destroy();
+					}
+				});
+
+				backendSocket.pipe(frontendSocket);
+				frontendSocket.pipe(backendSocket);
+				frontendSocket.resume();
+			});
+		});
+
+		let socketFileLocation = temp.path({ suffix: ".sock" });
+		server.listen(socketFileLocation);
+		if(!this.$options.client) {
+			this.$logger.info("socket-file-location: " + socketFileLocation);
+		}
+
+		return server;
 	}
 
-	private createWebSocketProxy(socketFactory: (handler: (socket: net.Socket) => void) => void): ws.Server {
+	public createWebSocketProxy(factory: () => net.Socket): ws.Server {
+		let socketFactory = (callback: (_socket: net.Socket) => void) => helpers.connectEventually(factory, callback);
 		// NOTE: We will try to provide command line options to select ports, at least on the localhost.
 		let localPort = 8080;
 
@@ -86,58 +125,5 @@ export class SocketProxyFactory implements ISocketProxyFactory {
 		this.$logger.info("Opened localhost " + localPort);
 		return server;
 	}
-
-	private createTcpSocketProxy(socketFactory: (handler: (socket: net.Socket) => void) => void): net.Server {
-		this.$logger.info("\nSetting up proxy...\nPress Ctrl + C to terminate, or disconnect.\n");
-
-		let server = net.createServer({
-			allowHalfOpen: true
-		});
-
-		server.on("connection", (frontendSocket: net.Socket) => {
-			this.$logger.info("Frontend client connected.");
-
-			frontendSocket.on("end", () => {
-				this.$logger.info('Frontend socket closed!');
-				if (!(this.$config.debugLivesync && this.$options.watch)) {
-					process.exit(0);
-				}
-			});
-
-			socketFactory((backendSocket: net.Socket) => {
-				this.$logger.info("Backend socket created.");
-
-				backendSocket.on("end", () => {
-					this.$logger.info("Backend socket closed!");
-					if (!(this.$config.debugLivesync && this.$options.watch)) {
-						process.exit(0);
-					}
-				});
-
-				frontendSocket.on("close", () => {
-					if (!(<any>backendSocket).destroyed) {
-						backendSocket.destroy();
-					}
-				});
-				backendSocket.on("close", () => {
-					if (!(<any>frontendSocket).destroyed) {
-						frontendSocket.destroy();
-					}
-				});
-
-				backendSocket.pipe(frontendSocket);
-				frontendSocket.pipe(backendSocket);
-				frontendSocket.resume();
-			});
-		});
-
-		let socketFileLocation = temp.path({ suffix: ".sock" });
-		server.listen(socketFileLocation);
-		if(!this.$options.client) {
-			this.$logger.info("socket-file-location: " + socketFileLocation);
-		}
-
-		return server;
-	}
 }
 $injector.register("socketProxyFactory", SocketProxyFactory);

lib/options.ts

@@ -41,7 +41,8 @@ export class Options extends commonOptionsLibPath.OptionsBase {
 			teamId: { type: OptionType.String },
 			rebuild: { type: OptionType.Boolean, default: true },
 			syncAllFiles: { type: OptionType.Boolean },
-			liveEdit: { type: OptionType.Boolean }
+			liveEdit: { type: OptionType.Boolean },
+			chrome: { type: OptionType.Boolean }
 		},
 			path.join($hostInfo.isWindows ? process.env.AppData : path.join(osenv.home(), ".local/share"), ".nativescript-cli"),
 			$errors, $staticConfig);

lib/services/ios-debug-service.ts

@@ -14,7 +14,7 @@ class IOSDebugService implements IDebugService {
 	private _lldbProcess: ChildProcess;
 	private _sockets: net.Socket[] = [];
 	private _childProcess: ChildProcess;
-	private _socketProxy: net.Server;
+	private _socketProxy: any;
 
 	constructor(
 		private $config: IConfiguration,
@@ -30,7 +30,6 @@ class IOSDebugService implements IDebugService {
 		private $injector: IInjector,
 		private $npmInstallationManager: INpmInstallationManager,
 		private $options: IOptions,
-		private $projectDataService: IProjectDataService,
 		private $utils: IUtils,
 		private $iOSNotification: IiOSNotification,
 		private $iOSSocketRequestExecutor: IiOSSocketRequestExecutor,
@@ -190,17 +189,24 @@ class IOSDebugService implements IDebugService {
 
 	private wireDebuggerClient(device?: Mobile.IiOSDevice): IFuture<void> {
 		return (() => {
-			this._socketProxy = this.$socketProxyFactory.createSocketProxy(() => {
+			let factory = () => {
 				let socket = device ? device.connectToPort(inspectorBackendPort) : net.connect(inspectorBackendPort);
 				this._sockets.push(socket);
 				return socket;
-			}).wait();
+			};
+
+			if (this.$options.chrome) {
+				this._socketProxy = this.$socketProxyFactory.createWebSocketProxy(factory);
 
-			this.openDebuggerClient(<any>this._socketProxy.address()).wait();
+				this.$logger.info(`To start debugging, open the following URL in Chrome:\nchrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=localhost:${this._socketProxy.options.port}\n`);
+			} else {
+				this._socketProxy = this.$socketProxyFactory.createTCPSocketProxy(factory);
+				this.openAppInspector(this._socketProxy.address()).wait();
+			}
 		}).future<void>()();
 	}
 
-	private openDebuggerClient(fileDescriptor: string): IFuture<void> {
+	private openAppInspector(fileDescriptor: string): IFuture<void> {
 		if (this.$options.client) {
 			return (() => {
 				let inspectorPath = this.$npmInstallationManager.install(inspectorNpmPackageName).wait();