提高 DevTools 控制臺(tái)調(diào)試的 12 種方法

const x = 42;

console.log('variableX:', variableX);
// or
console.log(`variableX: ${ variableX }`);

/*
output:
variableX: 42
*/

console.log({ variableX });

/*
output:
{ variableX: 42 }
*/

console.log('no-frills log message');

console.info('this is an information message');

console.warn('I warned you this could happen!');

console.error('I\'m sorry Dave, I\'m afraid I can\'t do that');

console.debug('nothing to see here - please move along');

const obj = {
    propA: 1,
    propB: 2,
    propC: 3
  };

console.table( obj );

const arr1 = [
    [ 1, 2, 3 ],
    [ 4, 5, 6 ],
    [ 7, 8, 9 ]
  ];

console.table( arr1 );

const arr2 = [
    { a: 1, b: 2, c: 3 },
    { a: 4, b: 5, c: 6 },
    { a: 7, b: 8, c: 9 }
  ];

console.table( arr2 );

console.log(
  'The answer to %s is %d.',
  'life, the universe and everything',
  42
);
// The answer to life, the universe and everything is 42.

console.log(
  '%cOK, things are really bad now!',
  `
  font-size: 2em;
  padding: 0.5em 2em;
  margin: 1em 0;
  color: yellow;
  background-color: red;
  border-radius: 50%;
  `
);

console.assert(
  life === 42,
  'life is expected to be',
  42,
  'but is set to',
  life
);

console.assert(
  life === 42,
  'life is expected to be %s but is set to %s',
  42,
  life
);

function callMeTwo() {
  console.trace();
  return true;
}

function callMeOne() {
  return callMeTwo();
}

const r = callMeOne();

// start log group
console.group('iloop');

for (let i = 3; i > 0; i--) {

  console.log(i);

  // start collapsed log group
  console.groupCollapsed('jloop');

  for (let j = 97; j < 100; j++) {
    console.log(j);
  }

  // end log group (jloop)
  console.groupEnd();

}

// end log group (iloop)
console.groupEnd();

// start timer
console.time('bigloop');

for (let i = 999999999; i > 0; i--);

// show elapsed time
console.timeEnd('bigloop');

debug( doSomething );

function doSomething called with arguments: "hello", 2