웹 브라우저 개발자 도구 사용 방법

웹 서핑을 찾는 일상적인 사용자에게 초점을 맞추는 대부분의 브라우저 제조업체 외에도 강력한 도구를 브라우저에 바로 통합하여 해당 사용자가 액세스하는 앱과 사이트를 구축하는 데 도움을주는 웹 개발자, 디자이너 및 품질 보증 전문가를 대상으로합니다. 그들 자신.

브라우저에있는 유일한 프로그래밍 및 테스트 도구로 페이지의 소스 코드 만 볼 수 있었던 시대는 지났습니다. 오늘날의 브라우저를 사용하면 JavaScript 스 니펫 실행 및 디버깅, DOM 요소 검사 및 편집, 앱 또는 페이지로드시 실시간 네트워크 트래픽 모니터링과 같은 작업을 수행하여 병목 현상을 식별하고, CSS 성능을 분석하고, 코드가 너무 많은 메모리를 사용하지 않거나 CPU주기를 너무 많이 사용하지 않습니다.

테스트 관점에서, 반응 형 디자인과 내장 시뮬레이터의 마법을 통해 앱이나 웹 페이지가 다른 브라우저는 물론 다른 장치와 플랫폼에서 어떻게 렌더링되는지 재현 할 수 있습니다. 가장 좋은 점은 브라우저를 떠나지 않고도이 모든 작업을 수행 할 수 있다는 것입니다!

아래 자습서는 여러 인기 웹 브라우저에서 이러한 개발자 도구에 액세스하는 방법을 안내합니다.

구글 크롬

Chrome의 개발자 도구를 사용하면 코드를 편집 및 디버그하고, 개별 구성 요소를 감사하여 성능 문제를 노출하고, Android 또는 iOS를 실행하는 화면을 포함하여 다양한 기기 화면을 시뮬레이션하고, 기타 여러 유용한 기능을 수행 할 수 있습니다.

크롬 선택 주 메뉴, 세 개의 수평선으로 표시되고 브라우저의 오른쪽 상단에 있습니다.
드롭 다운 메뉴가 나타나면 마우스 커서를 추가 도구 옵션을 선택합니다.
이제 하위 메뉴가 나타납니다. 레이블이 지정된 옵션을 선택하십시오. 개발자 도구. 이 메뉴 항목 대신 다음 키보드 단축키를 사용할 수도 있습니다. Chrome OS / Windows (Ctrl + Shift + I), 맥 OS X (Alt (옵션) + 명령 + I)
이 예제 스크린 샷과 같이 Chrome 개발자 도구 인터페이스가 표시됩니다. Chrome 버전에 따라 표시되는 초기 레이아웃이 여기에 제시된 것과 약간 다를 수 있습니다. 일반적으로 화면 하단 또는 오른쪽에있는 개발자 도구의 기본 허브에는 다음 탭이 포함되어 있습니다.
이 섹션 외에도 다음 도구를 통해 다음 도구에 액세스 할 수 있습니다. >> 아이콘 오른쪽에 있습니다. 성과 탭.
- 기억: 웹 페이지에서 메모리 사용량을 모니터링하고 기록합니다. 사이트의 JavaScript가 얼마나 무거운 지 확인할 수 있습니다.
- 경비: 활성 페이지 또는 응용 프로그램의 인증서 문제 및 기타 보안 관련 문제를 강조합니다.
- 어플리케이션: 웹 애플리케이션에서 사용중인 리소스를 검사합니다. 사용중인 항목에 대한 전체 분석을 가져옵니다.
- 감사: 페이지 또는 애플리케이션의로드 시간 및 일반 성능을 최적화하는 방법을 제공합니다.
장치 모드 iPad, iPhone 및 Samsung Galaxy와 같이 잘 알려진 여러 Android 및 iOS 모델을 포함하여 XNUMX 개 이상의 장치 중 하나에 표시되는 것과 거의 똑같이 렌더링하는 시뮬레이터에서 활성 페이지를 볼 수 있습니다. 또한 특정 개발 또는 테스트 요구 사항에 맞게 사용자 지정 화면 해상도를 에뮬레이션 할 수있는 기능도 제공됩니다.

