Apple은 OS X El Capitan의 Safari 버전 9부터 반응형 디자인 모드를 도입했습니다. 이 인터페이스는 웹 개발자가 다양한 화면 크기, 방향 및 해상도에서 웹 경험을 디자인하는 데 도움이 됩니다. 반응형 디자인은 개발자가 웹사이트와 앱이 여러 기기와 플랫폼을 지원하는지 확인하는 데 도움이 됩니다.
Safari 웹 브라우저에서 반응형 디자인 모드를 활성화하는 방법은 다음과 같습니다.
이 문서의 정보는 macOS Catalina부터 OS X El Capitan까지의 Safari 13부터 Safari 9까지 적용됩니다. Apple이 더 이상 지원하지 않는 Safari의 Windows 버전에서는 반응형 디자인 모드를 사용할 수 없습니다.
Safari에서 반응형 디자인 모드를 활성화하는 방법
다른 Safari 개발자 도구와 함께 Safari 반응형 디자인 모드를 활성화하려면:
-
사파리 로 이동 메뉴에서 환경설정을 선택합니다. .
키보드 단축키 Command 누르기 +, (쉼표) 환경 설정에 빠르게 액세스할 수 있습니다.
-
환경설정 에서 대화 상자에서 고급 탭.
-
대화 상자 하단에서 메뉴 모음에 개발 메뉴 표시를 선택합니다. 확인란을 선택합니다.
-
이제 개발이 표시됩니다. 상단 Safari 메뉴바에서
-
개발 선택> 반응형 디자인 모드 시작 Safari 도구 모음에서.
단축키 Option 누르기 +명령 +R 반응형 디자인 모드로 빠르게 전환합니다.
-
활성 웹 페이지는 반응형 디자인 모드로 표시됩니다. 페이지 상단에서 iOS 기기 또는 화면 해상도를 선택하여 페이지가 어떻게 렌더링되는지 확인합니다.
-
또는 해상도 아이콘 위의 드롭다운 메뉴를 사용하여 다양한 플랫폼에서 웹페이지가 어떻게 렌더링되는지 확인하십시오.
Safari 개발자 도구
반응형 디자인 모드 외에도 Safari 개발 메뉴는 다른 유용한 옵션을 제공합니다.
페이지 열기
현재 Mac에 설치된 모든 브라우저에서 활성 웹 페이지를 엽니다.
사용자 에이전트
사용자 에이전트를 변경하면 웹사이트가 다른 브라우저를 사용하고 있다고 속일 수 있습니다.
웹 검사기 표시
CSS 정보 및 DOM 측정항목을 포함하여 웹페이지의 모든 리소스를 표시합니다.
오류 콘솔 표시
JavaScript, HTML 및 XML 오류 및 경고를 표시합니다.
페이지 소스 표시
활성 웹 페이지의 소스 코드를 보고 페이지 내용을 검색할 수 있습니다.
페이지 리소스 표시
현재 페이지의 문서, 스크립트, CSS 및 기타 리소스를 표시합니다.
스니펫 편집기 표시
코드 조각을 편집하고 실행할 수 있습니다. 이 기능은 테스트 관점에서 유용합니다.
확장 빌더 표시
코드를 적절하게 패키징하고 메타데이터를 추가하여 Safari 확장 프로그램을 구축하는 데 도움이 됩니다.
타임라인 녹화 시작
WebKit Inspector 내에서 네트워크 요청, JavaScript 실행, 페이지 렌더링 및 기타 이벤트를 기록할 수 있습니다.
빈 캐시
표준 웹사이트 캐시 파일뿐만 아니라 Safari에 저장된 모든 캐시를 삭제합니다.
캐시 비활성화
캐싱을 비활성화하면 로컬 캐시를 사용하는 것과 달리 액세스 요청이 있을 때마다 웹사이트에서 리소스가 다운로드됩니다.
스마트 검색 필드에서 JavaScript 허용
보안상의 이유로 기본적으로 비활성화되어 있는 이 기능을 사용하면 JavaScript가 포함된 URL을 Safari 주소 표시줄에 입력할 수 있습니다.