search

twolfson / karma-electron

Karma launcher and preprocessor for Electron
The Unlicense
59 stars 21 forks source link

[Bug] Cannot set debug port #25

Closed luchillo17 closed 7 years ago

luchillo17 commented 7 years ago

Here's part of my karma config:

// Port config for VSCode debugging purpose
    browsers: ['ElectronDebugging'],
    customLaunchers: {
      ElectronDebugging: {
        base: 'Electron',
        flags: ['--remote-debugging-port=9333']
      }
    },

Here's my VSCode launch task:

{
      "type": "node",
      "request": "launch",
      "name": "Attach karma electron",
      "address": "localhost",
      "port": 9333,
      "diagnosticLogging": true,
      "pathMapping": {
        "/": "${workspaceRoot}",
        "/base/": "${workspaceRoot}/"
      },
      // "program": "$(which npm)",
      // "args": [
      //   "test"
      // ],
      // "cwd": "${workspaceRoot}",
      "protocol": "inspector"
    },

And here's the output of running the karma runner in watch mode, opening the debug with the button Debug and trying to attach to such: image

Help?

twolfson commented 7 years ago

At a glance, it looks like it should work. I will attempt to reproduce the issue by the end of the weekend.

In the interim, we can attempt to debug this further by seeing what Karma is running for our launcher via:

karma start --log-level debug

http://karma-runner.github.io/1.0/config/configuration-file.html

https://github.com/karma-runner/karma/blob/v1.7.0/lib/launchers/process.js#L73-L76

twolfson commented 7 years ago

I've taken a shot at trying to reproduce the issue and was unable to. Here's the steps I took:

The only thing I can think of is Karma isn't running continuously. Can you try running some of the commands I listed (e.g. google-chrome --remote-debugging-port) to isolate the issue?

luchillo17 commented 7 years ago

I'll tell you more about my env:

  1. Running in OSX, so not sure how to run chrome with args, i've tried this open --new -a /Applications/Google\ Chrome.app/ --args "--remote-debugging-port=9222" and it opens, but curl fails with Connection refused.
  2. I'm using Typescript + Webpack along with Karma, maybe that has to do with the issue?
  3. Tried with just electron from node_modules, curl returns proper html. image
  4. What's the command behind your test-karma-continuous? in mine its simplified to karma start --auto-watch --no-single-run.
twolfson commented 7 years ago

Strange, I just tried on OS X and was able to use the open --new command you provided without any issue. Make sure that Chrome is fully exited (i.e. Cmd+Q) or it won't respect the new CLI flags.

I doubt TypeScript or Webpack is causing the issue as those should only affect the bundled JS.

test-karma-continuous comes from this repo which has the config:

// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,

// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Electron'],

// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,

It runs:

./node_modules/.bin/karma start test/integration-test/karma.conf.js --no-single-run

Here are the relevant files:

https://github.com/twolfson/karma-electron/blob/5.2.1/test/integration-test/karma.conf.js

https://github.com/twolfson/karma-electron/blob/5.2.1/test/integration-test/karma.conf.js#L119-L128

https://github.com/twolfson/karma-electron/blob/5.2.1/package.json#L29

luchillo17 commented 7 years ago

Oh there's the issue, i didn't quit current Chrome.

Well, another thing different is that i'm using a karma config made in TS as well, so karma most likely will use ts-node, does that change anything?

Should i paste my config file?

Tested again with log level and the Launcher log is this, so it's not passing the flag to electron: image

twolfson commented 7 years ago

Feel free to try it without ts-node but I doubt it will make a difference. Based on the --log-level debug, it makes me wonder that our browser is being selected properly. Can you double check that there's no --browsers flag interfering with ElectronDebugging's selection?

luchillo17 commented 7 years ago

My package.json scripts are browsers word free, and in my karma config the browsers property is commented out, i'll remove even the comment and try again.

On the other hand i've taken a look at the package.json again, please tell me this is the same as karma-electron-launcher?

twolfson commented 7 years ago

No, this is a different package =/ This is karma-electron:

https://github.com/twolfson/karma-electron

karma-electron-launcher would be:

https://github.com/lele85/karma-electron-launcher

We wrote this library due to a lack of __filename and similar features in that launcher

Going to pre-emptively close this issue as it sounds like a package confusion issue (sadly pretty common -- had the same issue with gulp-spritesmith/gulp.spritesmith)

luchillo17 commented 7 years ago

Sorry about it, now it does attach, however VSCode doesn't stop in any breakpoint, any idea? it says Breakpoint ignored because generated code not found.