전환하려면 장치 모드 켜고 끄려면 휴대폰 아이콘 바로 왼쪽에 위치 요소 탭.
먼저 다음을 선택하여 개발자 도구의 모양과 느낌을 사용자 지정할 수도 있습니다. 메뉴 버튼 에 의해 대표되는 수직으로 배치 된 세 개의 점 앞서 언급 한 탭의 맨 오른쪽에 있습니다.

이 드롭 다운 메뉴 내에서 도크 위치를 변경하고, 다른 도구를 표시하거나 숨길 수있을뿐만 아니라 장치 검사기와 같은 고급 항목을 실행할 수 있습니다. 이 섹션에있는 설정을 통해 개발 도구 인터페이스 자체를 고도로 사용자 지정할 수 있습니다.

모질라 파이어 폭스

Firefox의 웹 개발자 섹션에는 스타일 편집기 및 픽셀 대상 스포이드와 같은 디자이너, 개발자 및 테스터를위한 도구가 포함되어 있습니다.

Firefox의 선택 주 메뉴,로 표시 3 개의 수평선 브라우저 창의 오른쪽 상단에 있습니다.
드롭 다운 메뉴가 나타나면 웹 개발자.
그리고, 웹 개발자 메뉴 이제 다음 옵션이 포함 된이 표시됩니다. 대부분의 메뉴 항목에는 키보드 단축키가 연결되어 있습니다.
- 토글 도구: 일반적으로 브라우저 창 하단에있는 개발자 도구 인터페이스를 표시하거나 숨 깁니다. 키보드 단축키 : Mac OS X (Alt (옵션) + 명령 + I), Windows (Ctrl + Shift + I)
- 검사관: 원격 디버깅을 통해 휴대용 장치뿐만 아니라 활성 페이지에서 CSS 및 HTML 코드를 검사 및 / 또는 조정할 수 있습니다. 키보드 단축키 : Mac OS X (Alt (옵션) + 명령 + C), Windows (Ctrl + Shift + C)
- 웹 콘솔: 활성 페이지 내에서 JavaScript 표현식을 실행할 수있을뿐만 아니라 보안 경고, 네트워크 요청, CSS 메시지 등을 포함한 다양한 로그 데이터 집합을 검토 할 수 있습니다. 키보드 단축키 : Mac OS X (Alt (옵션) + 명령 + K), Windows (Ctrl + Shift + K)
- 디버거: JavaScript 디버거를 사용하면 중단 점 설정, DOM 노드 검사, 외부 소스 블랙 박스 등을 통해 결함을 정확히 찾아 내고 수정할 수 있습니다. Inspector와 마찬가지로이 기능은 원격 디버깅도 지원합니다. 키보드 단축키 : Mac OS X (Alt (옵션) + 명령 + S), Windows (Ctrl + Shift + S)
- 스타일 편집기: 새 스타일 시트를 만들어 활성 웹 페이지에 통합하거나 기존 시트를 편집하고 한 번의 클릭으로 브라우저에서 변경 사항이 렌더링되는 방식을 테스트 할 수 있습니다. 키보드 바로 가기 : Mac OS X, Windows (Shift + F7)
- 성과: 활성 페이지의 네트워크 성능, 프레임 속도 데이터, JavaScript 실행 시간 및 상태, 페인트 깜박임 등에 대한 자세한 분석을 제공합니다. 키보드 바로 가기 : Mac OS X, Windows (Shift + F5)
- 네트워크: 브라우저에서 시작된 각 네트워크 요청을 해당 방법, 원본 도메인, 유형, 크기 및 경과 시간과 함께 나열합니다. 키보드 단축키 : Mac OS X (Alt (옵션) + 명령 + Q), Windows (Ctrl + Shift + Q)
- 스토리지 검사기: 웹 사이트에 저장되는 캐시와 쿠키를 살펴보세요. 키보드 단축키: (SHIFT + F9)
- 개발자 도구 모음: 대화 형 명령 줄 인터프리터를 엽니 다. 시작하다 도움 사용 가능한 모든 명령 및 적절한 구문 목록을 인터프리터에 입력하십시오. 키보드 바로 가기 : Mac OS X, Windows (Shift + F2)
- WebIDE: Firefox OS를 실행하는 실제 장치 또는 Firefox OS Simulator를 통해 웹 앱을 만들고 실행할 수있는 기능을 제공합니다. 키보드 바로 가기 : Mac OS X, Windows (Shift + F8)
- 브라우저 콘솔: 웹 콘솔과 동일한 기능을 제공합니다 (위 참조). 그러나 반환 된 모든 데이터는 활성 웹 페이지가 아닌 전체 Firefox 애플리케이션 (확장 프로그램 및 브라우저 수준 기능 포함)에 대한 것입니다. 키보드 단축키 : Mac OS X (Shift + 명령 + J), Windows (Ctrl + Shift + J)
- 반응 형 디자인보기: 다양한 해상도, 레이아웃, 화면 크기로 즉시 웹 페이지를 볼 수있어 태블릿, 스마트 폰 등 여러 기기를 모방 할 수 있습니다. 키보드 단축키 : Mac OS X (Alt (옵션) + 명령 + M), Windows (Ctrl + Shift + M)
- 스포이드: 개별적으로 선택된 픽셀에 대한 XNUMX 진수 색상 코드를 표시합니다.
- 스크래치 패드: Scratchpad를 사용하면 팝업 Firefox 창에서 JavaScript 코드 스 니펫을 작성, 편집, 통합 및 실행할 수 있습니다. 코드를 작성하고 웹 사이트에 대해 테스트 할 수있는 대화 형 JavaScript 문서를 엽니 다. 키보드 단축키: (SHIFT + F4)
- 봉사 노동자: 웹 애플리케이션에서 서비스 워커를 디버그합니다. 성능 및 오류에 대한 자세한 정보를 얻으십시오.
- 페이지 소스: 원래 브라우저 기반 개발자 도구 인이 옵션은 단순히 활성 페이지에 대해 사용 가능한 소스 코드를 표시합니다. 키보드 단축키 : Mac OS X (COMMAND + U), Windows (CTRL + U)
- 더 많은 도구 얻기: 열립니다 웹 개발자 도구 상자 Mozilla의 공식 애드온 사이트의 컬렉션으로 Firebug 및 Greasemonkey와 같은 약 XNUMX 개의 인기 확장 기능을 제공합니다.

