title: Unable to debug Typescript for Protractor in VSCode with Node 8.x
body: <p>I am not able to debug Typescript (which compiles into JS for Protractor) when on Node 8.x. 7.x used the browser.pause() but that's not an option anymore since it is deprecated.</p>
  
  <p>I am using the latest version of VSCode.</p>
  
  <p>package.json</p>
  
  <pre><code>{
    "name": "bond",
    "version": "1.0.0",
    "description": "bond e2e automation tests",
    "author": "bond",
    "main": "./config.ts",
    "license": "bond",
    "scripts": {
      "webdriver-update": "npx webdriver-manager update",
      "prestart": "npm run build",
      "build": "tsc",
      "tsc": "tsc",
      "test": "npm run tsc &amp;&amp; protractor tmp/config.js"
    },
    "dependencies": {
      "@types/jasmine": "^2.8.9",
      "@types/jasminewd2": "^2.0.4",
      "@types/node": "^10.12.0",
      "adm-zip": "0.4.7",
      "chance": "^1.0.16",
      "chromedriver": "^2.41",
      "colors": "1.1.2",
      "geckodriver": "1.8.1",
      "jasmine": "^2.99.0",
      "jasmine-reporters": "2.2.1",
      "jasmine-spec-reporter": "4.2.1",
      "mocha": "^5.2.0",
      "protractor": "^5.4.1",
      "protractor-jasmine2-screenshot-reporter": "0.4.0",
      "selenium-server": "^3.13.0",
      "selenium-webdriver": "^4.0.0-alpha.1",
      "ts-node": "^7.0.1",
      "webdriver-manager": "^12.0.6",
      "xml2js": "~0.4.19"
    },
    "devDependencies": {
      "@types/jasmine": "^2.8.9",
      "@types/jasminewd2": "^2.0.4",
      "protractor-beautiful-reporter": "^1.2.6",
      "ts-node": "^7.0.1",
      "typescript": "^2.9.2",
      "yarn": "^1.10.1"
    }
  }
  </code></pre>
  
  <p>launch.json</p>
  
  <pre><code>{
      "version": "0.2.0",
      "configurations": [
  
          {
          "type": "node",
          "request": "launch",
          "name": "XPIA",
          "stopOnEntry": false, //debug exp
          "program": "${workspaceFolder}\\config.ts",
          // "program": "${workspaceRoot}\\tmp\\",
          "preLaunchTask": "npm: build",
          "sourceMaps": true,
          "smartStep": true,
          "internalConsoleOptions": "openOnSessionStart",
          "protocol": "auto",
          "args": ["${workspaceRoot}/config.js"],
          "outFiles": [
              "${workspaceFolder}/tmp/**/*.js"
          ]
      }]
  }
  </code></pre>
  
  <p>This is just killing most of my time as I often switch to Node 7.x and use the inefficient browser.pause()</p>
  
  <p><strong>Edit 1:</strong></p>
  
  <p>As per the suggestions below, from the video, I am using Node 8.x, Selenium Promise Manager is false and targeting es2017, but got this error.</p>
  
  <p><a href="https://i.stack.imgur.com/aJPZx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aJPZx.png" alt="Chrome Dev Tools Error"></a></p>
  
  <p>My complied code is in the tmp folder and not node_modules/protractor/bin</p>
  
  <p><a href="https://i.stack.imgur.com/P7XPL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/P7XPL.png" alt="node inspect and folder structure"></a></p>
  
  <p>config.ts</p>
  
  <pre><code>import { Config } from 'protractor';
  import { Environment } from './environment';
  import { StandardSetup } from './Standard-setup';
  
  var HtmlReporter = require('protractor-beautiful-reporter');
  
  export let config: Config = {
      framework: 'jasmine2',
      SELENIUM_PROMISE_MANAGER: false,
      directConnect: true,
  
      capabilities: {
          'browserName': (process.env.TEST_BROWSER_NAME || 'chrome'),
          'version': (process.env.TEST_BROWSER_VERSION || 'ANY'),
          'shardTestFiles': true,
          'unexpectedAlertBehaviour': 'accept',
          'loggingPrefs': {
              'performance': 'ALL',
          },
  
          'chromeOptions': {
              'args': ['--disable-notifications', '--disable-infobars', '--start-maximized'],
              prefs: {
                  download: {
                      'prompt_for_download': false,
                      'directory_upgrade': true,
                  }
              }
          },
      },
  
      specs: ['specs/proj/*test-spec.js'],
      seleniumAddress: 'http://10.10.113.153:4444/wd/hub',
  
      jasmineNodeOpts: {
          isVerbose: true,
          showColors: true,
          defaultTimeoutInterval: 999999, //longer timeout for debugging
          print: function () { }
      },
  
      /**
      *  @returns logs to console on page load 
      */
      async onPrepare(): Promise&lt;void&gt; {
          let setup = new StandardSetup(),
              env = new Environment();
  
          setup.setSpecReporter();
          await setup.setjasmineReporters();
  
  
          jasmine.getEnv().addReporter(new HtmlReporter({
              baseDirectory: 'reports/screenshots'
           }).getJasmine2Reporter());
  
           return await env.setGlobals();
      }
  };
  </code></pre>
  
  <p><strong>Edit 2:</strong></p>
  
  <p>The command that I am using is:</p>
  
  <pre><code>node --inspect-brk ./tmp/config.js
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/YzHSx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YzHSx.png" alt="enter image description here"></a></p>
  
  <p>Now I am able to see the config file in dev tools. However, when I press F8, the script is not pausing at the "debugger;" in the spec-file. All I am seeing is this:</p>
  
  <p><a href="https://i.stack.imgur.com/IT1w4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IT1w4.png" alt="enter image description here"></a></p>
  
  <p>To debug on VSCode (F10), I changed the launch.json:</p>
  
  <pre><code>"program": "${workspaceRoot}\\tmp\\config.js",
  </code></pre>
  
  <p>Again I am ending up on the config and getting nowhere near to the spec file.</p>
  
  <p>Where am I going wrong?</p>