웹 디자이너, 개발자 및 테스터를위한 통합 도구 세트
웹 서핑을 원하는 일상적인 사용자에게 초점을 맞춘 대부분의 브라우저 제조업체 외에도 강력한 도구를 브라우저에 통합하여 액세스하는 앱과 사이트를 구축하는 데 도움을주는 웹 개발자, 디자이너 및 품질 보증 전문가를 지원합니다. 그들 자신.
브라우저 내에서 발견 된 유일한 프로그래밍 및 테스트 도구로 인해 페이지의 소스 코드를 볼 수있는 기회가 없었습니다. 오늘날의 브라우저는 JavaScript 스 니펫 실행 및 디버깅, DOM 요소 검사 및 편집, 병목 현상을 식별하기 위해 앱 또는 페이지로드시 실시간 네트워크 트래픽 모니터링, CSS 성능 분석, 코드 확인 등의 작업을 수행하여 훨씬 더 심도 깊은 다이빙을 할 수 있습니다. 너무 많은 메모리 또는 너무 많은 CPU 사이클을 사용하지 않는 등의 이점이 있습니다. 테스트의 관점에서 보면, 반응 형 디자인 및 내장 시뮬레이터의 마법을 통해 앱 또는 웹 페이지가 다른 브라우저 및 다른 장치 및 플랫폼에서 렌더링되는 방식을 재현 할 수 있습니다. 가장 중요한 부분은 브라우저를 떠나지 않고도이 모든 것을 할 수 있다는 것입니다!
아래의 자습서에서는 몇 가지 일반적인 웹 브라우저에서 이러한 개발자 도구에 액세스하는 방법을 설명합니다.
구글 크롬
Chrome의 개발자 도구를 사용하면 코드를 수정 및 디버깅하고 개별 구성 요소를 감사하여 성능 문제를 노출하고 Android 또는 iOS를 실행하는 기기 화면을 비롯하여 다양한 기기 화면을 시뮬레이션하고 여러 가지 유용한 기능을 수행 할 수 있습니다.
- 세 개의 수평선으로 표시되고 브라우저의 오른쪽 상단에있는 Chrome의 기본 메뉴 버튼을 클릭합니다.
- 드롭 다운 메뉴가 나타나면 마우스 커서를 기타 도구 옵션 위로 가져갑니다.
- 하위 메뉴가 나타납니다. 개발자 도구 라는 옵션을 선택하십시오. 이 메뉴 항목 대신 다음 키보드 단축키를 사용할 수도 있습니다 : Chrome OS / Windows ( Ctrl + Shift + I ), Mac OS X ( ALT (OPTION) + COMMAND + I )
- 이 예제 스크린 샷과 같이 Chrome 개발자 도구 인터페이스가 표시되어야합니다. 사용중인 Chrome 버전에 따라 표시되는 초기 레이아웃이 여기에 표시된 것과 약간 다를 수 있습니다. 일반적으로 화면의 맨 아래 또는 오른쪽에 위치한 개발자 도구의 기본 허브에는 다음과 같은 탭이 있습니다.
요소 : CSS 및 HTML 코드를 검사하고 CSS를 즉시 편집하고 변경 사항의 영향을 실시간으로 확인하는 기능을 제공합니다.
콘솔 : Chrome의 자바 스크립트 콘솔은 진단 디버깅뿐만 아니라 직접 명령 입력을 허용합니다.
소스 : 강력한 그래픽 인터페이스를 통해 JavaScript 코드를 디버그 할 수 있습니다.
네트워크 : 완전한 요청 및 응답 헤더와 고급 타이밍 메트릭을 포함하여 활성 응용 프로그램 또는 페이지의 각 관련 작업에 대한 세부 정보를 분류하고 표시합니다.
타임 라인 : 페이지 또는 앱로드 요청이 시작되는 즉시 브라우저 내에서 발생하는 모든 활동에 대한 심층 분석을 가능하게합니다. - 이 섹션 외에도, 타임 라인 탭의 오른쪽에있는 >> 아이콘을 통해 다음 도구에 액세스 할 수 있습니다.
프로파일 : CPU 프로파일 러 및 힙 프로파일 러 섹션으로 나누어 활성 응용 프로그램 또는 페이지의 전체적인 메모리 사용 및 전반적인 실행 시간을 제공합니다.
보안 : 활성 페이지 또는 응용 프로그램의 인증서 문제 및 기타 보안 관련 문제를 강조 표시합니다.
리소스 : 여기에서 쿠키, 로컬 저장소, 응용 프로그램 캐시 및 현재 웹 페이지 또는 응용 프로그램에서 사용하는 다른 로컬 데이터 원본을 검사 할 수 있습니다.
감사 : 페이지 또는 응용 프로그램의로드 시간 및 일반 성능을 최적화하는 방법을 제공합니다. - Device Mode를 사용하면 시뮬레이터에서 활성 페이지를 볼 수 있습니다.이 페이지는 iPad, iPhone 및 Samsung Galaxy와 같이 잘 알려진 여러 Android 및 iOS 모델을 포함하여 12 개가 넘는 장치 중 하나에 표시되는 것과 거의 동일하게 렌더링됩니다. 또한 특정 개발 또는 테스트 요구에 맞게 사용자 지정 화면 해상도를 에뮬레이트 할 수있는 기능이 제공됩니다. 장치 모드를 켜거나 끄려면 요소 탭의 왼쪽에있는 휴대폰 아이콘을 선택하십시오.
- 앞서 설명한 탭의 맨 오른쪽에 세로로 배치 된 세 개의 점으로 표시된 메뉴 버튼을 먼저 클릭하여 개발자 도구의 모양과 느낌을 사용자 정의 할 수 있습니다. 이 드롭 다운 메뉴에서 도크의 위치를 변경하고 다른 도구를 표시하거나 숨길 수 있으며 장치 관리자와 같은 고급 항목을 시작할 수 있습니다. dev 도구 인터페이스 자체는이 섹션의 설정을 통해 사용자 정의가 가능하다는 것을 알 수 있습니다.
모질라 파이어 폭스
Firefox의 웹 개발자 섹션에는 스타일 편집기 및 픽셀 타겟팅 스포이드와 같은 디자이너, 개발자 및 테스터를위한 도구가 모두 포함되어 있습니다.
추천 읽기 : 톱 25 그리스 몽키와 Tampermonkey 사용자 스크립트
- 세 개의 수평선으로 표시되고 브라우저 창의 오른쪽 상단 구석에있는 Firefox의 기본 메뉴 버튼을 클릭하십시오.
- 드롭 다운 메뉴가 나타나면 개발자 라는 레이블이 지정된 아이콘을 선택하십시오. 이제 웹 개발자 메뉴가 표시되고 다음 옵션이 포함됩니다. 대부분의 메뉴 항목에는 키보드 단축키가 있습니다.
토글 도구 : 일반적으로 브라우저 창 하단에 위치한 개발자 도구 인터페이스를 표시하거나 숨 깁니다. 바로 가기 키 : Mac OS X ( Alt + Option + I ), Windows ( Ctrl + Shift + I )
Inspector : 원격 디버깅을 통해 휴대용 장치는 물론 활성 페이지의 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 노드를 검사하고 블랙 박스 외부 소스를 검사하여 결함을 찾아 내고 수정할 수 있습니다. Inspector 의 경우와 마찬가지로이 기능은 원격 디버깅을 지원합니다. 바로 가기 키 : 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 )
WebIDE : 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 진수 색상 코드를 표시합니다.
Scratchpad : 팝업 Firefox 창에서 JavaScript 코드의 작성, 편집, 통합 및 실행을 할 수 있습니다. 키보드 단축키 : Mac OS X, Windows ( Shift + F4 )
페이지 소스 : 원래 브라우저 기반 개발자 도구 인이 옵션은 활성 페이지에 사용할 수있는 소스 코드를 표시합니다. 키보드 단축키 : Mac OS X ( COMMAND + U ), Windows ( CTRL + U )
더 많은 도구 가져 오기 : Firebug 및 Greasemonkey와 같은 인기있는 확장 기능을 갖춘 Mozilla의 공식 추가 기능 사이트에서 Web Developer 's Toolbox 컬렉션을 엽니 다.
Microsoft Edge / Internet Explorer
Internet Explorer의 이전 버전, IE11 및 Microsoft Edge의 개발 도구 모음이 출시 된 이래로 인터페이스를 시작한 바로 가기 키에 대한 존경심 인 F12 개발자 도구 는 일반적으로 매우 편리한 그룹을 제공함으로써 시작되었습니다. 모니터, 디버거, 에뮬레이터 및 직접 컴파일러가 있습니다.
- 세 개의 점으로 표시되고 브라우저 창 오른쪽 상단 모서리에있는 추가 작업 메뉴를 클릭하십시오. 드롭 다운 메뉴가 나타나면 F12 개발자 도구 라는 옵션을 선택하십시오. 앞서 언급했듯이 F12 키보드 단축키를 사용하여 도구에 액세스 할 수도 있습니다.
- 일반적으로 브라우저 창 하단에 개발 인터페이스가 표시됩니다. 다음 도구를 사용할 수 있으며 각각의 탭 머리글을 클릭하거나 수반되는 키보드 단축키를 사용하여 액세스 할 수 있습니다.
DOM Explorer : 활성 페이지에서 스타일 시트와 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을 사용하는 대규모 개발자 커뮤니티를 반영합니다. 강력한 콘솔과 기존의 로깅 및 디버깅 기능 외에도 사용하기 쉬운 응답 설계 모드와 고유 한 브라우저 확장을 만드는 도구가 제공됩니다.
- 화면 상단에있는 브라우저 메뉴에서 Safari 를 클릭하십시오. 드롭 다운 메뉴가 나타나면 환경 설정을 선택하십시오. 이 메뉴 항목 대신 다음 바로 가기 키를 사용할 수도 있습니다. COMMAND + COMMA (,)
- 이제 Safari의 환경 설정 인터페이스가 브라우저 창 위에 겹쳐서 표시됩니다. 머리글의 맨 오른쪽에있는 고급 아이콘을 클릭하십시오.
- 고급 환경 설정이 표시됩니다. 이 화면의 하단에는 메뉴 표시 줄에 Show Develop menu 라는 레이블이 붙은 옵션과 함께 확인란이 있습니다. 상자에 체크 표시가 없으면 한 번 클릭하여 상자에 체크 표시를하십시오.
- 왼쪽 상단 모서리에있는 빨간색 'x'를 클릭하여 환경 설정 인터페이스를 닫습니다.
- 북마크 와 창 사이에 위치한 브라우저 메뉴에서 Develop 이라는 새로운 옵션을 발견하게되었습니다. 이 메뉴 항목을 클릭하십시오. 다음 옵션이 포함 된 드롭 다운 메뉴가 표시됩니다.
현재 페이지 열기 : 현재 Mac에 설치된 다른 브라우저 중 하나에서 활성 웹 페이지를 열 수 있습니다.
사용자 에이전트 : Chrome, Firefox 및 Internet Explorer의 여러 버전을 비롯하여 사용자 정의 문자열을 정의 할 수있는 사전 정의 된 사용자 에이전트 값을 선택할 수 있습니다.
반응 형 디자인 모드로 들어가기 : 현재 페이지를 다양한 장치 및 다른 화면 해상도에서와 같이 렌더링합니다.
웹 관리자 표시 : 일반적으로 브라우저 화면의 맨 아래에 있으며 요소 , 네트워크 , 리소스 , 타임 라인 , 디버거 , 저장소 , 콘솔 등의 섹션이 포함 된 Safari의 개발 도구 용 기본 인터페이스를 시작합니다.
Show Error Console : 또한 오류, 경고 및 기타 검색 가능한 로그 데이터를 표시하는 콘솔 탭에 직접 dev 도구 인터페이스를 시작합니다.
페이지 소스 표시 : 문서별로 분류 된 활성 페이지의 소스 코드를 표시하는 리소스 탭을 엽니 다.
페이지 자원 표시 : 페이지 소스 표시 옵션과 동일한 기능을 수행합니다.
스 니펫 편집기 표시 : CSS 및 HTML 코드를 입력하고 출력을 미리 볼 수있는 새 창을 엽니 다.
Extension Builder 표시 : CSS, HTML 및 JavaScript로 Safari 확장을 작성하거나 편집 할 수 있습니다.
타임 라인 기록 표시 : 타임 라인 탭을 열고 실시간으로 자바 스크립트 실행은 물론 네트워크 요청, 레이아웃 및 렌더링 정보 표시를 시작합니다.
Empty Caches : 현재 하드 드라이브에 저장된 전체 캐시를 삭제합니다.
캐시 사용 안 함 : 캐싱에서 Safari를 중지하여 각 페이지가로드 될 때 모든 콘텐츠가 서버에서 검색되도록합니다.
이미지 비활성화 : 이미지가 모든 웹 페이지에서 렌더링되지 않도록합니다.
스타일 사용 안함 : 페이지가로드 될 때 CSS 속성을 무시합니다.
JavaScript 비활성화 : 모든 페이지에서 JavaScript 실행을 제한합니다.
확장 프로그램 사용 중지 : 설치된 모든 확장 프로그램 을 브라우저에서 실행하지 못하도록합니다.
사이트 별 해킹 사용 안 함 : 활성 웹 페이지 관련 문제를 명시 적으로 처리하도록 Safari를 수정 한 경우이 옵션을 사용하면 이러한 변경 사항이 차단되어 해당 수정 사항을 적용하기 전에 페이지가로드됩니다.
로컬 파일 제한 사용 안 함 : 브라우저가 로컬 디스크의 파일에 액세스 할 수 있도록 허용합니다.이 작업은 보안상의 이유로 기본적으로 제한됩니다.
교차 원산지 금지 설정 : XSS 및 기타 잠재적 위험을 방지하기 위해 기본적으로이 제한이 적용됩니다. 그러나 개발 목적을 위해 일시적으로 비활성화해야하는 경우가 종종 있습니다.
스마트 검색 필드에서 자바 스크립트 허용 : 사용하도록 설정하면 주소 표시 줄에 javascript :를 직접 입력하여 URL을 입력 할 수 있습니다.
SHA-1 인증서를 안전하지 않은 것으로 간주하십시오 : SHA-1 알고리즘을 사용하는 SSL 인증서는 오래되고 취약한 것으로 널리 간주됩니다.