twolfson commented 7 years ago

That's great to hear! I'm not too familiar with VSCode but based on the error message it sounds like there's no source map. How does the code behave if we use Chrome instead of Electron?

luchillo17 commented 7 years ago

It will probably just break, have some node specific packages, but let me try.

Yep, require is not a function, didn't even go as far as to be able to attach.

luchillo17 commented 7 years ago

I think it is the case, when i go into debug mode, this is what i see: image Note the source is there, but seems like there's no sourcemap loaded, i have webpack using devtool: inline-source-map, i'm using karma-sourcemap-loader with preprocessors like: image I have no idea what is lacking.

luchillo17 commented 7 years ago

Oh i played with some configs and now works, sorry for wasting your time, thanks.

twolfson commented 7 years ago

No worries, glad to hear it's all working now =)

greg9504 commented 7 years ago

@luchillo17 Would you mind posting your working VS Code launch config and your karma.config.js? I'm running into similar problems and wondering what you did to correct it.

@twolfson I haven't been able to even get debugging with Chrome working. This is what I've tried:

Break point is not hit, I do see this exception:

Uncaught ReferenceError: require is not defined at Object.webpack_exports.c (Observable":1) at webpack_require (bootstrap a4423d1…:49) at Object. (bootstrap a4423d1…:147) at webpack_require (bootstrap a4423d1…:49) at Object. (testing.es5.js:1) at webpack_require (bootstrap a4423d1…:49) at Object.exports.compose.functions (spec-bundle.js:25) at __webpack_require__ (bootstrap a4423d1…:49) at Object.defineProperty.value (bootstrap a4423d1…:147) at bootstrap a4423d1…:147 at EmptyError":1

image

image

attached the log using logLevel: config.LOG_DEBUG

karam-electron-debug.zip

I'm using this project https://github.com/colinskow/angular-electron-dream-starter After cloning: npm install (if that fails, you'll need to use yarn install instead) npm run watch:test (this starts the tests)

Thanks for any help Greg.

twolfson commented 7 years ago

@greg9504 Sadly I don't have time to dig through that project at the moment. It sounds like a project configuration issue (I'm guessing webpack isn't bundling something properly). I'd suggest you wait until that maintainer replies on:

https://github.com/colinskow/angular-electron-dream-starter/issues/10

luchillo17 commented 7 years ago

@greg9504 Mine? ok, first make sure you have karma-electron installed, not karma-electron-launcher that one seems to have issue receiving flags for the port part.

Next the karma config side, configure the browser launcher like:

// Port config for VSCode debugging purpose
    browsers: ['ElectronDebugging'],
    customLaunchers: {
      ElectronDebugging: {
        base: 'Electron',
        flags: [
          '--show',
          '--remote-debugging-port=9333',
        ],
      },
    },

Copy the port, you'll need it later.

Next is the VSCode launch config:

{
  // Use IntelliSense to learn about possible Node.js debug attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach karma electron",
      "address": "localhost",
      "port": 9333,
      // "diagnosticLogging": true,
      "pathMapping": {
        "/": "${workspaceRoot}",
        "/base/": "${workspaceRoot}/"
      },
      "cwd": "${workspaceRoot}",
      "protocol": "inspector"
    },
    {
      "type": "node",
      "request": "attach",
      "name": "Attach nodemon debug server",
      "pathMapping": {
        "/": "${workspaceRoot}/dist",
        "/base/": "${workspaceRoot}/dist/"
      },
      "cwd": "${workspaceRoot}",
      "protocol": "inspector",
      "restart": true,
      "port": 9229
    }
  ]
}

Check the port, it will attach to karma in the first config in the port exposed by the flag, also note the pathMapping & cwd, those tell the debugger where to find the sourcemaps, dunno which one of those variables you actually need but it doesn't hurt to put them all.

greg9504 commented 7 years ago

@twolfson OK was hoping you might notice something in my work flow that was wrong. I think I found the problem, thanks to @luchillo17 configuration.

After starting karma I was opening a regular Chrome browser instance to: http://localhost:9876/# , then opening the Debug Runner and trying to debug that (why I got the Uncaught ReferenceError: require is not defined error). What I needed to do was make sure that the karma config showed the Electron window using this config:

browsers: ['ElectronDebugging'], customLaunchers: { ElectronDebugging: { base: 'Electron', flags: [ '--show' ], }, },

