[Bug] Invalid VS Code Chrome Debug Configuration

[Deilan]

• What is the current behavior?
  Visual Studio Code Chrome debugging does not work.

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via
  https://plnkr.co or similar (you can use this template as a starting point:

1. Launch VS Code
2. Install Chrome Debugger extension
3. Reload VS Code
4. Launch the app
5. Launch the Launch Chrome against localhost, with sourcemaps configuration
6. Set a breakpoint somewhere in angular component
7. Try to reach the breakpoint in the launched chrome tab

• What is the expected behavior?
  Breakpoint is hit

• What is the motivation / use case for changing the behavior?
  Breakpoint is not hit
  The following error message appears in VS Code:

Cannot connect to runtime process, timeout after 10000 ms -
(reason: Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9222).

• Please tell us about your environment:

• Angular version: 2.4.4
• Browser: Chrome 56

[joowoo]

did you close all chrome process? event postman and so on

[dbaranau]

This is not a bug/defect. You have to run chrome executable with --remote-debugging-port=9222 switch. Please read documentation to Debugger for Chrome at https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome and pay attention to the aspect.

[Deilan]

@dbaranau Thanks for your response! Launch Chrome against localhost, with sourcemaps configuration is used to launch chrome with --remote-debugging-port=9222, so everything is ok with that.

@joowoo Thanks for the tip! Closing chrome and launching Launch Chrome against localhost, with sourcemaps configuration manually started chrome in remote debugging mode. As for now there is problem with source map on the latest version from the repo. After breakpoint is set and the corresponding page loaded in browser, the breakpoint slides away from it's position and not being hit. See smarttables page for example:

Before reaching the page:

After reaching the page, breakpoint slides down and is not being hit after clicking on the delete icon in the table:

After refreshing the page breakpoint allegedly being hit, but it's wrong (didn't click the delete button):

[joowoo]

it also stuck me for a long time, it was cause by source map link to wrong line,
just change the devtool setting in webpack.dev.js , you can have a reference at http://webpack.github.io/docs/configuration.html#devtool,

for me just want to break at right place so i choose eval-source-map
find all devtool setting in webpack.dev.js and change it to devtool: 'eval-source-map', rebuild the app it will break at right place

by the way at #777 sombody also report it , and they fix it at next commit but dont know why in next commit change the setting back again, maybe it is just cause by different environment, the problem dont repeat

[Deilan]

@joowoo You're a lifesaver! :) Chaging devtool: 'cheap-module-source-map' to devtool: 'eval-source-map' resolved the issue for me. @lexzhukov Is there a reason of favoring the first option instead of the last one?

[lexzhukov]

@Deilan building takes a less time.

[symphony2014]

@joowoo , I have same issue, with my @angular/http http.js that the breakpoint slide away from the right place, but Chaging devtool: 'cheap-module-source-map' to devtool: 'eval-source-map' does not work for me :(, any idea for me? so many thanks.

const helpers = require('./helpers');
const path = require('path');
const webpackMerge = require('webpack-merge'); // used to merge webpack configs
const webpackMergeDll = webpackMerge.strategy({plugins: 'replace'});
const commonConfig = require('./webpack.common.js'); // the settings that are common to prod and dev

/**
 * Webpack Plugins
 */
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
const DefinePlugin = require('webpack/lib/DefinePlugin');
const NamedModulesPlugin = require('webpack/lib/NamedModulesPlugin');
const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');

/**
 * Webpack Constants
 */
const ENV = process.env.ENV = process.env.NODE_ENV = 'development';
const HOST = process.env.HOST || 'localhost';
const PORT = process.env.PORT || 3000;
const HMR = helpers.hasProcessFlag('hot');
const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, {
  host: HOST,
  port: PORT,
  ENV: ENV,
  HMR: HMR
});

const DllBundlesPlugin = require('webpack-dll-bundles-plugin').DllBundlesPlugin;

/**
 * Webpack configuration
 *
 * See: http://webpack.github.io/docs/configuration.html#cli
 */
