0

I currently have no support for debugging third-party libraries; that is to say I cannot debug the source code for the third-party libraries although I can debug my application's own source code.

Can someone please advise how to configure my environment in order to debug, say RxJS (https://github.com/ReactiveX/RxJS)?

I use the latest angular-cli and my package.json looks like that:

{
  "name": "bignibou-client",
  "version": "0.0.0",
  "scripts": {
    "start": "ng serve",
    "lint": "ng lint",
    "build": "ng build",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "4.0.0-rc.5",
    "@angular/compiler": "4.0.0-rc.5",
    "@angular/core": "4.0.0-rc.5",
    "@angular/forms": "4.0.0-rc.5",
    "@angular/http": "4.0.0-rc.5",
    "@angular/platform-browser": "4.0.0-rc.5",
    "@angular/platform-browser-dynamic": "4.0.0-rc.5",
    "@angular/router": "4.0.0-rc.5",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.21",
    "@ngrx/core": "^1.2.0",
    "@ngrx/effects": "^2.0.0",
    "@ngrx/router-store": "^1.1.0",
    "@ngrx/store": "^2.2.1",
    "@ngrx/store-devtools": "^3.2.2",
    "@ngrx/store-log-monitor": "^3.0.2",
    "angular2-moment": "^1.2.0",
    "bootstrap": "4.0.0-alpha.6",
    "core-js": "2.4.1",
    "moment": "^2.17.0",
    "ng2-translate": "4.0.1",
    "ramda": "^0.23.0",
    "reselect": "^2.5.4",
    "rxjs": "^5.2.0",
    "zone.js": "0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0-rc.4",
    "@angular/compiler-cli": "4.0.0-rc.5",
    "@types/jasmine": "^2.5.41",
    "@types/node": "^7.0.4",
    "@types/protractor": "^1.5.16",
    "chai": "^3.5.0",
    "codelyzer": "2.0.0",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "3.2.0",
    "karma": "^1.5.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.3",
    "karma-jasmine": "^1.0.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "ngrx-store-freeze": "^0.1.6",
    "portfinder": "1.0.13",
    "protractor": "5.0.0",
    "ts-node": "2.0.0",
    "tslint": "4.5.1",
    "typescript": "^2.2.1",
    "typings": "^1.3.2",
    "webdriver-manager": "12.0.1"
  }
}
balteo
  • 23,602
  • 63
  • 219
  • 412
  • 1
    What exactly do you want to do? Set brake points? – Sebastian Sebald Mar 24 '17 at 07:23
  • @SebastianSebald: Yes exactly: setting breakpoints. – balteo Mar 24 '17 at 07:25
  • 1
    I think there is no straight forward solution for this sadly. If you use vscode, you can check out https://github.com/Microsoft/vscode-chrome-debug The issue with 3rd party modules is that you most likely will use their transpiled code. Which means that you have to add breakpoints in the `.js` file rather than the `.ts` file. This is true for `RxJS` at least. – Sebastian Sebald Mar 24 '17 at 07:56
  • Thanks for your comment. I use IntelliJ and not visual studio. – balteo Mar 24 '17 at 08:04
  • @SebastianSebald I would have thought this issue was mainly related to configuring sourcemaps and ide-independent. I might be wrong... – balteo Mar 24 '17 at 11:10
  • Yes and no. If the sourcemaps work correctly + depending on your webpack configuration, you can just open Chrome's dev tools and search for the line you're looking for. But this is often not the case. I posted the link to the VSCode plugin just because it is easier to find the correct lines :) – Sebastian Sebald Mar 24 '17 at 11:35
  • Umm. You say *if sourcemaps work correctly*: that's too vague. I am specifically trying to get sourcemaps to work correctly... But for that I need to have the source code for the 3rd party libraries available. That's the crux of my question actually... Can someone please assist me in setting up npm to do that? – balteo Mar 24 '17 at 12:39

0 Answers0