Show angular (reactive) forms field name for debugging purpose

ng-debug (reactive) forms field names

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = [ // credits https://www.w3schools.com/css/css_tooltip.asp
    '.debug-tooltip {',
        'position: relative;',
        'display: inline-block;',
        'border-bottom: 1px dotted black;',
    '}',
    '.debug-tooltiptext {',
        'visibility: visible;',
        'width: 300px;',
        'background-color: black;',
        'color: #fff;',
        'text-align: center;',
        'border-radius: 6px;',
        'padding: 5px 0;',
        'position: absolute;',
        'z-index: 1;',
    '}',
    '.debug-transparency .debug-tooltiptext {',
        'opacity: 0.4;',
    '}',
    '.debug-transparency .debug-tooltiptext:hover {',
        'opacity: 1.0;',
        'z-index: 2;',
    '}',
].join('');
document.getElementsByTagName('head')[0].appendChild(style);
var insertAfter = (el, referenceNode) => referenceNode.parentNode.insertBefore(el, referenceNode.nextSibling);
var isHiddenInput = (el) => el.tagName.toLowerCase() === 'input' && el.getAttribute('type') === 'hidden';
var tooltipped = [];
var showTooltip = (el, nameAttr, transparency) => {
    let div = document.createElement('div');
    let name = el.getAttribute(nameAttr);
    if (name === null) return;
    div.className = 'debug-tooltip' + (transparency ? ' debug-transparency' : '');
    div.innerHTML = '<span class="debug-tooltiptext">' + name + '</span>';
    insertAfter(div, el);
    tooltipped.push(name);
};
['[ng-reflect-name]||ng-reflect-name||false', '[formcontrolname]||formcontrolname||false', 'input||name||true'].forEach(sel => {
    let selector = sel.split('||')[0];
    let attrName = sel.split('||')[1];
    let transparency = sel.split('||')[2] == 'true';
    document.querySelectorAll(selector).forEach((el, k) => {
        if (isHiddenInput(el)) return;
        if (tooltipped.indexOf(el.name) < 0) {
            showTooltip(el, attrName, transparency);
        }
    });
});
var debugTooltipHide = () => document.querySelectorAll('.debug-tooltiptext').forEach(t => t.style.visibility='hidden');
var debugTooltipShow = () => document.querySelectorAll('.debug-tooltiptext').forEach(t => t.style.visibility='visible');