且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

Angular页面调试一个有用的小技巧 - normalizeDebugBindingName和normalizeDebugBindingValue - [object Object]

更新时间:2022-09-03 11:35:13

在开发模式下渲染出的Angular页面包含了很多形如下图ng-reflect-的html属性,很多时候其值都为[object Object].

如果处于调试目的,需要在Chrome开发者工具里观察这些值的具体内容,可以采取本文介绍的一个小技巧:Angular页面调试一个有用的小技巧 - normalizeDebugBindingName和normalizeDebugBindingValue - [object Object]在下列两个函数里设置断点:

  • 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) => '-' + m[1].toLowerCase());
}
function normalizeDebugBindingValue(value) {
    try {
        // Limit the size of the value as otherwise the DOM just gets polluted.
        return value != null ? value.toString().slice(0, 30) : value;
    }
    catch (e) {
        return '[ERROR] Exception while trying to serialize the value';
    }
}

Angular页面调试一个有用的小技巧 - normalizeDebugBindingName和normalizeDebugBindingValue - [object Object]