Merge pull request #5 from CodeMooseUS/addLaunchOnDebugSessionStart

Add launch on debug session start

Author: andysterland

.gitignore

@@ -6,4 +6,7 @@ npm-debug.log
 lib/
 node_modules/
 /out/
-typings/
+typings/
+/.vs
+/src/.vs/src/v16/.suo
+/src/.vs

package.json

@@ -35,7 +35,8 @@
   "activationEvents": [
     "onCommand:devtools-for-chrome.launch",
     "onCommand:devtools-for-chrome.attach",
-    "onWebviewPanel:devtools-for-chrome"
+    "onWebviewPanel:devtools-for-chrome",
+    "onDebug"
   ],
   "main": "./out/extension",
   "contributes": {
@@ -51,6 +52,36 @@
         "category": "DevTools for Chrome"
       }
     ],
+    "debuggers": [
+      {
+        "type": "devtools-for-chrome",
+        "label": "DevTools for Chrome",
+        "configurationAttributes": {
+          "launch": {
+            "required": [
+              "url"
+            ],
+            "properties": {
+              "url": {
+                "type": "string",
+                "description": "Absolute uri to launch.",
+                "default": "http://localhost:8080"
+              },
+              "request": {
+                "type": "string",
+                "description": "A value representing whether the debugger should launch a new Chrome tab or attach to an exsisting one.",
+                "default": "launch"
+              },
+              "chromePath": {
+                "type": "string",
+                "description": "Absolute path to the Chrome instance to launch.",
+                "default": ""
+              }
+            }
+          }
+        }
+      }
+    ],
     "configuration": {
       "title": "DevTools for Chrome",
       "type": "object",
@@ -98,4 +129,4 @@
     "tslint": "^5.11.0",
     "typescript": "^3.1.1"
   }
-}
+}

src/extension.ts

@@ -2,51 +2,86 @@ import * as path from 'path';
 import * as vscode from 'vscode';
 import WebSocket from 'ws';
 import QuickPickItem = vscode.QuickPickItem;
-import QuickPickOptions = vscode.QuickPickOptions;
 import * as utils from './utils';
 
+let settings: vscode.WorkspaceConfiguration;
+let hostname: string;
+let port: number;
+const debuggerType: string = 'devtools-for-chrome';
+
 export function activate(context: vscode.ExtensionContext) {
-    context.subscriptions.push(vscode.commands.registerCommand('devtools-for-chrome.attach', async () => {
-        runCommand(context, attach);
-    }));
+    settings = vscode.workspace.getConfiguration('vscode-devtools-for-chrome');
+    hostname = settings.get('hostname') as string || 'localhost';
+    port = settings.get('port') as number || 9222;
 
     context.subscriptions.push(vscode.commands.registerCommand('devtools-for-chrome.launch', async () => {
-        runCommand(context, launch);
+        launch(context);
     }));
-}
 
-function runCommand(context: vscode.ExtensionContext, command: (context: vscode.ExtensionContext, hostname: string, port: number) => void) {
-    const settings = vscode.workspace.getConfiguration('vscode-devtools-for-chrome');
-    const hostname = settings.get('hostname') as string || 'localhost';
-    const port = settings.get('port') as number || 9222;
+    context.subscriptions.push(vscode.commands.registerCommand('devtools-for-chrome.attach', async () => {
+        attach(context);
+    }));
 
-    command(context, hostname, port);
+    vscode.debug.registerDebugConfigurationProvider(debuggerType, {
+        provideDebugConfigurations(folder: vscode.WorkspaceFolder | undefined, token?: vscode.CancellationToken): vscode.ProviderResult<vscode.DebugConfiguration[]> {
+            return [{
+                type: debuggerType,
+                name: 'Launch Chrome against localhost',
+                request: 'launch',
+                url: 'http://localhost:8080',
+            }];
+        },
+
+        resolveDebugConfiguration(folder: vscode.WorkspaceFolder | undefined, config: vscode.DebugConfiguration, token?: vscode.CancellationToken): vscode.ProviderResult<vscode.DebugConfiguration> {
+            if (config && config.type == debuggerType) {
+                if (config.request && config.request.localeCompare('attach', 'en', { sensitivity: 'base' }) == 0) {
+                    attach(context);
+                } else {
+                    let launchUri: string = '';
+                    if (folder.uri.scheme == 'file') {
+                        const baseUrl: string = config.file || config.url;
+                        const replacedUri: string = baseUrl.replace('${workspaceFolder}', folder.uri.path);
+                        launchUri = utils.pathToFileURL(replacedUri);
+                    } else {
+                        launchUri = config.url;
+                    }
+                    launch(context, launchUri, config.chromePath);
+                }
+            } else {
+                vscode.window.showErrorMessage('No supported launch config was found.');
+            }
+            return;
+        }
+    });
 }
 
