오늘날의 세계에서 웹 개발자가된다는 것은 때로는 어려운 작업으로 판명 될 수있는 수많은 장치 및 플랫폼을 지원한다는 것을 의미합니다. 최신 웹 표준을 준수하는 가장 잘 디자인 된 코드를 사용하더라도 웹 사이트의 일부가 특정 장치 나 해상도에서 원하는 방식으로 보이지 않거나 작동하지 않을 수 있습니다. 이와 같은 다양한 시나리오를 지원해야하는 어려움에 직면했을 때 적절한 시뮬레이션 도구를 갖추는 것이 매우 중요합니다.
Mac을 사용하는 많은 프로그래머 중 한 명이라면 Safari의 개발자 툴셋이 항상 편리합니다. Safari 9가 출시됨에 따라이 기능의 폭이 크게 확장되었습니다. 주로 반응 형 디자인 모드로 인해 다양한 화면 해상도와 다양한 iPad, iPhone 및 iPod touch에서 사이트가 어떻게 렌더링되는지 미리 볼 수 있습니다.
이 자습서에서는 반응 형 디자인 모드를 활성화하는 방법과 개발 요구 사항에 활용하는 방법을 자세히 설명합니다.
Safari 환경 설정
먼저 Safari 브라우저를 엽니 다.
클릭 원정 여행 화면 상단에있는 브라우저 메뉴에 있습니다. 드롭 다운 메뉴가 나타나면 환경 설정 옵션은 표시된 예에서 동그라미 표시됩니다.
노트: 앞서 언급 한 메뉴 항목 대신 다음 바로 가기 키를 사용할 수 있습니다. COMMAND + COMMA (,)
02 of 02개발 메뉴 표시
이제 Safari의 환경 설정 대화 상자가 브라우저 창 위에 겹쳐서 표시됩니다. 먼저, 많은 아이콘은 기어로 표시되며 창의 오른쪽 상단 모서리에 있습니다.
이제 브라우저의 고급 환경 설정이 표시됩니다. 하단에는 확인란이 붙은 옵션이 있습니다. 메뉴 막대에 개발 메뉴 표시 위의 예에서 원으로 둘러 쌉니다. 이 메뉴를 활성화하려면 확인란을 한 번 클릭하십시오.
03 of 05반응 형 디자인 모드 들어가기
새 옵션이 이제 화면의 상단에있는 Safari 메뉴에서 사용할 수 있습니다. 나타나게 하다. 이 옵션을 클릭하십시오.
드롭 다운 메뉴가 나타나면 반응 형 디자인 모드 들어가기표시된 예에서 동그라미를 그립니다.
노트: 앞서 언급 한 메뉴 항목 대신 다음 바로 가기 키를 사용할 수 있습니다.OPTION + COMMAND + R
04 / 05반응 형 디자인 모드
활성 웹 페이지는 위의 예와 같이 반응 형 디자인 모드로 표시됩니다. iPhone 6과 같은 나열된 iOS 장치 중 하나를 선택하거나 800 x 600과 같이 사용 가능한 지정된 화면 해상도 중 하나를 선택하면 페이지가 해당 장치에서 또는 해당 디스플레이 해상도로 어떻게 렌더링되는지 즉시 볼 수 있습니다.
표시된 장치 및 해상도 외에도 Safari가 해상도 아이콘 바로 위에있는 드롭 다운 메뉴를 클릭하여 다른 브라우저에서와 같이 다른 사용자 에이전트를 시뮬레이트하도록 지시 할 수 있습니다.
05/05메뉴 개발 : 기타 옵션
반응 형 디자인 모드 외에도 Safari 9의 개발 메뉴에는 다음과 같은 유용한 옵션이 많이 있습니다.
- 다음과 같은 페이지 열기 : 현재 Mac에 설치된 다른 브라우저에서 활성 웹 페이지를 열 수 있습니다.
- 사용자 에이전트: 사용자 에이전트를 변경하면 웹 서버가 브라우저를 Safari 9 이외의 것으로 식별합니다.
- 웹 속성 연결 : Safari 9의 Web Inspector는 웹 페이지의 모든 리소스를 표시하여 CSS 정보, DOM 메트릭 및 구조뿐만 아니라 기본 소스 코드를 볼 수 있습니다.
- 오류 콘솔 표시 : 개발 메뉴에서 가장 널리 사용되는 옵션 중 하나 인이 콘솔은 JavaScript, HTML 및 XML 오류 및 경고를 표시합니다.
- 페이지 소스보기 : 활성 웹 페이지의 소스 코드를보고 검색 할 수 있습니다.
- 페이지 리소스 표시 : 이 옵션을 선택하면 현재 페이지의 문서, 스크립트, CSS 및 기타 리소스가 표시됩니다.
- 스 니펫 편집기 표시 : 전체 페이지가 아닌 코드 조각을 편집하고 실행할 수있는 기능을 제공합니다. 이 기능은 테스트 관점에서 매우 유용합니다.
- 확장 기능 빌더 표시 : 그에 따라 코드를 패키징하고 메타 데이터를 추가하여 자체 Safari 확장을 빌드 할 수 있습니다.
- 타임 라인 기록 시작 : 네트워크 요청, JavaScript 실행, 페이지 렌더링 및 사용자 정의 기간 동안의 기타 이벤트를 비롯하여 WebKit Inspector 내에서 모두 볼 수있는 여러 항목을 기록합니다.
- 빈 캐시 : 이 옵션을 클릭하면 표준 웹 사이트 캐시 파일뿐만 아니라 Safari 내의 저장된 캐시가 모두 삭제됩니다.
- 캐시 사용 중지 : 캐싱을 사용하지 않으면 로컬 캐시를 사용하지 않고 액세스 요청이있을 때마다 웹 사이트에서 리소스가 다운로드됩니다.
- 스마트 검색 필드에서 자바 스크립트 허용 : 보안상의 이유로 기본적으로 사용 중지 된이 기능을 사용하면 Safari의 주소 표시 줄에 JavaScript가 포함 된 URL을 입력 할 수 있습니다.
- SHA-1 인증서를 안전하지 않은 것으로 간주하십시오. Secure Hash Algorithm의 약자 인 SHA-1 해시 함수는 원래 생각했던 것보다 덜 안전하다는 것이 입증되었으므로 Safari 9에이 옵션이 추가되었습니다.
