크롬 개발자 도구 활용 팁

인프런의 "아는 만큼 보이는 크롬 개발자 도구(제주코딩베이스캠프)" 강의 내용을 정리한 것이다.

---

Ctrl + Shift + C : 요소 선택 활성/비활성

(개발자 도구 활성화 상태) Ctrl + Shift + d : 개발자 도구 창 분리/병합

(개발자 도구 활성화 상태) Ctrl + Shift + p : 실행 > (명령어 입력)

• 눈금자

 

요소 탭

• (태그 선택) h : 요소 숨기기/보이기
• (태그 선택) 마우스 우클릭 > HTML로 수정 > 코드 선택/복사
• Ctrl + f : 문자열 검색
• 스타일 탭
  • 우선 순위로 인해 활성되지 않은 스타일, 주석 처리된 스타일도 모두 볼 수 있다.
  • element.style에 스타일을 작성하면 선택된 태그에 인라인 스타일을 지정할 수 있다.
  • 색상 선택 도구
    • 색상값 얻기 : 스타일 탭에서 임의의 color 지정 > 컬러 박스 선택 > 스포이드 선택 > 원하는 색 위에 스포이드 올려두고 색상값 얻기
    • 텍스트 명도대비
      • 웹접근성 고려
      • 텍스트가 있으면 확인 가능
      • color 값에서만 확인 가능(background-color에서는 확인 불가)
      •