web-dev-qa-db-ja.com

Visual Studio CodeでKarmaテストをデバッグする方法

VS CodeでKarmaテストをデバッグしたいのですが、方法がわかりませんでした。それを行う方法はありますか、別のIDE（WebStorm）を使用する必要がありますか？

visual-studiokarma-runnervisual-studio-code
26
geo

試して

{
    "name": "jasmine",
    "type": "node",
    "request": "launch",
    "program": "${workspaceRoot}/node_modules/jasmine/bin/jasmine.js",
    "stopOnEntry": false,
    "args": [
        "JASMINE_CONFIG_PATH=${workspaceRoot}/spec/support/jasmine.json"
    ],
    "cwd": "${workspaceRoot}",
    "runtimeArgs": [
        "--nolazy"
    ],
    "env": {
        "NODE_ENV": "development"
    }
}
1
Ivan Boombastik

デバッガーをChromeインスタンスに接続することによりKarmaをデバッグできます。launch.jsonこのような設定：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach Karma Chrome",
            "address": "localhost",
            "port": 9333,
            "pathMapping": {
                "/": "${workspaceRoot}/",
                "/base/": "${workspaceRoot}/"
            }
        }
    ]
}

ただし、karma.conf.js config、Chromeインスタンスを開発ツールが9333 port、次のように：

browsers: [
  'ChromeDebugging'
],

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

このようなセットアップを使用すると、カルマサーバーを（キャプチャされたブラウザーで）実行し、Visual Studioでデバッグを開始できます。

詳細については、 Visual Studio CodeでKarmaをデバッグする のチュートリアルを作成してください。

30
Marek Lewandowski

Angular CLI 1.7.4：次の手順により、hello world AngularアプリケーションをVisual Studio Codeでデバッグできました。

  1. 新しいHelloWorldプロジェクトを生成します。

    ng new HelloWorld

  2. Visual Studio Codeでプロジェクトを開きます

    code HelloWorld

  3. 新しいデバッグ構成を作成します。

    enter image description hereenter image description here

  4. .vscode/launch.jsonファイルが生成され、開かれます。その内容を次のものに置き換えます。

{
    // Use IntelliSense to learn about possible 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": "launch",
            "name": "Karma Tests",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "url": "http://localhost:9876/debug.html",
            // "runtimeArgs": [
            //     "--headless"
            // ],
            "pathMapping": {
                "/": "${workspaceRoot}",
                "/base/": "${workspaceRoot}/"
            },
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/*",
                "webpack:///src/*": "${webRoot}/*",
                "webpack:///*": "*",
                "webpack:///./~/*": "${webRoot}/node_modules/*",
                "meteor://????app/*": "${webRoot}/*"
            }
        }
    ]
}

  1. 開いた karma.conf.jsおよび次の変更を実行します。

    enter image description here

  2. ターミナルを開き、カルマテストを開始します。

    ng test

  3. 開いた app.component.spec.tsおよびブレークポイントを設定します。

    enter image description here

  4. デバッグメニューで[Karma Tests]を選択します。

    enter image description here

  5. 押す F5デバッグを開始します。 VSCodeはブレークポイントで停止する必要があります。

    enter image description here

18
Awsed

次に、より単純な構成を示します（launch.json）：

{
    "type": "chrome",
    "request": "launch",
    "name": "Test",
    "sourceMaps": true,
    "webRoot": "${workspaceRoot}/Test",
    "url": "http://localhost:9876/debug.html",
    "runtimeArgs": [
        "--headless"
    ]
}

重要：

  • webRootをKarmaがテストを提供しているフォルダーに変更します。
  • これは、Karmaがポート9876で実行されていることを前提としています。実行されていない場合は、urlを適宜変更します。

この構成は、いくつかの理由により簡単です。

  • KarmaのUIで[デバッグ]ボタンを押したり、デバッガーをアタッチした後にページを更新したりする必要はありません。
  • Karma設定にカスタムランチャーを追加する必要はありません。 singleRun: falseがあることを確認する必要があります。 VS Codeは独自のブラウザーを起動するため（ヘッドレスモードで表示されないため）、browsers: []を設定することもできます。
  • VSコードでデバッグを実行できるため、ブラウザーを表示する必要がなくなったため、ヘッドレスモードで実行しています。
  • デバッガーを起動する前にKarmaを起動する必要があることに注意してください。 Karmaを自動的に開始するpreLaunchTaskを追加することにより、この構成を改善できます。 バックグラウンドタスク として設定する必要があります。
4
AJ Richardson

angularカルマテストのデバッグを探している人は、Microsoftの vscode-recipe を参照してください。

0
Matt Harvey

@Awsedの優れた説明に従いました[ありがとうございます！]、いくつかの注目すべき注意事項があり、物事を機能させることができました。

VSCodeには、specファイルのブレークポイント行の追跡に問題があるバグがあるようです。特にコードを変更した場合、VSCodeはブレークポイントがどの行にあるかについて混乱しているように見えるため、正しいセットアップを行ってもブレークポイントにヒットしませんでした。私はこれに対する救済策を見つけることができませんでした（2回再起動し、VSCodeを複数回再起動した後でも）。しばらく変更されておらず、ブレークポイントを正常にヒットすることができたテストファイルに移動することで、これを発見することができました。そのため、問題が発生しているファイルのページの別の場所にブレークポイントを移動し、（最終的に）ブレークポイントにヒットする場所を見つけることができました。

また、「停止」ボタンはプロセスを強制終了せず、ヘッドレスであるためタスクマネージャーで見つけることができないため、Chromeヘッドレスを実行することはお勧めしません。代わりにそれを殺すコマンド（例 https://superuser.com/questions/1288388/how-can-i-kill-all-headless-chrome-instances-from-the-command-line-on- windows ）;そうしないと、再度実行することはできません。

0
MapLion