Angular 11: How to debug the variables inside the html?

Question

The use case

I would like to debug the variables inside the html code of my Angular 11 web app.

I manage to get the ctx.ngForOf variable but that all I can do.

Something is missing in my procedure but I can't find what is missing.

Thank you for the time you will invest in answering to this question

The tools

I am using

• Visual Studio Code vscode
• Angular 11

What did I try?

• I have found that the variable ctx contained ngForOf which contains the data retrieved from a web services (20 items).

ctx.ngForOf

    { 
        "adult": false,
        "backdrop_path": "/pcDc2WJAYGJTTvRSEIpRZwM3Ola.jpg",
        "genre_ids": [
            28,
            12,
            14,
            878
        ],
        "id": 791373,
        "original_language": "en",
        "original_title": "Zack Snyder's Justice League",
        "overview": "Determined to ensure Superman's ultimate sacrifice was not in vain, Bruce Wayne aligns forces with Diana Prince with plans to recruit a team of metahumans to protect the world from an approaching threat of catastrophic proportions.",
        "popularity": 7665.745,
        "poster_path": "/tnAuB8q5vv7Ax9UAEje5Xi4BXik.jpg",
        "release_date": "2021-03-18",
        "title": "Zack Snyder's Justice League",
        "video": false,
        "vote_average": 8.6,
        "vote_count": 4415
    },
    ...

A screenshot of the debug into the browser

Answer 1

You can debug the variables inside your HTML using the debug API:

• right click on the element of interest and click on 'Inspect'
• in the console type ng.getOwningComponent($0)

This logs out the component that the element belongs with all properties and methods.

Here you can change the properties in the console and see the effects in the HTML, for example if your component has a property called name, you can change it:

• ng.getOwningComponent($0).name = 'New Name'
• to trigger change detection you type ng.applyChanges(ng.getOwningComponent($0))

For more details here is a link to the API in the official Angular (v9+) docs.

(EDIT)

Here are some helpful shortcuts to type in the browser console:

$state/$scope/$context: Element debug info

$apply/$applyChanges(): Trigger change detection cycle

Answer 2

As Angular docs says:

Converts a value into its JSON-format representation. Useful for debugging.

So use a json pipe to know the content of html variable:

HTML:

<p *ngIf="movies.results">Value of movies.results {{ movies.results| json }} </p>

UPDATE:

There is no need to install additional extensions to Chrome or Visual Studio Code. What you need to do:

1. Run your application by npm command. E.g. npm start. Under the hood TypeScript compiler will create mapping files
2. Open Chrome Developer Tools and set breakpoint in yourComponent.ts file. There is a great tutorial about how to debug JS in Chrome by Google engineers.
3. If you want to see the content of HTML template, then use json pipe

So TypeScript file can be debugged in Chrome Developer Tools, HTML template can be debugged by json pipe.

Answer 3

The best way if you want to Debug the variable in the HTML file is the json pipe in the angular. let me explain more :

Imagine that you have a array of objects in your ts file like this :

   const students = [
     {name : "John" , age : 21},
     {name : "Sarah" , age : 28},
     {name : "Rose" , age : 25},
    ];

If you want to loop through the array in the HTML file you must use *ngFor and iterate through the array : 

 <span *ngFor="let item of students">
  <span>
  {{item.age | json}}
  </span>
 </span>

whit this technique, you are able to debug the variable in the HTML file. for more info please read this link