Chrome Dev Tools Tips

dev-tools-tips.md

Chrome Dev Tools tips

Interpolation

Insert data into message.

var myVar = 123;
console.log('Var value is %s', myVar);
console.log(`Var value is ${myVar}`);

Styled

Add css styling to output.

console.log(`%c Var value is ${myVar}`, 'color: red; background: yelow');

Table

Display data collection in a table format.

var myArray = [
  {name: 'qwe', a: 45, value: 'asdfghjk'},
  {name: 'grl', a: 68, value: 'kjhgfhyl'},
  {name: 'lki', a: 13, value: 'quwevoiu'}
];
console.table(myArray);

Testing

Output message is assertion/comparison fails.

console.assert(1 === 2, 'Comparison fails');

const p = document.querySelector('p');
console.assert(p.classList.contains('selected'), 'Class not found');

Clearing

Clear console output.

console.clear();

Viewing DOM elements

Printing DOM element

const p = document.querySelector('p');
console.log(p);
// autput dom element
console.dir(p);
// autput all element DOM properties

Groupping

A way to goup output for better reading.

var ps = document.querySelector('p'); // asume that p is an array of paragraphs
p.forEach(ps, function(p){
  console.group(`${p.text}`); // use groupCollapsed() to show group collapse by default
  console.log(`paragraph content is ${p.text}`);
  console.groupEnd(`${p.text}`);
}

Count

console.count(`${p.text}`); // how many time the same output is pass into console.count()

Time

Mesure time between actions.

console.time('some request');
var r = new XMLHttpRequest(); // only available in browsers
r.open('GET', "https://api.github.com/users/auxcoder", true);
r.onreadystatechange = function () {
	if (r.readyState != 4 || r.status != 200) return; 
	console.log(r.responseText);
  console.timeEnd('some request'); // same string that in console.time()
};
r.send('');

Record new Timeline (Frames, Memory)

console.timeline('Drawing pixels');
console.timelineEnd('Drawing pixels');

Record new JavaScript CPU profile

console.profile('Drawing pixels');
console.profileEnd('Drawing pixels');

Inspect object in Elements, Sources or Profiles

inspect(document.body.firstChild); // Elements
inspect(someFunctionName); // Sources

Label the timeline

console.timeStamp('Adding result');

Copy object as a string to clipboard

copy($0);
copy(document.body);

Query DOM elements from console

$$(selector); // = document.querySelectorAll(selector)