Angular pages rendered in development mode contain a number of HTML attributes like the one shown in Figure ng-reflect-, most often with a value of [Object Object].

If you need to observe these values in the Chrome Developer Tools for debugging purposes, you can use one of the tips described in this article:

Set breakpoints in the following two functions:

  • normalizeDebugBindingName
  • normalizeDebugBindingValue
function normalizeDebugBindingName(name) {
    // Attribute names with `$` (eg `x-y$`) are valid per spec, but unsupported by some browsers
    name = camelCaseToDashCase(name.replace(/[$@]/g.'_'));
    return `ng-reflect-${name}`;
}
const CAMEL_CASE_REGEXP = /([A-Z])/g;
function camelCaseToDashCase(input) {
    return input.replace(CAMEL_CASE_REGEXP, (. m) = > The '-' + m[1].toLowerCase());
}
function normalizeDebugBindingValue(value) {
    try {
        // Limit the size of the value as otherwise the DOM just gets polluted.
        returnvalue ! =null ? value.toString().slice(0.30) : value;
    }
    catch (e) {
        return '[ERROR] Exception while trying to serialize the value'; }}Copy the code

At runtime, we can observe the value of the variable in the debugger:

For more of Jerry’s original articles, please follow the public account “Wang Zixi “: