개발자 도구 활용하기

---

• Elements(Inspector) : html/CSS 상태 확인
• Console : 콘솔 (변수 정보를 확인하고 오류 메시지 표시)
• Sources(debugger) : 스크립트 디버깅 (break point 지정 및 변수 모니터링 등)
• Network : 브라우저에서 발생하는 통신 상태
• Performance(예전 Timeline패널) : 성능 측정
• Memory(예전 Profiles 패널) : 메모리 사용 형태를 작성하고 누수 탐색.
• Application(예전 Resources 패널) : 쿠키 및 스토리지 등의 내용 수집
• Audits : 페이지를 분석하고 최적화를 위한 팁 나열
• Security : Mixed content 이슈, 인증서 문제 등을 디버깅

---

About querySelector

1. HTML의 특정 엘리먼트와 그 자식 엘리먼트 정보에 접근하기

document.querySelector('.클래스이름'): 

2. 특정 클래스의 태그와 태그 사이인 컨텐츠 받아오기

document.querySelector('.클래스이름').textContent

3. 컨텐츠 내용 지워보기

document.querySelector('.클래스이름').textContent = "";

4. 다른 컨텐츠를 입력해보기

document.querySelector('.클래스이름').textContent="변경된 컨텐츠"

 

 

 

개발자도구 디버깅 창 이용방법

 

1. deburgger pause

2. console 창에서 함수 입력하고 debugger , 함수에 인자를 넣고 엔터

3. deburgger 창에서 함수 진행 확인

 

 

 

 

 

 

 

 

 

 

 

 

출처: blog.gaerae.com/2015/06/chrome-firefox-safari-ie11-developer-tool.html

브라우저 개발자도구 콘솔창 활용 팁

www.insilicogen.com/blog/354

人Co BLOG :: 크롬 개발자도구의 숨은 팁 알아보기

자바스크립트 Element 객체: devbox.tistory.com/entry/JavaScrip-Element-%EA%B0%9D%EC%B2%B4

JS-DOM 요소를 선택(또는 변경) 하기: www.habonyphp.com/2019/03/js_85.html

JS - DOM 요소를 선택 (또는 변경)하기

Javascript 디버깅: www.egocube.pe.kr/lecture/content/html-javascript/201902190001