module.exports = function (options) {
  return webpackMerge(commonConfig({env: ENV}), {

    /**
     * Developer tool to enhance debugging
     *
     * See: http://webpack.github.io/docs/configuration.html#devtool
     * See: https://github.com/webpack/docs/wiki/build-performance#sourcemaps
     */
    // devtool: 'cheap-module-source-map',
     devtool: 'eval-source-map',

    /**
     * Options affecting the output of the compilation.
     *
     * See: http://webpack.github.io/docs/configuration.html#output
     */
    output: {

      /**
       * The output directory as absolute path (required).
       *
       * See: http://webpack.github.io/docs/configuration.html#output-path
       */
      path: helpers.root('dist'),

      /**
       * Specifies the name of each output file on disk.
       * IMPORTANT: You must not specify an absolute path here!
       *
       * See: http://webpack.github.io/docs/configuration.html#output-filename
       */
      filename: '[name].bundle.js',

      /**
       * The filename of the SourceMaps for the JavaScript files.
       * They are inside the output.path directory.
       *
       * See: http://webpack.github.io/docs/configuration.html#output-sourcemapfilename
       */
      sourceMapFilename: '[name].map',

      /** The filename of non-entry chunks as relative path
       * inside the output.path directory.
       *
       * See: http://webpack.github.io/docs/configuration.html#output-chunkfilename
       */
      chunkFilename: '[id].chunk.js',

      library: 'ac_[name]',
      libraryTarget: 'var',
    },

    plugins: [

      /**
       * Plugin: DefinePlugin
       * Description: Define free variables.
       * Useful for having development builds with debug logging or adding global constants.
       *
       * Environment helpers
       *
       * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
       */
      // NOTE: when adding more properties, make sure you include them in custom-typings.d.ts
      new DefinePlugin({
        'ENV': JSON.stringify(METADATA.ENV),
        'HMR': METADATA.HMR,
        'process.env': {
          'ENV': JSON.stringify(METADATA.ENV),
          'NODE_ENV': JSON.stringify(METADATA.ENV),
          'HMR': METADATA.HMR,
        }
      }),

      new DllBundlesPlugin({
        bundles: {
          polyfills: [
            'core-js',
            {
              name: 'zone.js',
              path: 'zone.js/dist/zone.js'
            },
            {
              name: 'zone.js',
              path: 'zone.js/dist/long-stack-trace-zone.js'
            },
            'ts-helpers',
          ],
          vendor: [
            '@angular/platform-browser',
            '@angular/platform-browser-dynamic',
            '@angular/core',
            '@angular/common',
            '@angular/forms',
            '@angular/http',
            '@angular/router',
            '@angularclass/hmr',
            'rxjs',
          ]
        },
        dllDir: helpers.root('dll'),
        webpackConfig: webpackMergeDll(commonConfig({env: ENV}), {
         devtool: 'eval-source-map',
          plugins: []
        })
      }),

      /**
       * Plugin: AddAssetHtmlPlugin
       * Description: Adds the given JS or CSS file to the files
       * Webpack knows about, and put it into the list of assets
       * html-webpack-plugin injects into the generated html.
       *
       * See: https://github.com/SimenB/add-asset-html-webpack-plugin
       */
      new AddAssetHtmlPlugin([
        { filepath: helpers.root(`dll/${DllBundlesPlugin.resolveFile('polyfills')}`) },
        { filepath: helpers.root(`dll/${DllBundlesPlugin.resolveFile('vendor')}`) }
      ]),

      /**
       * Plugin: NamedModulesPlugin (experimental)
       * Description: Uses file names as module name.
       *
       * See: https://github.com/webpack/webpack/commit/a04ffb928365b19feb75087c63f13cadfc08e1eb
       */
      // new NamedModulesPlugin(),

      /**
       * Plugin LoaderOptionsPlugin (experimental)
       *
       * See: https://gist.github.com/sokra/27b24881210b56bbaff7
       */
      new LoaderOptionsPlugin({
        debug: true,
        options: {
          context: helpers.root('src'),
          output: {
            path: helpers.root('dist')
          },

          /**
           * Static analysis linter for TypeScript advanced options configuration
           * Description: An extensible linter for the TypeScript language.
           *
           * See: https://github.com/wbuchwalter/tslint-loader
           */
          tslint: {
            emitErrors: false,
            failOnHint: false,
            resourcePath: 'src'
          }
        }
      })
    ],

    /**
     * Webpack Development Server configuration
     * Description: The webpack-dev-server is a little node.js Express server.
     * The server emits information about the compilation state to the client,
     * which reacts to those events.
     *
     * See: https://webpack.github.io/docs/webpack-dev-server.html
     */
    devServer: {
      port: METADATA.port,
      host: METADATA.host,
      historyApiFallback: {
        index: '/index.html'
      },
      watchOptions: {
        aggregateTimeout: 300,
        poll: 1000
      }
    },

    /*
     * Include polyfills or mocks for various node stuff
     * Description: Node configuration
     *
     * See: https://webpack.github.io/docs/configuration.html#node
     */
    node: {
      global: true,
      crypto: 'empty',
      process: true,
      module: false,
      clearImmediate: false,
      setImmediate: false
    }

  });
};

[sarojk562]

@Deilan Hey man! I am new to all this angular js stuff. Can you help me set up the vs launch in settings so that i can debug the ng2 admin template in VSCode itself. Right now i am using console.log() at most of the places and verifying the values in the console of chrome it is very annoying.

Thanks In advance,
SarojK