82648


例えばVueは、以下のようにして変数を書き換えて動作を確認できます。

[code]

        <!DOCTYPE html>
        <html lang="ja">
    
        <head>
            <meta charset="UTF-8">
            <script src="./node_modules/vue/dist/vue.js"></script>
            <title>vue-01-bind</title>
        </head>
    
        <body>
            <div id="example">
                <div>example-01 本文は二重中括弧 : {{ message }}</div>
            </div>
            <script>
                const example = new Vue({
                    el: '#example',
                    data: {
                        message: 'Hello Vue!'
                    },
                });
            </script>
        </body>
    
        </html>
    
[/code]

Chrome F12 > Console で以下を実行

[code]

    example.message = "change!!!";
    
[/code]

同様のことをAngularでやりたい場合、どうやって対象のコンポーネントインスタンスを取得すればいいでしょうか？

【環境・状況】  
Visual Studio Code 1.60.2 & 内蔵JS Debugger

[code]

    {
        "version": "0.2.0",
        "configurations": [
            {
                "type": "pwa-chrome",
                "request": "launch",
                "name": "Launch Chrome against localhost",
                "url": "http://localhost:4200",
                "webRoot": "${workspaceFolder}"
            }
        ]
    }
    
[/code]

Angular CLI: 12.2.6  
Node: 16.8.0 (Unsupported)  
Package Manager: npm 7.21.0  
OS: win32 x64  
ng serveされたhttp://localhost:4200/ 上のページ

【試したこと】

ng.getComponent($0); // nullが返ってくる  
ng.getOwningComponent($0); // nullが返ってくる


CC BY-SA 4.0
2021-09-23T06:45:14.610
82646
2021-09-23T07:12:14.660
2021-09-23T06:54:56.427
25396
25396
question
typescript google-chrome angular
デバッグ中のAngularを、コンソールから操作したい


自己解決しました。  
Elementsでコンポーネントタグを選択してから、以下で行けました。  
（例えば、app-rootタグや、router-outlet直後にいる個々のコンポーネントタグ）

[code]

    let cmp = ng.getComponent($0);
    
[/code]

また、Elementsで要素選択するのが面倒な場合は、タグさえ分かっていれば以下で可能でした。

[code]

    // これでもOK
    let cmp = ng.getComponent(document.getElementsByTagName('app-root')[0]);
    
[/code]


CC BY-SA 4.0
2021-09-23T07:06:49.557
82648
2021-09-23T07:12:14.660
2021-09-23T07:12:14.660
25396
25396
82646
answer