기본 코드
<p onClick="makeGreen()">×BREAK×DOWN×</p>
const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];
function makeGreen() {
const p = document.querySelector('p');
p.style.color = '#BADA55';
p.style.fontSize = '50px';
}
1. 디버깅 breakpoint 설정
element break on attribute modification
누르면 해당 elemenrt에 변화가 있을 때 어느 줄에서 변화가 있는지 알려준다.
2. Regular
console.log('hello');
console에 매개변수를 출력한다.
3. Interpolated Styled
console.log('hello %s', '😃');
console.log('hello %c I am ', 'font-size:50px; background:red');
%c 뒤에 있는 문자들에 두번째 인자에 해당하는 css 적용 가능하다.
4. warning!
console.warn('oh no');
console에서 warning 표시
5. Error
console.warn('error!!!!!!');
console에서 warning 표시 및 error stack trace 제공
6. Info
console.info('I am the best');
출력 결과 console.log와 동일하다. info 전달 목적이다.
7. Testing
const p = document.querySelector('p');
console.assert(1 === 1, 'that is wrong');
console.assert(1 === 2, 'that is wrong');
console.assert(p.classList.contains('outch'), 'There is no ouch');
console로 값 테스트가 가능하다.
틀렸을 때 두번재 인자값을 에러 메세지로 보여준다.
8. clearing
console.clear();
console 기록들을 지워준다.
9. Viewing DOM Elements, dir은 해당 객체의 모든 속성을 json과 같은 tree 구조든 보여준다.
console.log(p);
console.dir(p);
// Grouping together
dogs.forEach((dog) => {
console.group(`${dog.name}`);
console.log(`This is ${dog.name}`);
console.log(`${dog.name} is ${dog.year} 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.year} years old.`);
console.groupEnd(`${dog.name}`);
})
console.log로 출력 할 경우 해당 엘리먼트들의 요소들을 바로 보여준다.
console.dir로 출력 할 경우 toggle형태로 확장이 가능하게 표시한다.
console.group으로 묶을 경우
console.groupCollapsed로 묵을 경우
10. counting
console.count('Wes');
console.count('Wes');
console.count('Steve');
console.count('Steve');
console.count('Wes');
console.count('Wes');
console.count('Wes');
console.count('Steve');
console.count('Steve');
console.count('Steve');
count(label) 안에 label 값이 호출 된 횟수를 출력한다.
11. timing
console.time('fetching data');
fetch('<https://api.github.com/users/wesbos>')
.then(data => data.json())
.then(data => {
console.timeEnd('fetching data');
console.log(data);
});
console.table(dogs);
console.time을 실행하고 console.timeEnd 까지의 시간을 출력한다.
하단의 console.table이 먼저 실행되었기 때문에 그 이후에 시간이 출력된다.