Chrome DevTools를 사용합니다.

  1. HTML 요소 빠르게 편집
  2. 모든 하위 요소를 확장하십시오.
  3. 검사관 재배치
  4. DOM 요소 검색
  5. 팔레트
  6. 다중 커서
  7. Base64 이미지 인코딩
  8. 가상 클래스 전환
  9. 열 선택
  10. cURL에 대한 요청 복사
  11. 화면상의 키보드
  12. 전체 페이지의 스크린 샷
  13. 터치 장치의 에뮬레이션
  14. 유용한 기능

이름에서 알 수 있듯이 Chrome DevTools 또는 웹 속성은 웹 개발자와 관련된 사람들을 위해 고안된 도구입니다. 웹 속성을 사용하면 다음 작업을 수행 할 수 있습니다.

  • 디스플레이의 정확성을 검사하십시오.
  • JavaScript로 스크립트의 실행을 추적하십시오.
  • 네트워크 활동보기.

이 기사를 쓸 때 나는 카나리아 - 새로운 기능이 테스트 된 Chrome 버전. 안정적인 Chrome 버전에 해당합니다.

관리자를 시작하려면 페이지의 아무 곳이나 마우스 오른쪽 버튼으로 클릭하고 "항목 코드보기"를 선택하십시오. Ctrl + Shift + C를 누르기 만하면됩니다.

HTML 요소 빠르게 편집

가장 간단한 것으로 시작해 봅시다 : 편집 요소.

가장 간단한 것으로 시작해 봅시다 : 편집 요소

확인하는 방법 :

  • 요소 탭을 선택하십시오.
  • 패널 안의 HTML 요소를 선택하십시오.
  • 태그를 더블 클릭하고 예를 들어 태그 이름을 변경하십시오.

편집이 완료되면 닫기 태그가 자동으로 업데이트됩니다.

모든 하위 요소를 확장하십시오.

확인하는 방법 :

  • 요소 패널로 이동하십시오.
  • 요소를 선택하고 Alt 키를 누른 상태에서 요소의 왼쪽에있는 화살표를 클릭합니다.

검사관 재배치

검사기 패널은 브라우저 창의 아래쪽과 오른쪽으로 모두 누를 수 있습니다. 예를 들어, 오른쪽의 패널 위치는 와이드 스크린 모니터에서 작업 할 때 편리합니다. 또한 검사기 패널을 별도의 창에 배치하고 다른 모니터로 전송할 수도 있습니다.

또한 검사기 패널을 별도의 창에 배치하고 다른 모니터로 전송할 수도 있습니다

확인하는 방법 :

  • Ctrl + Shift + D - 위치 전환

DOM 요소 검색

아마 이것이 발견 대상이 될 사람은 많지 않지만 "Elements"탭에서 DOM으로 검색 할 수 있습니다.

아마 이것이 발견 대상이 될 사람은 많지 않지만 Elements탭에서 DOM으로 검색 할 수 있습니다

확인하는 방법 :

  • Ctrl + F를 누르고 제안 된 검색어를 입력하십시오.

팔레트

팔레트에서 색상 선택

최근 버전의 Chrome에서는 색상을 쉽게 선택할 수 있도록 2 개의 팔레트가 추가되어 일부 색상이 변경되었습니다.

다중 커서

커서를 이동하고 Ctrl 키를 누른 상태에서 원하는 영역을 클릭하여 커서를 추가하십시오. Ctrl + U를 사용하여 작업을 실행 취소 할 수 있습니다. 개인적으로, 나는 결코 유용하지 않았습니다.

Base64 이미지 인코딩

확인하는 방법 :

  • 네트워크 패널로 전환하십시오.
  • 이미지 선택
  • 이미지를 마우스 오른쪽 버튼으로 클릭하고 ''을 (를) 선택하십시오.

가상 클래스 전환

의사 클래스는 요소의 상태와 상대 위치를 반영합니다.

의사 클래스는 요소의 상태와 상대 위치를 반영합니다

확인하는 방법 :

  • 요소 패널에서 요소를 마우스 오른쪽 버튼으로 클릭하고 요소 상태 강제로 목록에서 가상 클래스를 선택합니다.
  • 요소 패널의 오른쪽에서 가상 클래스를 선택할 수도 있습니다.

열 선택

확인하는 방법 :

  • '출처'패널로 이동하십시오.
  • 파일을 선택하십시오.
  • Alt 키를 누른 상태에서 텍스트를 선택하십시오.

열을 선택하면 요소 패널에서 HTML을 편집 할 때도 작동합니다.

cURL에 대한 요청 복사

네트워크 탭의 모든 요청을 복사 한 다음 말풍선을 사용하여 실행하기 위해 터미널에 붙여 넣을 수 있습니다.

화면상의 키보드

Nexus 5X 프로필을 선택하면 온 스크린 키보드가 활성화되어있을 때 사이트의 모양을 볼 수 있습니다.

Chrome DevTools : 화상 키보드 Chrome DevTools : 화상 키보드

전체 페이지의 스크린 샷

전체 페이지의 사진을 찍는 것은 매우 간단합니다. 그냥 ...

  1. 열린 경위.
  2. 콘솔로 이동하십시오.
  3. Ctrl + Shift + P를 누릅니다.
  4. 유형 "스크린 샷"
  5. "전체 화면 캡쳐 캡처"를 선택하십시오.
전체 페이지의 스크린 샷

터치 장치의 에뮬레이션

또한 일부 센서를 시뮬레이트 할 수 있습니다.

  • 터치 스크린
  • 위치 정보 좌표
  • 가속도계

시도하는 방법 :

  • 요소 패널을 선택하십시오.
  • "Esc"를 누르고 "Emulation> Sensors"를 선택하십시오.

유용한 기능

키와 값

키와 값 기능을 사용하여 객체의 키 또는 값을 콘솔에 각각 출력 할 수 있습니다. 키와 값 기능을 사용하여 객체의 키 또는 값을 콘솔에 각각 출력 할 수 있습니다 키와 객체 값을 따로 표시하기