[JavaScript30] Day 9

Dev Tools Domination

 

위와 같이 스크립트를 이용하여 왼쪽 텍스트를 클릭하면 오른쪽 텍스트처럼 변경될 때, 

실제로 변경되는 내용을 확인하는 방법

 

스크립트가 실행되는 해당 소스에서 우클릭 → Break on → attribute modifications

 

스트립트가 실행되어 변화하는 것을 보여줌

버튼으로 스크립트 실행을 재개하거나

버튼으로 다음 단계의 스크립트를 확인할 수 있습니다.

 

지금 실행되어진 스크립트의 해당 라인을 보여줌

위와 같이 보여주어 현재 실행되고 있는 스크립트를 알 수 있습니다.

 

console

// Regular
console.log('hello');

// Interpolated
console.log('hello I am a %s string', '💩') // 두번째것을 %s에 삽입

// %s 대신 ES6 문법 사용하는것도 가능
const poop = '💩'
console.log(`hello I am ${poop}`)

// Styled
console.log('%c I am some great text', 'font-size: 50px; background-color: pink;') 
// 스타일을 지정하려는 항목 앞에서 %c를 수행하면 콘솔에 전달하는 두 번째 인수가 적용

// warning!
console.warn('OH NOOO');

// Error :|
console.error('Shit!');

// Info
console.info('Crocodiles eat 3-4 people per year');

// Testing
console.assert(1 === 1, 'You did not select the right Element!');
console.assert(1 === 2, 'You did not select the right Element!');
const p = document.querySelector('p');
console.assert(p.classList.contains('ouch'), 'That is wrong!');

false인 경우 오류 메시지를 기록

1 === 1는 true이기 때문에 콘솔 창에 메시지가 나오지 않음

// clearing
console.clear(); // 콘솔창 내용을 모두 지워줌

 

// Viewing DOM Elements
console.log(p); // 실제 요소 차제를 출력
console.dir(p); // 해당 요소의 모든 내용이 출력, 속성 값이 다른 객체라면 편쳐서 살펴볼 수 있음

// Grouping together
dogs.forEach(dog => {
  console.log(`This is ${dog.name}`);
  console.log(`${dog.name} is ${dog.age * 7} dog years old`);
});

dogs.forEach(dog => {
  console.group(`${dog.name}`); // 그룹 묶음 시작
  console.log(`This is ${dog.name}`);
  console.log(`${dog.name} is ${dog.age * 7} dog years old`);
  console.groupEnd(`${dog.name}`); // 그룹 묶음 끝
});

dogs.forEach(dog => {
  console.groupCollapsed(`${dog.name}`); // 닫힌 형의 그룹으로 출력
  console.log(`This is ${dog.name}`);
  console.log(`${dog.name} is ${dog.age * 7} dog years old`);
  console.groupEnd(`${dog.name}`);
});

console.log로만 이루어진 경우에는 출력하려는 문장 자체를 나열하여 출력

console.group은 그룹으로 묶어서 출력

console.groupCollapsed는 group과 비슷하지만, 펼쳐지지 않은 형태의 그룹으로 출력 

// counting
// 호출된 횟수를 기록
console.count('wes');
console.count('wes');
console.count('steve');
console.count('steve');
console.count('wes');
console.count('steve');
console.count('wes');
console.count('steve');
console.count('steve');
console.count('steve');
console.count('steve');
console.count('steve');

// timing
// 작업 소요 시간을 출력 (단위: 밀리초)
console.time('fetching data');
fetch('http://api.github.com/users/wesbos').then(data => data.json()).then(data => {
  console.timeEnd('fetching data');
  console.log(data);
});

 

 

 

 

---

Methods of console

console.assert() : false인 경우 콘솔에 오류메시지를 기록. true는 반응 없음.

console.clear() : 콘솔에 메시지를 지움.

console.count() : 특정 호출이 호출 된 횟수를 기록.

console.dir() : 콘촐에서 객체의 모든 속성을 표시.

console.warn() : 콘솔에 경고 메시지 출력.

console.error() : 콘솔에 오류 메시지 출력.

console.info() : 콘솔에 정보 메시지 출력.

console.group() : 새로운 인라인 그룹 작성. groupEnd()까지 콘솔에 추가 레벨로 들여쓰기됨.

console.groupEnd() : 현재 인라인 그룹을 종료.

console.groupCollapsed() : 콘솔에 축소된 새로운 인라인 그룹 작성.

console.time() : 작업 소요 시간을 측정하여 출력.

console.table() : table형태로 콘솔에 표시.

 

 

JavaScript30 강의를 보고 공부한 글입니다. (https://javascript30.com/)