在開發模式下渲染出的Angular頁面包含了很多形如下圖ng-reflect-的html屬性，很多時候其值都為[object Object].

如果處于調試目的，需要在Chrome開發者工具里觀察這些值的具體內容，可以采取本文介紹的一個小技巧：

在下列兩個函數里設置斷點：

• normalizeDebugBindingName
• normalizeDebugBindingValue

function normalizeDebugBindingName(name) {// Attribute names with `$` (eg `x-y$`) are valid per spec, but unsupported by some browsersname = 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';} }

運行時，我們就可以在調試器里觀察到變量的具體值了：

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

總結

以上是生活随笔為你收集整理的Angular页面调试一个有用的小技巧 - normalizeDebugBindingName和normalizeDebugBindingValue - [object Object]的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。