[ TIL 28 ] 개발자 도구

_dodo_hee·2021년 3월 23일
0

OTHERS

목록 보기
3/8
post-thumbnail

개발자 도구

개발자도구는 브라우저에서 제공하는 하나의 도구
사이트를 즉시 수정하고 문제 발생시 원인을 파악하여 빠른 속도로 더 나은 사이트를 만들 수 있다.

📎 개발자도구 단축키

  • 개발자도구 : cmd + option + I / ctrl + shift + I
  • 개발자도구 Element 패널 : cmd + option + c (option > shift로 대체가능)
  • 개발자도구 Console 패널 : cmd + option + j (option > shift로 대체가능)


Console 패널

console은 객체이다.
Console에는 로그인메서드를 포함한 다양한 메서드가 존재한다.
프론트엔드의 경우에는 디버깅시 다른도구를 사용하는 것 보다 console.log를 사용한다.

📎 Console패널의 기능

  • 자바스크립트 코드를 바로 실행하고 에러 확인 가능
  • 중단시점에서 변수체크와 값을 수정하고 평가 가능

📎 Console 내용 전부 지우기

clear 이미지

console창에 여러가지들을 테스트한 뒤에 콘솔창을 확인해보면
이전 console에 출력한 내용까지 확인된다.

콘솔 내용을 아예 다 지우고 빈 console창을 나타내게 하고싶을땐,
console.clear();를 사용해주면 된다.

Console.clear();를 대체하는 내용 지우는 방법

  1. ctrl + L (맥은 cmd + k)
  2. :출입금지_기호: 아이콘 클릭
  3. clear();
    😱 Preserve log upon navigation 이 적용 되어 있으면, 작동이 안된다.😱

📎 Console 내용 남아있게하기

내용남아있게하기

👉 Cmd + option + j > console 옆 톱니바퀴아이콘 클릭 > network > Preserve log 체크

📎 Console Error와 Warning 제외하기

Console 창에서 에러와 경고메세지를 제외하고 콘솔을 보고싶을땐,

4번째사진

Console창에서 filter 옆에 Default levels 누르고 창이 뜨고 Warnings 와 Errors를 체크나 해제하면 된다.!

📎 요소패널 이용하면서 콘솔패널이용하는 방법

Cmd + option + I 를 누르고 Element 패널이 나타나면 esc를 눌러서 맨 하단에 console패널이 나오는 것을 확인해라!



Element 패널

코드를 분석하고 실시간으로 확인할 수 있게 하는 기능이 있고,
레이아웃과 디자인 테스트 가능하다.

  • 웹 페이지의 구성 (dom)
  • 구성요소의 스타일 속성 (css)
  • Css 수정,ul 수정

📎 스타일 순서

! important -> inline style -> id selector -> class selector -> tag selector -> * selector -> 상위 요소에 의해 상속된 속성

📎 user agent stylesheet

  • margin 값을 정해두지 않아서 브라우저 임의대로 설정 되어 있는 것
    결과물이 의도한 것과 조금 다를 수 있다.
  • 그래서 * {margin:0;padding:0;}을 사용함
  • 브라우저의 기본 스타일 값을 의미. ( Default ) 브라우저 마다 스타일 기본값이 다름.


Network 패널

현재 보고있는 페이지에서 실시간으로 통신하고 있는 정보가 표시되고,
api 크롤링과 로딩 성능 테스트도 가능하다.

📎 XHR 탭 기능

xhr

브라우저에서 서버에 API를 호출할때 호출or응답이 정상적으로 이루어지는지 알 수 있다.
그래서 프론트와 백엔드 개발자의 소통 역할을 하는 탭이다.

profile
무럭무럭 자라나는 도도 개발성장일기

0개의 댓글