Here's part of my karma config: <div class="highlight highlight-source-ts notransl

I'll tell you more about my env: Running in OSX, so not sure h

My package.json s are <code class="notranslate"

[Bug] Cannot set debug port,about twolfson/karma-electron

Comments (19)

twolfson commented on July 20, 2024

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

from karma-electron.

twolfson commented on July 20, 2024

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

Sanity check that I can use a non-Electron browser for --remote-debugging-port

# Verify nothing is running at 9222
curl localhost:9222
# curl: (7) Failed to connect to localhost port 9222: Connection refused

# Run Chrome on 9222 and verify it's accessible
google-chrome --remote-debugging-port=9222
curl localhost:9222
# <html><head>...

Sanity check that I can use Electron with no Karma wrapper and --remote-debugging-port

# Verify nothing is running at 9222
curl localhost:9222
# curl: (7) Failed to connect to localhost port 9222: Connection refused

# Run Chrome on 9222 and verify it's accessible
./node_modules/.bin/electron --remote-debugging-port=9222
curl localhost:9222
# <html><head>...

Sanity check that I can use karma-electron and --remote-debugging-port

# Verify nothing is running at 9333
curl localhost:9333
# curl: (7) Failed to connect to localhost port 9333: Connection refused

# Copy/pasted given config and ran continuous tests
npm run test-karma-continuous
curl localhost:9333
# <html><head>...

Inspect --log-level debug for more sanity

npm run test-karma-continuous -- --log-level debug
15 06 2017 20:16:20.970:DEBUG [launcher]: /home/todd/github/karma-electron/node_modules/electron/dist/electron /home/todd/github/karma-electron/lib/electron-launcher.js --remote-debugging-port=9333 --user-data-dir /tmp/karma-68964248 --url http://localhost:9876/?id=68964248

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?

from karma-electron.

luchillo17 commented on July 20, 2024

I'll tell you more about my env:

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.
I'm using Typescript + Webpack along with Karma, maybe that has to do with the issue?
Tried with just electron from node_modules, curl returns proper html.
What's the command behind your test-karma-continuous? in mine its simplified to karma start --auto-watch --no-single-run.

from karma-electron.

twolfson commented on July 20, 2024

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

from karma-electron.

luchillo17 commented on July 20, 2024

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:

from karma-electron.

twolfson commented on July 20, 2024

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?

from karma-electron.

luchillo17 commented on July 20, 2024

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?

from karma-electron.

twolfson commented on July 20, 2024

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)

from karma-electron.

luchillo17 commented on July 20, 2024

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.

from karma-electron.

twolfson commented on July 20, 2024

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?

from karma-electron.

luchillo17 commented on July 20, 2024

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.

from karma-electron.

luchillo17 commented on July 20, 2024

I think it is the case, when i go into debug mode, this is what i see:

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:

I have no idea what is lacking.

from karma-electron.

luchillo17 commented on July 20, 2024

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

from karma-electron.

twolfson commented on July 20, 2024

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

from karma-electron.

greg9504 commented on July 20, 2024

@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:

open browser at http://localhost:9876/#
Click on the debug button
open Chrome debug tools
go to sources tab, browse to find a .spec.ts file
open file and set a break point
hit f5

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

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.

from karma-electron.

twolfson commented on July 20, 2024

@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:

colinskow/angular-electron-dream-starter#10

from karma-electron.

luchillo17 commented on July 20, 2024

@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.

from karma-electron.

greg9504 commented on July 20, 2024

@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?

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

from karma-electron.

luchillo17 commented on July 20, 2024

Sure, [email protected], [email protected], [email protected], [email protected] 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,
  });
};

from karma-electron.

[Bug] Cannot set debug port about karma-electron HOT 19 CLOSED

Comments (19)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent