console.assert.js

console.assert(true === true, "This won't appear in console as is always true");
console.assert(true === false, "true does not equal false");

const sp = $('nonexistentelement');
console.assert(sp === undefined, "element not found");

designmode.js

document.designMode = 'on'
console.log("document.designMode = 'on'");

ng.js

// select component to populate $0 - ng.getComponent($0);
console.log("Show ng commands in console!!")

ng;

// ng.getComponent($('app-home'));
// ng.getContext($('app-home'));

// let dr = ng.getDirectives($('app-home'))[0];
// ng.getDirectiveMetadata(dr)

// mark component for check where OnPush is in use
// ng.applyChanges($('app-home'));

snippets.js

Intro
console.clear();
console.log("%cDevTools Tips & Tricks for Chrome and Angular", "background-color: black; color:green; font-size: 40px;");

Agenda
console.log("%cAgenda:\n\r Snippets \n\r Console Styling \n\r Console Grouping \n\r Console Tables \n\r Console Dir \n\r Console Assert \n\r DOM Updates \n\r Design Mode \n\r Network Throttling \n\r Local Overrides \n\r Angular Dev Mode \n\r Angular DevTools", "color:white; font-size: 40px;");

Snippets
console.log("Snippets.  It's just Javascript");

function hey() {
    return 'hey';
}

console.log(hey());

document.querySelector('body').setAttribute('style', 'background-color: black;color: white');

// $ - shorthand for querySelector
// $$ - shorthand for querySelectorAll $$('div'), $$('p', $$('div'))
// $_ - most recently used 
// $0 - $4 - historical reference of selected elements
// clear() - clear console
// debug(function) - debug a function, e.g. debug(addEventListener) - undebug(function) to stop debugging
// monitor(function) - monitor function calls, e.g. monitor(addEventListener) - unmonitor(function) to stop monitoring
// profile(<label>), profileEnd(<label>) - creates profile viewable in Javascript Profiler
// inspect(object/function) - inspect($('.toolbar')), inspect(document.body) - highligts element in window
// getEventListeners(object) - getEventListeners($('div.child'))
// copy(obj) - copy an object
// queryObjects(Constructor) - queryObjects(HTMLElement), queryObjects(HTMLDivElement), queryObjects(Promise)

// reference https://developer.chrome.com/docs/devtools/console/utilities/

Console Styling
const style = 'background-color: darkblue; color: white; font-style: italic; border: 5px solid hotpink; font-size: 2em;'
console.log("%cIt's just CSS", style);

const tools = 'Chrome DevTools';
console.warn('%s is awesome.', tools);

console.log('%O bob', {name: 'bob', age: 53});

console.log('%o sue', {name: 'sue', age: 43});

// https://developer.chrome.com/docs/devtools/console/format-style/

Console Grouping
console.clear();
console.group("Grouped Output");
		console.log( "logs from group here...." );
		console.log( "and some more..." );
		console.groupEnd();		

console.group(
			"%cStyled Grouped Output",
			"background-color: #fff ; color: #000; font-weight: bold ; padding: 4px ;"
		);
		console.log( "logs from group here...." );
		console.log( "and some more..." );
		console.groupEnd();

console.group(
			"%cStyled Grouped Output",
			"background-color: yellow ; color: gray; font-weight: bold ; padding: 4px ;"
		);
		console.log( "logs from group here...." );
		console.log( "and some more..." );
		console.groupEnd();
    
Console Tables
console.clear();

//const arr = [{name: 'ted', age: 23}, {name: 'mary', age: 23}, {name: 'sarah', age: 23}];
//console.table(arr);

fetch("https://jsonplaceholder.typicode.com/todos")
      .then(data => data.json())
      .then(data => {
        console.table(data);
      });
      
Console Dir
const dv = $('div');
console.log(dv);
console.dir(dv);