-async function launch(context: vscode.ExtensionContext, hostname: string, port: number) {
+async function launch(context: vscode.ExtensionContext, launchUrl?: string, chromePathFromLaunchConfig?: string) {
     const portFree = await utils.isPortFree(hostname, port);
+
     if (portFree) {
-        const settings = vscode.workspace.getConfiguration('vscode-devtools-for-chrome');
-        const pathToChrome = settings.get('chromePath') as string || utils.getPathToChrome();
+        const pathToChrome = settings.get('chromePath') as string || chromePathFromLaunchConfig || utils.getPathToChrome();
+
         if (!pathToChrome || !utils.existsSync(pathToChrome)) {
-            vscode.window.showErrorMessage('Chrome was not found. Chrome must be installed for this extension to function. If you have Chrome installed at a custom location you can speficy it in the \'chromePath\' setting.');
+            vscode.window.showErrorMessage('Chrome was not found. Chrome must be installed for this extension to function. If you have Chrome installed at a custom location you can specify it in the \'chromePath\' setting.');
             return;
         }
+
         utils.launchLocalChrome(pathToChrome, port, 'about:blank');
     }
 
-    attach(context, hostname, port);
-}
+    const target = JSON.parse(await utils.getURL(`http://${hostname}:${port}/json/new?${launchUrl}`));
 
-async function attach(context: vscode.ExtensionContext, hostname: string, port: number) {
-    const checkDiscoveryEndpoint = (url: string) => {
-        return utils.getURL(url, { headers: { Host: 'localhost' } });
-    };
+    if (!target || !target.webSocketDebuggerUrl || target.webSocketDebuggerUrl == '') {
+        vscode.window.showErrorMessage(`Could not find the launched Chrome tab: (${launchUrl}).`);
+        attach(context);
+    } else {
+        DevToolsPanel.createOrShow(context.extensionPath, target.webSocketDebuggerUrl);
+    }
+}
 
-    const jsonResponse = await checkDiscoveryEndpoint(`http://${hostname}:${port}/json/list`)
-        .catch(() => checkDiscoveryEndpoint(`http://${hostname}:${port}/json`));
+async function attach(context: vscode.ExtensionContext) {
+    const responseArray = await getListOfTargets();
 
-    const responseArray = JSON.parse(jsonResponse);
     if (Array.isArray(responseArray)) {
         const items: QuickPickItem[] = [];
 
@@ -63,6 +98,17 @@ async function attach(context: vscode.ExtensionContext, hostname: string, port:
     }
 }
 
+async function getListOfTargets(): Promise<Array<any>> {
+    const checkDiscoveryEndpoint = (url: string) => {
+        return utils.getURL(url, { headers: { Host: 'localhost' } });
+    };
+
+    const jsonResponse = await checkDiscoveryEndpoint(`http://${hostname}:${port}/json/list`)
+        .catch(() => checkDiscoveryEndpoint(`http://${hostname}:${port}/json`));
+
+    return JSON.parse(jsonResponse);
+}
+
 class DevToolsPanel {
     private static currentPanel: DevToolsPanel;
     private readonly _panel: vscode.WebviewPanel;

src/utils.ts

@@ -124,4 +124,20 @@ export function getPathToChrome(): string {
     } else {
         return existsSync(DEFAULT_CHROME_PATH.LINUX) ? DEFAULT_CHROME_PATH.LINUX : '';
     }
+}
+
+export function pathToFileURL(absPath: string, normalize?: boolean): string {
+    if (normalize) {
+        absPath = path.normalize(absPath);
+        absPath = forceForwardSlashes(absPath);
+    }
+
+    absPath = (absPath.startsWith('/') ? 'file://' : 'file:///') +  absPath;
+    return encodeURI(absPath);
+}
+
+export function forceForwardSlashes(aUrl: string): string {
+    return aUrl
+        .replace(/\\\//g, '/') // Replace \/ (unnecessarily escaped forward slash)
+        .replace(/\\/g, '/');
 }