[JS30] day 9 - 14 Must know dev tools tricks

HTML inline script

<p onclick="makeGreen()">xBREAKxDOWNx</p>

function makeGreen() {
	const p = document.querySelector('p');
	p.style.color = '#BADA55';
	p.style.fontsize = '50px';
}

HTML 인라인에 스크립트 구문을 넣어 JS를 실행 시킬 수 있다

이벤트 핸들러 속성을 지정해서 자바스크립트를 실행하도록 하는 고전적인 방식

 

• 언제 JS가 실행되는지 모르겠다면? 👉 DOM breakpoint를 설정 할 수 있다
• To set a DOM change breakpoint: 
  1. Click the Elements tab.
  2. Go the element that you want to set the breakpoint on.
  3. Right-click the element.
  4. Hover over Break on then select Subtree modifications, Attribute modifications, or Node removal.

 

console.log 명령어들

regular~ testing 실행 화면

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

// interpolated (변수사용)
const name = '👽'
console.log('hello I am a %s string!', '🤎');
console.log(`hello I am ${name}`);

// styled
console.log('%c I am some great text', 'font-size:50px; background:red;')
// CSS 문법으로 style 할 수 있음

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

// error
console.error('OH NOOO');

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

// testing
console.assert(1 === 2, 'that is wrong!');

const p = document.querySelector('p');
console.assert(p.classList.contains('ouch'), 'That is wrong');

• console.log와 console.dir의 차이?
  console.log는 요소를 HTML과 같은 트리 구조로 출력합니다.
  console.dir은 요소를 JSON과 같은 트리 구조로 출력합니다.
  구체적으로, console.log는 DOM 요소에 대해 특별한 처리를 제공하지만 console.dir은 그렇지 않습니다. 이것은 종종 DOM JS 객체의 전체 표현을 보려고 할 때 유용합니다.

 

console.clear ~ console.dir 실행 화면

// cleaning
console.clear();

// viewing DOM elements
console.log(p); // 자체를 볼수 있음
console.dir(p); // method가 가지고 있는 propety 들을 볼 수 있음

 

grouping together ~ console.table 실행 화면

// grouping together
dogs.forEach(dog => {
	console.group(`${dog.name}`); // dog.name을 제목으로 group을 지어 줌
	// group은 기본 열림세팅, 닫힘을 기본으로 하고 싶다면 groupCollapsed
	console.log(`this is ${dog.name}`);
	console.log(`this is ${dog.name} is ${dog.age} yesr old`);
	console.log(`this is ${dog.name} is ${dog.age * 7} yesr old`);
	console.groupEnd(`${dog.name}`); // group 끝을 알려줌
});

// counting
console.count('jjong');
console.count('ssal');
console.count('jjong');
console.count('ssal');
console.count('jjong');
console.count('jjong');
console.count('jjong');
console.count('jjong');
console.count('jjong');
console.count('jjong');
console.count('ssal');
console.count('ssal');
console.count('ssal');

// timing 걸리는 시간을 알고 싶을 떄
console.time('fetching data'); // 이름
    fetch('https://api.github.com/users/wesbos')
      .then(data => data.json())
      .then(data => {
        console.timeEnd('fetching data'); // 'fetching data' 의 끝을 알려줌
        console.log(data);
});

// table
console.table(dogs)