106

Angular JavaScript を使用して概念実証に取り組んでいます。

さまざまなブラウザー (Firefox および Chrome) で Angular JavaScript コードをデバッグする方法は?

4

13 に答える 13

69

1.クロム

Chromeで AngularJS をデバッグするには、 AngularJS Batarangを使用できます。(プラグインに関する最近のレビューによると、AngularJS Batarang はメンテナンスされていないようです。さまざまなバージョンの Chrome でテストされていますが、動作しません。)

説明とデモのリンクは次のとおりです: Angular JS Batarang の紹介

ここから Chrome プラグインをダウンロードします: AngularJS をデバッグするための Chrome プラグイン

angular のデバッグに ng-inspect を使用することもできます。

2. ファイアフォックス

Firefoxの場合、Firebugを使用してコードをデバッグできます。

この Firefox アドオンも使用してください: AngScope: Add-ons for Firefox (AngularJS チームによる公式の拡張機能ではありません)

3. AngularJS のデバッグ

リンクを確認してください: AngularJS のデバッグ

于 2013-09-13T08:52:59.160 に答える
37

私見、最も苛立たしい経験は、視覚要素に関連する特定のスコープの値を取得/設定することです。私は自分のコードだけでなく angular.js 自体にも多くのブレークポイントを設定しましたが、それが最も効果的な方法ではない場合もあります。以下のメソッドは非常に強力ですが、実際に製品コードで使用する場合は間違いなく悪い習慣と見なされるため、賢明に使用してください。

ビジュアル要素からコンソールで参照を取得する

IE 以外の多くのブラウザーでは、要素を右クリックして [要素の検査] をクリックすると、要素を選択できます。または、たとえば、Chrome の [要素] タブで任意の要素をクリックすることもできます。$0最後に選択された要素は、コンソールの変数に保存されます。

要素にリンクされたスコープを取得する

分離スコープを作成するディレクティブが存在するかどうかに応じて、angular.element($0).scope()またはangular.element($0).isolateScope()( $($0).scope()$ が有効な場合に使用) によってスコープを取得できます。これはまさに、Batarang の最新バージョンを使用している場合に得られるものです。値を直接変更する場合は、 を使用scope.$digest()して変更を UI に反映することを忘れないでください。

$eval は悪です

必ずしもデバッグ用ではありません。scope.$eval(expression)式が期待値を持っているかどうかをすばやく確認したい場合に非常に便利です。

スコープの不足しているプロトタイプ メンバー

scope.blaとの違いscope.$eval('bla')は、前者はプロトタイプとして継承された値を考慮していないことです。以下のスニペットを使用して全体像を把握してください (値を直接変更することはできませんが、$evalとにかく使用できます!)

scopeCopy = function (scope) {
    var a = {}; 
    for (x in scope){ 
        if (scope.hasOwnProperty(x) && 
            x.substring(0,1) !== '$' && 
            x !== 'this') {
            a[x] = angular.copy(scope[x])
        }
    }
    return a
};

scopeEval = function (scope) {
    if (scope.$parent === null) {
        return hoho(scope)
    } else {
        return angular.extend({}, haha(scope.$parent), hoho(scope))
    }
};

と一緒に使用してくださいscopeEval($($0).scope())。

コントローラーはどこにありますか?

ngModelディレクティブを記述しているときに、値を監視したい場合があります。を使用すると、 、、、およびすべて$($0).controller('ngModel')を確認できます。$formatters$parsers$modelValue$viewValue $render

于 2015-03-23T11:23:43.777 に答える
10

質問には答えていますが、ng-inspectorを見るのは興味深いかもしれません

于 2015-01-20T09:28:34.657 に答える
7

残念ながら、ほとんどのアドオンとブラウザー拡張機能は値を表示するだけですが、スコープ変数を編集したり、Angular 関数を実行したりすることはできません。ブラウザー コンソール (すべてのブラウザー) で $scope 変数を変更する場合は、jquery を使用できます。AngularJS の前に jQuery をロードすると、angular.element に jQuery セレクターを渡すことができます。したがって、コントローラーのスコープを調べることができます

angular.element('[ng-controller="name of your controller"]').scope()

