Angular debugger

README.md

Descritpion:

An alternative to debug your Angular Component.

Installation

There are two ways of using this.

1. Paste this code in the browser console
2. Use a Javascript Compresser to minify it into a one-liner. Paste the code into the URL-part of a bookmark (javascript: code)

How to use

• The first time you run the code, it'll ask you to enter the component name. Then it will save the component name in localStorage
• To update the component, you need to update the selector in localStorage
• type appComponent followed by the state you want to see / update.
• Click the update button that's injected into the DOM (top left)

Limitations

Doesn't work with $0 or elements with more than one count. Can be implemented easiliy if needed.

Sidenote

I used https://javascriptcompressor.com/ to compress my javascript

ngdebug.js

var NS = "_debug_probe_"
var selector = localStorage.getItem(NS);
if (!selector) {
  selector = prompt('enter selector name');
  localStorage.setItem(NS, selector);
}

var domElement = document.getElementsByTagName(selector)[0];
var debugElement = ng.probe(domElement);
var appComponent = debugElement.componentInstance;

var prevBtn = document.getElementById(NS);
prevBtn && prevBtn.remove();

var btn = document.createElement('button');
btn.id = NS;
btn.innerText = 'UPDATE';
btn.style.position = 'absolute';
btn.style.top = '0px';
btn.style.left = '0px';
btn.style.zIndex = '9999';

btn.addEventListener('click', () => {
  debugElement.injector.get(ng.coreTokens.ApplicationRef).tick();
});

document.body.appendChild(btn);

console.log("appComponent: ", appComponent)