instead of: browsers: [ 'Electron'
], I can now set breakpoints using the debugger tools in Electron instance. However where the code is breaking from doesn't line up with where I put the break point. So I can "sort of" debug... but I'm 99% sure this is a source map problem and nothing to do with Karma/karma-electron. I think it has something to do with Karma-coverage/remap-coverage/Istanbul and sourcemaps.

@luchillo17 Thanks for your help. I almost have VSCode debug working. I assume you are attaching to the instance of the Karma Debug Runner?

image

I can attach to the Debug Runner, my break points show up as enabled (source maps found) but they don't break. But this may be related to the source map problem I'm having with Chrome debugger.

Would you mind telling me what versions of webpack and electron you are using? Also if you could share your complete karma.config.js that would be helpful.
Thanks

luchillo17 commented 7 years ago

Sure, webpack@2.7.0, karma-webpack@2.0.4, electron@1.7.4, karma-electron@5.2.1 and my config:

// Karma configuration
// Generated on Mon Jan 30 2017 09:57:01 GMT-0500 (COT)

import webpackConfig from './config/webpack.test'; // the settings that are common to prod and dev
import { root } from './config/helpers';
// import karma from 'karma';

const databaseConfig = 'config/testConfig/*.config.spec.ts';
const databaseReset  = 'config/testConfig/*.reset.spec.ts';
const srcGlob = 'src/**/!(*.spec|*.d).ts';
const testGlob = 'src/**/*.spec.ts';
const webpackEnv = { env: 'test' };

export default (config) => {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: root(),

    // Fix for typescript mime type to send ts files to browser for testing
    mime : {
      'text/x-typescript': [
        'ts',
        'tsx',
      ],
    },

    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine', 'source-map-support'],

    // list of files / patterns to load in the browser
    files: [
      // srcGlob,
      // './node_modules/core-js/index.js',
      { pattern: './karma.shim.js', watched: true, included: true, served: true},
      { pattern: databaseReset,     watched: false, included: true, served: true },
      { pattern: databaseConfig,    watched: false, included: true, served: true },
      { pattern: testGlob,          watched: false, included: true, served: true },
    ],

    // list of files to exclude
    exclude: [
    ],

    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      [databaseReset]: [ 'webpack', 'sourcemap' ],
      [databaseConfig]: [ 'webpack', 'sourcemap' ],
      // [srcGlob]: [ 'webpack', 'sourcemap' ],
      // './node_modules/core-js/index.js': [ 'webpack', ],
      [testGlob]: [ 'webpack', 'sourcemap' ],
    },

    webpack: webpackConfig(webpackEnv),
    webpackMiddleware: {noInfo: true},

    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    // reporters: ['progress'],
    reporters: ['spec', 'notification', 'coverage-istanbul'],
    specReporter: {
      maxLogLines: 5,         // limit number of lines logged per test
      suppressErrorSummary: false,  // do not print error summary
      suppressFailed: false,  // do not print information about failed tests
      suppressPassed: false,  // do not print information about passed tests
      suppressSkipped: false,  // do not print information about skipped tests
      showSpecTiming: true, // print the time elapsed for each spec
    },
    coverageIstanbulReporter: {
      /** Reports can be any that are listed here:
       * https://github.com/istanbuljs/istanbul-reports/tree/master/lib
       */
      // tslint:disable-next-line:object-literal-key-quotes
      reports: [
        'json-summary',
        'lcov',
      ],
      'report-config': {
        html: { subdir: 'html' },
        lcov: { subdir: 'lcov' },
      },
      // tslint:disable-next-line:object-literal-key-quotes
      dir: './coverage', // output directory
      // if using webpack and pre-loaders, work around webpack breaking the source path
      // tslint:disable-next-line:object-literal-key-quotes
      fixWebpackSourcePaths: true,
    },

    // web server port
    port: 9876,

    // enable / disable colors in the output (reporters and logs)
    colors: true,

    // level of logging
    // possible values:
      // config.LOG_DISABLE ||
      // config.LOG_ERROR ||
      // config.LOG_WARN ||
      // config.LOG_INFO ||
      // config.LOG_DEBUG
    logLevel: config.LOG_INFO,
    // logLevel: config.LOG_DEBUG,

    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: false,

    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    // browsers: ['Electron'],

    // Port config for VSCode debugging purpose
    browsers: ['ElectronDebugging'],
    customLaunchers: {
      ElectronDebugging: {
        base: 'Electron',
        flags: [
          '--show',
          '--remote-debugging-port=9333',
        ],
      },
    },

    client: {
      jasmine: {
        stopOnFailure: true,
      },
    },

    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: true,
    stopOnFailure: true,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity,
  });
};