Comments (15)
Karma runs as a node process and then uses one or more browser launchers to inject the tests to the desired browser. The launcher for PhantomJS karma-phantomjs-launcher spawns a phantomjs and then injects the tests.
Over at the VSC phantomjs debug extension, you can directly invoke a phantomjs process and debug in VSC. This is closer to what we want, but not quite there. In fact, issue 1 on the extension's github is asking for this very thing.
So anyone know how to attach to a phantomjs process that was launched in debug mode via karma?
from vscode-node-debug.
@aides VSCode 0.9.1 is rather old. Could you please try with a more recent version, e.g. 0.10.3.
from vscode-node-debug.
@weinand Thanks for chiming in here. Yes, I am on 0.10.6 now and see the same behavior (breakpoints in tests are not hit).
Please let me know if I can provide any details on the problem to help with the investigation.
from vscode-node-debug.
+1
from vscode-node-debug.
@aides Since I'm not familiar with a Karma/Phantom setup, it would be great if you could help me reproducing this problem. Is there a repository sample that I can use? Thanks.
from vscode-node-debug.
@weinand thanks for coming back here. I've created a repo with a minimal set up for reproducing here https://github.com/aides/vscodekarma
After cloning, one should do
- npm install
- bower install
- open the folder in the VSCode,
- set breakpoint at line 9 in src/app/app.spec.js
- Hit F5 to start debugging
Expected: breakpoint is hit and I recall I definitely saw this working on pre v0.9.1
Actual: breakpoint is not hit
Notes: I've managed to find VSCode v0.8.0 and saw that breakpoint was not hit either and that is strange. I did not manage to find v0.7.0 installer for another check. If you could provide me with 0.7.0 installer or a link I could do more checks on my own.
Also, if you think that the case is not realistic, please let me know why it should not work as I would expect.
from vscode-node-debug.
@aides thanks for creating this setup for me.
I suspect that src/app/app.spec.js
is not running in debug mode. When I add a debugger;
statement in line 9, nothing happens. Normally this would result in a stop in the debugger (even if breakpoints are not working).
Could it be that the --debug-brk
option is not propagated to any forked node processes?
from vscode-node-debug.
@aides Yes, src/app/app.spec.js
is not running in debug mode, so there is no way that this could have ever worked in a previous version of VS Code. I've tried with 0.7.0, 0.8.0, and 0.9.0.
BTW you can find previous releases here:
https://github.com/Microsoft/vscode/wiki/Previous-Releases
from vscode-node-debug.
@aides if you find a way to pass the debug flag to the correct process (where src/app/app.spec.js
) please let me know and we could add this to our FAQ.
from vscode-node-debug.
Did anyone had any luck with debugging his/her karma unit tests? VSCode version 1.8.1, launch.json:
{
"type": "node",
"request": "launch",
"name": "Karma tests",
"cwd": "${workspaceRoot}",
"program": "${workspaceRoot}/node_modules/karma/bin/karma",
"args": [
"start",
"${workspaceRoot}/karma.conf.js"
]
}
karma.conf.js
// Karma configuration
// Generated on Wed Jul 01 2015 13:51:22 GMT+0200 (CEST)
'use strict';
module.exports = function (config) {
// retrieve main files from bower
var wiredep = require('wiredep');
var bowerFiles = wiredep({devDependencies: true}).js;
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine', 'angular-filesort'],
// sort app/**/*.js files
angularFilesort: {
whitelist: [
'app/!(bower_components)/**/*.js'
]
},
// list of files / patterns to load in the browser
files: bowerFiles.concat([
// other
'app/!(bower_components)/**/*.js',
// test
'test/karma/**/*.js',
// templates
'app/**/templates/*.html',
'app/**/views/*.html'
]),
// 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: {
'app/**/views/*.html': ['ng-html2js'],
'app/**/templates/*.html': ['ng-html2js']
},
// use template cache to avoid unexpected $http requests from ui-router
// https://github.com/angular-ui/ui-router/issues/212#issuecomment-69974072
ngHtml2JsPreprocessor: {
moduleName: 'ngHtml2Js',
stripPrefix: 'app/' // the path must be relative to the app.js
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// 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,
// 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: ['PhantomJS'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: true
});
};
VSCode internal debug console shows:
node --debug-brk=46381 --nolazy node_modules/karma/bin/karma start /Users/abcd/Projects/asdfasdf/karma.conf.js
Debugger listening on 127.0.0.1:46381
11 01 2017 15:07:48.218:INFO [karma]: Karma v1.3.0 server started at http://localhost:9876/
11 01 2017 15:07:48.220:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
11 01 2017 15:07:48.239:INFO [launcher]: Starting browser PhantomJS
11 01 2017 15:07:49.415:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket /#YgxnMDGmXeexRD1EAAAA with id 2028685
PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 0 of 1 SUCCESS (0 secs / 0 secs)
[1A[2KLOG: 'alalalallala'
PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 0 of 1 SUCCESS (0 secs / 0 secs)
[1A[2KPhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 1 of 1 SUCCESS (0 secs / 0.003 secs)
[1A[2KPhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 1 of 1 SUCCESS (0.004 secs / 0.003 secs)
test.spec.js:
'use strict';
describe('module: crmApp, controller: LoginCtrl, service: Requester, Settings', function () {
describe('Should login', function () {
it('should send login data to server and get response', function () {
console.log('alalalallala');
expect(1 + 2).toBe(3); // breakpoint set here, even debugger; doesn't stop it.
});
});
});
0 chance to debug.
from vscode-node-debug.
Were you able to get this working?
from vscode-node-debug.
Sadly, I did not. I still hope on one of the devs to appear here :)
from vscode-node-debug.
I'm not really familiar with Karma but the test runs in phantomJS, not in Node, right? So how could it be debugged with the node debugger, unless there's some way to run them in Node instead?
http://stackoverflow.com/questions/16660670/how-to-test-nodejs-backend-code-with-karma-testacular
from vscode-node-debug.
This is obviously a rather old thread, but you can just use chrome with the headless option. This won't spawn a browser window but will show output in your console terminal. Additionally, you can attach to the debug process in VS Code to get breakpoints.
from vscode-node-debug.
Using headless chrome yields different results than phantomjs.
But apparently you can configure karma to run PhantomJS in debug mode; in karma.conf:
customLaunchers: { PhantomDebug: { base: 'PhantomJS', debug: true } }
When running the tests with ng test --browsers=PhantomDebug
the terminal output points to a link that you can click:
04 10 2018 11:25:11.721:INFO [phantomjs.launcher]: Launch browser at
04 10 2018 11:25:11.722:INFO [phantomjs.launcher]: http://localhost:9000/webkit/inspector/inspector.html?page=2
This opens up a page with debugging abilities. It's a bit quirky and it crashed a lot (especially when trying to display vendor.js), but I guess it's better than nothing.
from vscode-node-debug.
Related Issues (20)
- Debug restart, breakpoint will automatically jump to unknown line HOT 4
- "legacy" is still the default for attach
- Local root property in nested config file HOT 1
- Debugging meteor with sourcemaps: package-name with colons crash discovery HOT 6
- Need to ensure that log folder exists HOT 1
- smartStep should only skip unmapped lines in files that have sourcemaps
- Simplify generated launch.json HOT 3
- Cannot embed node-debug in other module layouts HOT 1
- Releases do not contain vsix extention HOT 8
- Support showing numbers as hex HOT 1
- Unable to do npm i HOT 1
- Calculate name for attached processes HOT 1
- debug.node.autoAttach=0 results in high CPU on Windows HOT 2
- autoAttachChildProcesses looses uncaught exception output HOT 1
- Auto Attach not working in VsCode when debugging a simple node js application HOT 2
- Cannot view static variables when debuger is paused HOT 1
- SIGKILL sent instead of SIGINT on stop of Debug HOT 1
- Support Workspace Trust HOT 1
- Support virtual workspaces
- Auto attach fails when pid is greater than 6 digits. HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vscode-node-debug.