web-dev-qa-db-ja.com

Angular JavaScriptコードをデバッグする方法

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

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

debugginggoogle-chromefirefoxangularjsbrowser
102
AskQuestion

1。 Chrome

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

これが説明とデモのためのリンクです。

Angular JS Batarangの紹介

ここからクロムプラグインをダウンロードしてください： デバッグAngularJS用のクロムプラグイン

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

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

2。 Firefox

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

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

3。 AngularJSのデバッグ：リンクを確認してください。 Debugging AngularJS

63
Vaibhav Jain

私見、最もイライラする経験は、視覚的要素に関連する特定のスコープの値を取得/設定することから来ます。私は自分のコードだけでなく、angular.js自体にも多くのブレークポイントを作成しましたが、時にはそれが単に最も効果的な方法ではありません。以下のメソッドは非常に強力ですが、実際にプロダクションコードで使用する場合は間違いなく悪い方法であると考えられているので、それらを賢く使用してください。

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

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

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

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

$ 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、そしてすべてをチェックすることができます。

32
Osbert Ngok

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

あなたのコンソールがあなたに普通に見せる方法でエラー/警告/情報を示しています！

これを使用してください> Document

13
Ali RAN

質問に答えているにもかかわらず、 ng-inspector を見てみると面白いかもしれません。

10
Iker Aguayo

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

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

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

7
Akash

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

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

7
Iman Sedighi

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

someFunction(){
  debugger;
}

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

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

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

scope（）要素に対してscope（）メソッドを使うことで、要素（またはその親）から$ scopeを取得することができます。

var scope = ele.scope();

injector（）

var injector = ele.injector();

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

3
zloctb

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

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

  2. ctrl + Pを使ってデバッグしたいファイルを開き、ファイル名を検索します。

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

  4. ページを更新。

あなたがクロムプラグインを使用して参照することができるデバッグのために利用可能なプラグインがたくさんあります Debug Angular "Debugger for chrome"プラグインを使用するアプリケーション

2
Dharmaraj Kavatagi

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

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

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を起動する必要があります。

  • Windows

Chromeショートカットを右クリックし、プロパティを選択します。 "target"フィールドに--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を起動します。

さらに詳しく===>

1
Ze Rubeus

多分あなたは Angular Augury をデバッグするためのGoogle Chrome Dev Tools拡張機能Angular 2以上のアプリケーションを使うことができます。

0
aligokayduman

アドオンはもう機能しないので、私が見つけたツールの中で最も有用なものは、Visual Studio/IEを使用することです。JSにブレークポイントを設定し、その方法でデータを調べることができるからです。もちろん、ChromeとFirefoxには一般的にはるかに優れた開発ツールがあります。また、古き良きconsole.log（）がとても役に立ちました！

0
Sara Inés Calderón