Microsoft Edge / Internet Explorer

일반적으로 F12 개발자 도구, Internet Explorer의 이전 버전 이후 인터페이스를 시작한 바로 가기 키에 대한 경의, IE11 및 Microsoft Edge의 개발 도구 집합은 매우 편리한 모니터, 디버거, 에뮬레이터 등을 제공함으로써 처음부터 먼 길을 왔습니다. -the-fly 컴파일러.

고르다 추가 작업,로 표시 3 도트 브라우저 창의 오른쪽 상단에 있습니다.
드롭 다운 메뉴가 나타나면 레이블이 지정된 옵션을 선택합니다. 개발자 도구.
이제 개발 인터페이스가 일반적으로 브라우저 창 하단에 표시됩니다. 다음 도구를 사용할 수 있으며 각 도구는 해당 탭 제목을 클릭하거나 함께 제공되는 키보드 단축키를 사용하여 액세스 할 수 있습니다.
- DOM 탐색기: 활성 페이지에서 스타일 시트 및 HTML을 편집하여 이동하면서 수정 된 결과를 렌더링 할 수 있습니다. IntelliSense 기능을 활용하여 해당하는 경우 코드를 자동 완성합니다. 키보드 단축키: (CTRL + 1)
- 콘솔에서: 통합 API를 통해 카운터, 타이머, 추적 및 사용자 정의 메시지를 포함한 디버깅 정보를 제출하는 기능을 제공합니다. 또한 활성 웹 페이지에 코드를 삽입하고 개별 변수에 할당 된 값을 실시간으로 수정할 수 있습니다. 키보드 단축키: (CTRL + 2)
- 디버거: 실행되는 동안 중단 점을 설정하고 필요한 경우 한 줄씩 코드를 디버그 할 수 있습니다. 키보드 단축키: (CTRL + 3)
- 네트워크: 프로토콜 세부 정보, 콘텐츠 유형, 대역폭 사용량 등을 포함하여 페이지로드 및 실행 중에 브라우저에서 시작된 각 네트워크 요청을 나열합니다. 키보드 단축키: (CTRL + 4)
- 성과: 페이지로드 시간 및 기타 활동의 속도를 높이는 데 도움이되도록 프레임 속도, CPU 사용률 및 기타 성능 관련 메트릭을 자세히 설명합니다. 키보드 단축키: (CTRL + 5)
- 기억: 다른 시간 간격의 스냅 샷과 함께 메모리 사용 타임 라인을 표시하여 현재 웹 페이지에서 잠재적 인 메모리 누수를 격리하고 수정할 수 있습니다. 키보드 단축키: (CTRL + 6)
- 에뮬레이션: 스마트 폰, 태블릿 및 기타 장치를 에뮬레이션하여 활성 페이지가 다양한 해상도 및 화면 크기에서 어떻게 렌더링되는지 보여줍니다. 또한 사용자 에이전트 및 페이지 방향을 수정하고 위도와 경도를 입력하여 다양한 지리적 위치를 시뮬레이션하는 기능도 제공합니다. 키보드 단축키: (CTRL + 7)
표시하려면 콘솔에서 다른 도구 내에서 사각형 버튼 개발 도구 인터페이스의 오른쪽 상단 모서리에있는 오른쪽 대괄호가 내부에 있습니다.
개발자 도구 인터페이스를 분리하여 별도의 창으로 만들려면 두 개의 계단식 직사각형 또는 다음 키보드 단축키를 사용하십시오. CTRL + P. Ctrl + P를 두 번 눌러 도구를 원래 위치로 되돌릴 수 있습니다.

