Chrome DevTools를 사용합니다.
- HTML 요소 빠르게 편집
- 모든 하위 요소를 확장하십시오.
- 검사관 재배치
- DOM 요소 검색
- 팔레트
- 다중 커서
- Base64 이미지 인코딩
- 가상 클래스 전환
- 열 선택
- cURL에 대한 요청 복사
- 화면상의 키보드
- 전체 페이지의 스크린 샷
- 터치 장치의 에뮬레이션
- 유용한 기능
이름에서 알 수 있듯이 Chrome DevTools 또는 웹 속성은 웹 개발자와 관련된 사람들을 위해 고안된 도구입니다. 웹 속성을 사용하면 다음 작업을 수행 할 수 있습니다.
- 디스플레이의 정확성을 검사하십시오.
- JavaScript로 스크립트의 실행을 추적하십시오.
- 네트워크 활동보기.
이 기사를 쓸 때 나는 카나리아 - 새로운 기능이 테스트 된 Chrome 버전. 안정적인 Chrome 버전에 해당합니다.
관리자를 시작하려면 페이지의 아무 곳이나 마우스 오른쪽 버튼으로 클릭하고 "항목 코드보기"를 선택하십시오. Ctrl + Shift + C를 누르기 만하면됩니다.
HTML 요소 빠르게 편집
가장 간단한 것으로 시작해 봅시다 : 편집 요소.
확인하는 방법 :
- 요소 탭을 선택하십시오.
- 패널 안의 HTML 요소를 선택하십시오.
- 태그를 더블 클릭하고 예를 들어 태그 이름을 변경하십시오.
편집이 완료되면 닫기 태그가 자동으로 업데이트됩니다.
모든 하위 요소를 확장하십시오.
확인하는 방법 :
- 요소 패널로 이동하십시오.
- 요소를 선택하고 Alt 키를 누른 상태에서 요소의 왼쪽에있는 화살표를 클릭합니다.
검사관 재배치
검사기 패널은 브라우저 창의 아래쪽과 오른쪽으로 모두 누를 수 있습니다. 예를 들어, 오른쪽의 패널 위치는 와이드 스크린 모니터에서 작업 할 때 편리합니다. 또한 검사기 패널을 별도의 창에 배치하고 다른 모니터로 전송할 수도 있습니다.
확인하는 방법 :
- Ctrl + Shift + D - 위치 전환
DOM 요소 검색
아마 이것이 발견 대상이 될 사람은 많지 않지만 "Elements"탭에서 DOM으로 검색 할 수 있습니다.
확인하는 방법 :
- Ctrl + F를 누르고 제안 된 검색어를 입력하십시오.
팔레트
팔레트에서 색상 선택최근 버전의 Chrome에서는 색상을 쉽게 선택할 수 있도록 2 개의 팔레트가 추가되어 일부 색상이 변경되었습니다.
다중 커서
커서를 이동하고 Ctrl 키를 누른 상태에서 원하는 영역을 클릭하여 커서를 추가하십시오. Ctrl + U를 사용하여 작업을 실행 취소 할 수 있습니다. 개인적으로, 나는 결코 유용하지 않았습니다.
Base64 이미지 인코딩
확인하는 방법 :
- 네트워크 패널로 전환하십시오.
- 이미지 선택
- 이미지를 마우스 오른쪽 버튼으로 클릭하고 ''을 (를) 선택하십시오.
가상 클래스 전환
의사 클래스는 요소의 상태와 상대 위치를 반영합니다.
확인하는 방법 :
- 요소 패널에서 요소를 마우스 오른쪽 버튼으로 클릭하고 요소 상태 강제로 목록에서 가상 클래스를 선택합니다.
- 요소 패널의 오른쪽에서 가상 클래스를 선택할 수도 있습니다.
열 선택
확인하는 방법 :
- '출처'패널로 이동하십시오.
- 파일을 선택하십시오.
- Alt 키를 누른 상태에서 텍스트를 선택하십시오.
열을 선택하면 요소 패널에서 HTML을 편집 할 때도 작동합니다.
cURL에 대한 요청 복사
네트워크 탭의 모든 요청을 복사 한 다음 말풍선을 사용하여 실행하기 위해 터미널에 붙여 넣을 수 있습니다.
화면상의 키보드
Nexus 5X 프로필을 선택하면 온 스크린 키보드가 활성화되어있을 때 사이트의 모양을 볼 수 있습니다.
Chrome DevTools : 화상 키보드
전체 페이지의 스크린 샷
전체 페이지의 사진을 찍는 것은 매우 간단합니다. 그냥 ...
- 열린 경위.
- 콘솔로 이동하십시오.
- Ctrl + Shift + P를 누릅니다.
- 유형 "스크린 샷"
- "전체 화면 캡쳐 캡처"를 선택하십시오.
터치 장치의 에뮬레이션
또한 일부 센서를 시뮬레이트 할 수 있습니다.
- 터치 스크린
- 위치 정보 좌표
- 가속도계
시도하는 방법 :
- 요소 패널을 선택하십시오.
- "Esc"를 누르고 "Emulation> Sensors"를 선택하십시오.
유용한 기능
키와 값
키와 값 기능을 사용하여 객체의 키 또는 값을 콘솔에 각각 출력 할 수 있습니다. 키와 객체 값을 따로 표시하기