1. 14 Must Know Dev Tools Tricks
- google 개발자 도구에서 사용할 수 있는 여러 유용한 도구 정리
2. 전체 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Console Tricks!</title>
</head>
<body>
<p onClick="makeGreen()">×BREAK×DOWN×</p>
<script>
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';
}
//Elements > 요소 우클릭 > Break on > attribute modificatons
// 해당 요소에 debugger 처리
// Regular
// 일반적인 log 처리
console.log('hello');
// Interpolated
// 두번째 인자가 %s 위치에 출력됨
console.log('hello I am a %s string!', '@');
// Styled
// 두번째 인자에 명시한 css정보가 %c 로 지정된 문장에 반영됨
console.log('%c I am some great text', 'font-size:50px; background:red; text-shadow: 10px 10px 0 blue')
// warning!
// console 창에 warn 메세지 출력
console.warn('oh nooo');
// Error :|
// console 창에 Error 메세지 출력
console.error('fuck!');
// Info
// console 창에 info 메세지 출력
console.info('ice americao in doran')
// Testing
// assert함수를 이용하여 console 창에서 테스트 가능
// 첫 번째 인자의 true/false에 따라, 두번째 인자 문장 출력
console.assert(1 === 2, 'you are wring')
const p = document.querySelector('p');
console.assert(p.classList.contains('ouch'), 'that is wrong')
// clearing
// console 창 정리
console.clear();
// Viewing DOM Elements
// 마크업 요소 입력 시 해당 요소 정보 / 돔 정보 출력
console.log(p);
console.dir(p);
// Grouping together
// 배열 내 정보를 묶어서 출력
dogs.map(dog => {
{
console.group(`${dog.name}`);
console.log(`This is ${dog.name}`);
console.log(`${dog.name} is ${dog.age} years old`);
console.log(`${dog.name} is ${dog.age * 7} dog years old`);
console.groupEnd(`${dog.name}`)
}
})
// counting
// 동일한 출력 값의 개수를 표기함
console.count('wes');
console.count('wes');
console.count('wes');
console.count('steve');
console.count('wes');
console.count('steve');
console.count('wes');
console.count('wes');
console.count('wes');
console.count('steve');
console.count('wes');
console.count('steve');
// timing
// time > timeEnd까지 수행하는데 걸리는 시간을 출력
console.time('fetching data');
fetch('https://api.github.com/users/wesbos')
.then(data=>data.json())
.then(data =>{
console.timeEnd('fetching data');
console.log(data);
})
</script>
</body>
</html>3. 동작 순서
4. HTML, CSS
5. JAVASCRIPT
프로그래머를 꿈꾸는 코더