Apple Safari (OS X 전용)

Safari의 다양한 개발 도구 세트는 설계 및 프로그래밍 요구 사항에 Mac을 사용하는 대규모 개발자 커뮤니티를 반영합니다. 강력한 콘솔과 기존 로깅 및 디버깅 기능 외에도 사용하기 쉬운 반응 형 디자인 모드와 사용자 고유의 브라우저 확장을 만드는 도구도 제공됩니다.

고르다 원정 여행 화면 상단에있는 브라우저 메뉴에서 드롭 다운 메뉴가 나타나면 환경 설정. 이 메뉴 항목 대신 다음 키보드 단축키를 사용할 수도 있습니다. COMMAND + COMMA(,)
사파리 환경 설정 이제 인터페이스가 표시되어 브라우저 창에 오버레이됩니다. 선택 고급 아이콘, 헤더의 맨 오른쪽에 있습니다.
그리고, 고급 이제 기본 설정이 표시됩니다. 이 화면 하단에는 개발 메뉴 표시 체크 박스와 함께 메뉴 표시 줄에서. 상자에 체크 표시가 없으면 한 번 클릭하여 거기에 놓습니다.
닫기 환경 설정 인터페이스.
이제 브라우저 메뉴에 새 옵션이 표시됩니다. 개발, 사이에 위치 책갈피 및 창. 이 메뉴 항목을 클릭하십시오. 이제 다음 옵션이 포함 된 드롭 다운 메뉴가 표시됩니다.
- 페이지 열기: 현재 Mac에 설치된 다른 브라우저 중 하나에서 활성 웹 페이지를 열 수 있습니다.
- 사용자 에이전트: 여러 버전의 Chrome, Firefox 및 Internet Explorer를 포함하여 미리 정의 된 XNUMX 개 이상의 사용자 에이전트 값 중에서 선택하고 사용자 지정 문자열을 정의 할 수 있습니다.
- 반응 형 디자인 모드 시작: 현재 페이지를 다양한 장치 및 다양한 화면 해상도에 표시되는 것처럼 렌더링합니다.
- 웹 검사기 표시: 일반적으로 브라우저 화면 하단에 위치하며 요소, 네트워크, 리소스, 타임 라인, 디버거, 저장소, 콘솔 섹션을 포함하는 Safari 개발 도구의 기본 인터페이스를 시작합니다.
- 오류 콘솔 표시: 또한 개발 도구 인터페이스를 시작하여 콘솔 탭 오류, 경고 및 기타 검색 가능한 로그 데이터를 표시합니다.
- 페이지 소스 표시: 열립니다 리소스 탭, 문서별로 분류 된 활성 페이지의 소스 코드를 표시합니다.
- 페이지 리소스 표시: 페이지 소스 표시 옵션과 동일한 기능을 수행합니다.
- 스 니펫 편집기 표시: CSS 및 HTML 코드를 입력 할 수있는 새 창을 열고 즉시 출력을 미리 볼 수 있습니다.
- 확장 빌더 표시: CSS, HTML 및 JavaScript를 사용하여 Safari 확장을 만들거나 편집하는 기능을 제공합니다.
- 타임 라인 기록 표시: 타임 라인 탭을 열고 네트워크 요청, 레이아웃 및 렌더링 정보는 물론 JavaScript 실행을 실시간으로 표시하기 시작합니다.
- 빈 캐시: 현재 하드 드라이브에 저장되어있는 전체 캐시를 삭제합니다.
- 캐시 비활성화: Safari에서 캐싱을 중지하여 각 페이지가로드 될 때 서버에서 모든 콘텐츠를 검색합니다.
- 이미지 비활성화: 모든 웹 페이지에서 이미지가 렌더링되지 않도록합니다.
- 스타일 비활성화: 페이지가로드 될 때 CSS 속성을 무시합니다.
- JavaScript 비활성화: 모든 페이지에서 JavaScript 실행을 제한합니다.
- 확장 프로그램 사용 중지: 설치된 모든 확장 프로그램이 브라우저 내에서 실행되는 것을 금지합니다.
- 사이트 별 해킹 비활성화: 활성 웹 페이지에 특정한 문제를 명시 적으로 처리하도록 Safari가 수정 된 경우이 옵션은 이러한 변경 사항을 차단하여 이러한 수정 사항이 도입되기 전에 페이지가로드되도록합니다.
- 로컬 파일 제한 비활성화: 브라우저가 로컬 디스크의 파일에 액세스 할 수 있도록 허용합니다.이 작업은 보안상의 이유로 기본적으로 제한됩니다.
- 교차 출처 제한 비활성화: 이러한 제한은 XSS 및 기타 잠재적 인 위험을 방지하기 위해 기본적으로 적용됩니다. 그러나 개발 목적으로 일시적으로 비활성화해야하는 경우가 많습니다.
- 스마트 검색 필드에서 JavaScript 허용: 활성화되면 주소 표시 줄에 직접 통합 된 javascript :를 사용하여 URL을 입력하는 기능을 제공합니다.
- SHA-1 인증서를 안전하지 않은 것으로 취급: SHA-1 알고리즘을 사용하는 SSL 인증서는 오래되고 취약한 것으로 널리 간주됩니다.