This is what worked for me with:

• Angular 9.0.6 + Visual Studio Code 1.43.2
• Angular 8.2.13 + Visual Studio Code 1.39.2
• Angular 7, Angular CLI 1.0.* and Chrome on Windows 7.

Change configuration files

In your project root directory open karma.conf.js. Right after singleRun: false add , followed by this section:

    customLaunchers: {
      ChromeDebug: {
        base: 'Chrome',
        flags: [ '--remote-debugging-port=9333' ]
      }
    }

Add configuration to .vscode/launch.json.

• For versions 8.* - 9.* (note "pathMapping section!):

  {
    "type": "chrome",
    "request": "attach",
    "name": "Unit tests",
    "address": "localhost",
    "port": 9333,
    "sourceMaps": true,
    "webRoot": "${workspaceFolder}",
    "pathMapping": {
      "/_karma_webpack_": "${workspaceFolder}"
    }
  },
  

• For version 7.*:

  {
    "type": "chrome",
    "request": "attach",
    "name": "Unit tests",
    "address": "localhost",
    "port": 9333,
    "sourceMaps": true,
    "webRoot": "${workspaceFolder}"
  },
  

Start debugging

1. Run ng test --browsers ChromeDebug

2. Wait for Chrome browser to start. You will see something like this in command line:

   01 06 2017 16:07:29.276:INFO [launcher]: Launching browser ChromeDebug with unlimited concurrency
   

3. Set the breakpoint in one of your .spec.ts files.

4. In Visual Studio Code choose Unit tests debug configuration and hit F5 ("Start Debugging" button).

5. Press Shift+Ctrl+F5 or refresh the Chrome window to rerun the tests and hit the breakpoint.

For convenience

You can also modify your package.json and add a new script:

"test-debug": "ng test --browsers ChromeDebug",

Then next time you want to start ng test with debugging just run:

npm run test-debug

References:

• Debugging Jasmine Unit tests running with Karma runner in VS Code
• Debugging Karma tests with VSCode
• Angular CLI 8.1.3 Debug Unit Tests configuration - Unverified breakpoint
• microsoft/vscode-recipes - Chrome Debugging with Angular CLI

I've decorated $log.debug(...) to change the loglevel at runtime.

Looking at Enhancing AngularJS Logging using Decorators, I got the idea for the following code snippet:

(function () {
    var KEY = "debugEnabled";

    angular.module("service.config", [])
        .config(function ($provide, $logProvider) {
            // AngularJS has debug enabled by default, but just to be sure...
            $logProvider.debugEnabled(true);

            // Disabling localStorageDebug (if not set)
            if (localStorage.getItem(KEY) === null) {
                localStorage.setItem(KEY, "false");
            }

            // add a check for localStorageDebug before actually calling $log.debug(...)
            $provide.decorator('$log', function ($delegate) {
                var debugFunction = $delegate.debug;

                $delegate.debug = function () {
                    if (localStorage.getItem(KEY) !== "false") {
                        debugFunction.apply(undefined, arguments)
                    }
                };

                return $delegate;
            });
        })
        .service("ConfigService", function ($log) {
            this.debugEnabled = function (flag) {
                $log.info("Setting debugEnabled to " + flag);
                localStorage.setItem(KEY, flag.toString());
            }
        });
})();

// exposing ConfigService to global scope (be aware of possible clashes!),
// therefore making it easily accessible from the console
var cfg;
window.onload = function () {
    cfg = angular.element(document.body).injector().get("ConfigService");
};

The decorator only forwards calls to $log.debug if debugEnabled is set to true in your local storage - the value can be changed through the ConfigService service.

Now you can just call ConfigService#debugEnabled with the value you've loaded from your server to change the loglevel.

Thanks to the last four lines, you can also simply call cfg.debugEnabled(true) on your console to enable debug mode at runtime.

If you don't like to type into the console, you could avoid the global cfg and use javascript bookmarks (or elements on your website) to change the log level.

A general misconception is console.log will log the things in your browser. That is incorrect. When you run your tests, along with the results of tests you should see the console.log() values also in the terminal. Browser console is completely different from this.

A general example:

it('get name as John', function(){
        element(by.id('name')).getText().then(function(value){
        console.log(value);
    })
});

Results in Terminal:

John
get name as John - pass

Hope it helps.