Debugging in VSCode

Summary:
This diff enables debugging in VSCode. Debugging works for both Flipper core and plugin code. To start debugging:
1. yarn start
2. Go to "Debug and Run" tab in VSCode, select task "Attach to Running Renderer" and launch it (or just press F5).
{F227135377}
3. Debugger will be attached and all the breakpoints set in VSCode will be hit.

Reviewed By: passy

Differential Revision: D19578566

fbshipit-source-id: 609766471ad196a2ee8d4086ddb84b7af4ef05ef

.vscode/launch.json

@@ -6,7 +6,8 @@
       "type": "chrome",
       "request": "attach",
       "port": 9222,
-      "webRoot": "${workspaceRoot}"
+      "webRoot": "/",
+      "url": "http://localhost:3000/index.dev.html"
     },
     {
       "type": "node",

scripts/start-dev-server.js

@@ -18,6 +18,7 @@ const chalk = require('chalk');
 const http = require('http');
 const path = require('path');
 const Metro = require('../static/node_modules/metro');
+const MetroResolver = require('../static/node_modules/metro-resolver');
 const fs = require('fs');
 const Watchman = require('../static/watchman');
 
@@ -69,6 +70,16 @@ function startMetroServer(app) {
     },
     resolver: {
       blacklistRE: /(\/|\\)(sonar|flipper|flipper-public)(\/|\\)(dist|doctor)(\/|\\)|(\.native\.js$)/,
+      resolveRequest: (context, moduleName, platform) => {
+        if (moduleName.startsWith('./localhost:3000')) {
+          moduleName = moduleName.replace('./localhost:3000', '.');
+        }
+        return MetroResolver.resolve(
+          {...context, resolveRequest: null},
+          moduleName,
+          platform,
+        );
+      },
     },
     watch: true,
   }).then(metroBundlerServer => {