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

別のブラウザー（FirefoxとChrome）でAngular JavaScriptコードをデバッグする方法は？

1. Chrome

デバッグAngularJSのためにクロムを使用できAngularJS Batarangを。（プラグインに関する最近のレビューから、AngularJS Batarangはもうメンテナンスされていないようです。さまざまなバージョンのChromeでテストされていません）

説明とデモのリンクは次のとおりです。

Angular JS Batarangの紹介

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

このリンクを参照することもできます：ng-book：Debugging AngularJS

ng-inspectを使用して角度をデバッグすることもできます。

2. Firefox

以下のためのFirefoxの助けを借りて、Firebugのあなたは、コードをデバッグすることができます。

このFirefoxアドオンも使用してください：AngScope：Firefoxのアドオン（AngularJSチームによる公式の拡張ではありません）

3. AngularJSのデバッグ：リンクの確認：AngularJSのデバッグ

私見、最もイライラする経験は、視覚要素に関連する特定のスコープの値を取得/設定することから来ています。私は自分のコードだけでなく、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')、前者ではprototypically継承した値を考慮していません。以下のスニペットを使用して全体像を取得します（値を直接変更することはできませんが、$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、すべてを。

使用できる$ logもあります！それはあなたがそれを動作させたい方法であなたのコンソールを利用します！

コンソールがあなたに通常示す方法でエラー/警告/情報を示します！

これを使用> ドキュメント

質問への回答はありますが、ng-inspectorを見てみると興味深いかもしれません

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

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

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

残念ながら、ほとんどのアドオンとブラウザ拡張は値を表示しているだけですが、スコープ変数を編集したり、角度関数を実行したりすることはできません。ブラウザコンソール（すべてのブラウザ）で$ 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;

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

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

someFunction(){
  debugger;
}

ではconsole、ブラウザのWeb開発者向けツールのタブ、問題angular.reloadWithDebugInfo();

デバッグするページにアクセスするかリロードすると、ブラウザにデバッガが表示されます。

var rootEle = document.querySelector("html");
var ele = angular.element(rootEle); 

scope（） 要素でscope（）メソッドを使用して、要素（またはその親）から$ scopeをフェッチできます。

var scope = ele.scope();

インジェクター（）

var injector = ele.injector();

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

コードに「デバッガ」を追加してアプリをリロードすると、そこにブレークポイントが設定され、「ステップオーバー」または実行できます。

var service = {
user_id: null,
getCurrentUser: function() {
  debugger; // Set the debugger inside 
            // this function
  return service.user_id;
}

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

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

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

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

4. ページを更新。

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

Visual Studioコード（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を起動する必要があります。

• ウィンドウズ

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を起動します

もっと探す===>

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

おそらく、Angular Augury A Google Chrome Dev Tools拡張機能を使用して、Angular 2以降のアプリケーションをデバッグできます。