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

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

브라우저 내에서 발견 된 유일한 프로그래밍 및 테스트 도구로 인해 페이지의 소스 코드를 볼 수있는 기회가 없었습니다. 오늘날의 브라우저는 JavaScript 스 니펫 실행 및 디버깅, DOM 요소 검사 및 편집, 병목 현상을 식별하기 위해 앱 또는 페이지로드시 실시간 네트워크 트래픽 모니터링, CSS 성능 분석, 코드 확인 등의 작업을 수행하여 훨씬 더 심도 깊은 다이빙을 할 수 있습니다. 너무 많은 메모리 또는 너무 많은 CPU 사이클을 사용하지 않는 등의 이점이 있습니다. 테스트의 관점에서 보면, 반응 형 디자인 및 내장 시뮬레이터의 마법을 통해 앱 또는 웹 페이지가 다른 브라우저 및 다른 장치 및 플랫폼에서 렌더링되는 방식을 재현 할 수 있습니다. 가장 중요한 부분은 브라우저를 떠나지 않고도이 모든 것을 할 수 있다는 것입니다!

아래의 자습서에서는 몇 가지 일반적인 웹 브라우저에서 이러한 개발자 도구에 액세스하는 방법을 설명합니다.

구글 크롬

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

1. 세 개의 수평선으로 표시되고 브라우저의 오른쪽 상단에있는 Chrome의 기본 메뉴 버튼을 클릭합니다.
2. 드롭 다운 메뉴가 나타나면 마우스 커서를 추가 도구 선택권.
3. 하위 메뉴가 나타납니다. 레이블이있는 옵션을 선택하십시오. 개발자 도구 . 이 메뉴 항목 대신 다음 키보드 단축키를 사용할 수도 있습니다. Chrome OS / Windows ( CTRL + SHIFT + I ), 맥 OS X ( ALT (OPTION) + COMMAND + I )
4. 이 예제 스크린 샷과 같이 Chrome 개발자 도구 인터페이스가 표시되어야합니다. 사용중인 Chrome 버전에 따라 표시되는 초기 레이아웃이 여기에 표시된 것과 약간 다를 수 있습니다. 일반적으로 화면의 맨 아래 또는 오른쪽에 위치한 개발자 도구의 기본 허브에는 다음과 같은 탭이 있습니다.집단: CSS 및 HTML 코드를 검사하고 CSS를 즉시 편집 할 수있는 기능을 제공하여 변경 사항의 영향을 실시간으로 확인합니다.콘솔: Chrome의 자바 스크립트 콘솔을 사용하면 진단 디버깅뿐만 아니라 직접 명령 입력이 가능합니다.출처 : 강력한 그래픽 인터페이스를 통해 JavaScript 코드를 디버그 할 수 있습니다.회로망: 완전한 요청 및 응답 헤더와 고급 타이밍 메트릭을 포함하여 활성 응용 프로그램 또는 페이지의 각 관련 작업에 대한 세부 정보를 분류하고 표시합니다.타임 라인 : 페이지 또는 앱로드 요청이 시작되는 즉시 브라우저에서 이루어지는 모든 활동에 대한 심층적 인 분석을 허용합니다.
5. 이 섹션 외에도 다음 도구를 사용할 수 있습니다. >> 아이콘 오른쪽에있는 타임 라인 탭.윤곽: 부서진 CPU 프로파일 러 과 힙 프로파일 러 섹션에서는 활성 응용 프로그램이나 페이지의 전체적인 메모리 사용과 전반적인 실행 시간을 제공합니다.보안: 활성 페이지 또는 응용 프로그램의 인증서 문제 및 기타 보안 관련 문제를 강조 표시합니다.자원: 여기에서 쿠키, 로컬 저장소, 응용 프로그램 캐시 및 현재 웹 페이지 나 응용 프로그램에서 사용하는 다른 로컬 데이터 소스를 검사 할 수 있습니다.감사 : 페이지 또는 응용 프로그램의로드 시간 및 일반 성능을 최적화하는 방법을 제공합니다.
6. 장치 모드 iPad, iPhone 및 삼성 Galaxy와 같이 잘 알려진 여러 Android 및 iOS 모델을 포함하여 12 개가 넘는 장치 중 하나에 표시되는 것과 거의 똑같이 렌더링되는 활성 페이지를 시뮬레이터에서 볼 수 있습니다. 또한 특정 개발 또는 테스트 요구에 맞게 사용자 지정 화면 해상도를 에뮬레이트 할 수있는 기능이 제공됩니다. 토글하려면 장치 모드 켜고 끄기 왼쪽의 휴대 전화 아이콘을 선택하십시오. 집단 탭.
7. 앞서 설명한 탭의 맨 오른쪽에 세로로 배치 된 세 개의 점으로 표시된 메뉴 버튼을 먼저 클릭하여 개발자 도구의 모양과 느낌을 사용자 정의 할 수 있습니다. 이 드롭 다운 메뉴에서 도크의 위치를 ​​변경하고 다른 도구를 표시하거나 숨길 수 있으며 장치 관리자와 같은 고급 항목을 시작할 수 있습니다. dev 도구 인터페이스 자체는이 섹션의 설정을 통해 사용자 정의가 가능하다는 것을 알 수 있습니다.

모질라 파이어 폭스

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

라이프 와이어 추천 도서 :톱 25 그리스 몽키와 Tampermonkey 사용자 스크립트

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

Microsoft Edge / Internet Explorer

일반적으로 F12 개발자 도구 , 이전 버전의 Internet Explorer, IE11 및 Microsoft Edge의 dev 툴셋이 출시 된 이래로 인터페이스를 시작한 키보드 단축키에 대한 존경심은 모니터, 디버거, 에뮬레이터 및 기타 매우 편리한 그룹을 제공함으로써 시작되었습니다. the-fly 컴파일러.

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

Apple Safari (OS X 전용)

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

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