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

在开发模式下渲染出的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]相关推荐

❤️❤️❤️帮好朋友度过情人节，好友直说女友真好哄...每天一个脱单小技巧，赶快收藏起来吧❤️❤️❤️
我用这个让兄弟女朋友死心塌地-每天一个脱单小技巧! 每天一个脱单小技巧,收藏起来吧: 我用这个让兄弟女朋友死心塌地...每天一个脱单小技巧! 一,好友求助:难对付的女友二,锦囊相助:熬夜淦出新东西 ...
每日一个 ChatGPT 使用小技巧系列之2 - 用 ChatGPT 研读 SAP ABAP BAPI 的实现源代码
本系列之前的文章: 与其整天担心 AI 会取代程序员,不如先让 AI 帮助自己变得更强大每日一个 ChatGPT 使用小技巧系列之1 - 给出提纲或者素材,让 ChatGPT 帮你写作正好昨天有朋 ...
影视解说短视频怎么配音？只需一个简单的小技巧，配得又快又好
影视解说短视频怎么配音?只需一个简单的小技巧,配得又快又好很多做影视解说短视频的小伙伴们在做配音的时候都会遇到一个难题,那就是自己配音的话,很难把握节奏,而且需要花费的时间也比较长.毕竟我们自己配音 ...
6行代码，带你学会Python最有用的小技巧【收藏不后悔】
这篇博文主要介绍了Python有关的代码片段,通过简洁易懂的代码,给一些基础不是特别好的朋友提供便利,有利于学习,仅提供了几种小技巧的方法,希望对你们有帮助. 一.将 Python 3 和 pip 3 ...
一起谈.NET技术，Visual Studio自定义调试窗体两个小技巧
本文翻译:Few Tips on Customizing Debugging Window View in Visual Studio . 使用DebuggerBrowsable特性可以自定义调试窗体 ...
卧槽！微信可以改彩色昵称了！又get一个撩妹小技巧 ~~
点击上方蓝字设为星标每天一起成长! 今天给大家分享个超级好玩的微信小技巧,真可谓是装逼必备神器! 众所周知,在微信中,每个人的昵称都是黑色字体显示的,无论是字母还是文字,都被统一了颜色,有些小伙伴就 ...
每天一个PS/PR小技巧（原理+实践）
PS小技巧 PS是由Adobe Systems开发和发行的图像处理软件.本文的特色在于快速上手和制作一些生活中会常用的功能,并且解释这些功能的具体含义. 每天一个PS技巧(原理+实践)--制作熊猫人表 ...
html5页面滑动设计,HTML5设计小技巧有哪些
HTML5设计小技巧有哪些你是否知道6个鲜为人知的HTML 5设计小技巧,就跟随百分网小编一起去了解下吧,想了解更多相关信息请持续关注我们应届毕业生考试网! 慎用向右滑动操作.慎用横屏展示效果.按钮 ...
浏览器自动化的一些体会8 访问angular页面的一个问题
发现浏览器自动化有一个重要方面没有提及,即所谓的无页面浏览器,不过最近没有需求,不想尝试,先记上一笔,以后有需求时,可以有个思路. 大约一两个月前(现在比较懒散,时间不知不觉过去,连今天是几号有时候都 ...

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

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

最新文章

热门文章