例: $scope 変数の値を変更し、ブラウザーで結果を確認してから、ブラウザー コンソールに次のように入力する必要があります。

angular.element('[ng-controller="mycontroller"]').scope().var1 = "New Value";
angular.element('[ng-controller="mycontroller"]').scope().$apply();

ブラウザですぐに変更を確認できます。$apply() を使用した理由は次のとおりです: 外部の角度コンテキストから更新されたスコープ変数はバインディングを更新しません。 を使用してスコープの値を更新した後、ダイジェスト サイクルを実行する必要がありますscope.$apply()。

$scope 変数の値を監視するには、その変数を呼び出すだけです。

例: Chrome または Firefox の Web コンソールで $scope.var1 の値を確認するには、次のように入力します。

angular.element('[ng-controller="mycontroller"]').scope().var1;

結果はすぐにコンソールに表示されます。

于 2015-12-08T05:55:30.477 に答える
7

ng-inspector を試してください。Web サイトhttp://ng-inspector.org/から Firefox のアドオンをダウンロードします。Firefox のアドオン メニューでは使用できません。

http://ng-inspector.org/ - ウェブサイト

http://ng-inspector.org/ng-inspector.xpi - Firefox アドオン </p>

于 2015-08-22T12:38:07.667 に答える
5

使用する場所に呼び出しを追加debuggerします。

someFunction(){
  debugger;
}

consoleブラウザーの Web 開発者ツールのタブで、発行します。angular.reloadWithDebugInfo();

デバッグするページにアクセスするか再読み込みして、ブラウザーにデバッガーが表示されることを確認します。

于 2016-11-08T17:08:44.263 に答える
3 
var rootEle = document.querySelector("html");
var ele = angular.element(rootEle);

要素でscope () メソッドを使用して、要素 (またはその親) から $scope を取得できます。

var scope = ele.scope();

インジェクター()

var injector = ele.injector();

このインジェクターを使用すると、サービス、他のコントローラー、または他のオブジェクトなど、アプリ内の任意の Angular オブジェクトをインスタンス化できます。

于 2015-09-07T09:56:01.590 に答える
2

開発者ツールに組み込まれているブラウザーを使用してデバッグできます。

  1. ブラウザで開発者ツールを開き、ソースタブに移動します。

  2. Ctrl+P を使用してデバッグするファイルを開き、ファイル名を検索します

  3. コードの左側をクリックして行にブレークポイントを追加します。

  4. ページを更新。

クロムプラグインを使用して参照できるデバッグに利用できるプラグインがたくさんあります「クロム用デバッガー」プラグインを使用してAngularアプリケーションをデバッグする

于 2018-07-19T19:05:47.693 に答える
1

Visual Studio Code (Visual Studio ではない) の場合 Ctrl+ Shift+P

検索バーに Debugger for Chrome と入力し、インストールして有効にします。

launch.jsonファイルに次の構成を追加します。

{
    "version": "0.1.0",
    "configurations": [
        {
            "name": "Launch localhost with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost/mypage.html",
            "webRoot": "${workspaceRoot}/app/files",
            "sourceMaps": true
        },
        {
            "name": "Launch index.html (without sourcemaps)",
            "type": "chrome",
            "request": "launch",
            "file": "${workspaceRoot}/index.html"
        },
    ]
}

拡張機能を接続するには、リモート デバッグを有効にして Chrome を起動する必要があります。

  • ウィンドウズ

Chrome ショートカットを右クリックし、プロパティを選択します。「ターゲット」フィールドに --remote-debugging-port=9222 を追加するか、コマンド プロンプトで /chrome.exe --remote-debugging-port=9222 を実行します。

  • OS X

ターミナルで、/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 を実行します。

  • Linux

ターミナルで google-chrome --remote-debugging-port=9222 を起動します

もっと見る ===>

于 2016-07-30T14:13:28.653 に答える
0

アドオンが機能しなくなったため、私が見つけた最も役立つツール セットは Visual Studio/IE を使用することです。これは、JS にブレークポイントを設定し、その方法でデータを検査できるためです。もちろん、Chrome と Firefox には、一般的にはるかに優れた開発ツールがあります。また、古き良き console.log() がとても役に立ちました!

于 2016-02-02T20:54:14.953 に答える