2

Not sure if this is the right place to post a question (if not, let me know). I'm new to Angular and i would like to somehow debug one of the external js files in my project with "Debugger for chrome" or any other way...

tools: visual studio code v1.13.1 node v6.10.3 angular cli v10.0.6

launch.json

{
"version": "0.2.0",
"configurations": [

    {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome against localhost",
        "url": "http://localhost:4200/",
        "webRoot": "${workspaceRoot}",
        "sourceMaps": true
    },
    {
        "type": "chrome",
        "request": "attach",
        "name": "Attach to Chrome",
        "port": 9222,
        "sourceMaps": true,
        "webRoot": "${workspaceRoot}"
    }
]

angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "debugging-test"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.css",
        "../node_modules/icheck/skins/square/aero.css",
        "styles.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/icheck/icheck.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

enter image description here

No problems with debugging ts files, or any code that i had written.

All the code of a needed file is presented in a single string, i guess it is bundled, that's the reason why i can't debug it.

I'm placing breakpoints, but when debugger runs they become grey with message "Breakpoint ignored because generated code not found (source map problem?)"

Is there a way how i can accomplish that? (using vs code, or in chrome browser does not matter)

In case of need I will provide all additional information.

Thanks in advance!

1

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.