콘텐츠
Apple 웹 브라우저에서 개발자 도구에 액세스
웹 사이트 및 웹 앱이 다양한 장치 및 플랫폼을 지원하도록하는 것은 웹 개발자에게 필수적인 작업입니다. Apple의 Safari 웹 브라우저에는 반응 형 디자인 모드가 포함되어있어 다양한 화면 해상도와 다양한 iPad, iPhone 및 iPod touch 빌드에서 사이트가 렌더링되는 방식을 미리 볼 수 있습니다.
이 기사의 지침은 macOS 용 Safari 13에 적용됩니다. 반응 형 디자인 모드는 Windows 버전에서 사용할 수 없습니다.
Safari에서 반응 형 디자인 모드를 활성화하는 방법
Safari의 개발자 도구 및 반응 형 디자인 모드를 활성화하려면 :
-
고르다 원정 여행 > 환경 설정 Safari 툴바에서.
키보드 단축키를 사용할 수도 있습니다 명령+반점 (,) 환경 설정 메뉴에 액세스합니다.
-
환경 설정 메뉴에서 많은 탭 옆의 확인란을 선택하십시오 메뉴 표시 줄에 개발 메뉴 표시. 화면 상단의 Safari 도구 모음에서 새로운 옵션을 사용할 수 있습니다.
-
고르다 나타나게 하다 > 반응 형 디자인 모드 시작 Safari 툴바에서.
키보드 단축키를 사용할 수도 있습니다 선택권+명령+아르 자형 반응 형 디자인 모드로 전환합니다.
-
활성 웹 페이지가 반응 형 디자인 모드로 표시됩니다. 페이지 상단에서 iOS 장치 또는 화면 해상도를 선택하여 페이지 렌더링 방법을 확인하십시오.
해상도 아이콘 바로 위에있는 드롭 다운 메뉴를 사용하여 Safari가 다른 사용자 에이전트를 시뮬레이트하도록 지시 할 수도 있습니다.
사파리 개발자 도구
반응 형 디자인 모드 외에도 Safari의 개발 메뉴에는 다음과 같은 유용한 옵션이 많이 있습니다.
- 페이지 열기: 현재 Mac에 설치된 다른 브라우저에서 활성 웹 페이지를 엽니 다.
- 사용자 에이전트: 사용자 에이전트를 변경하면 웹 서버가 브라우저를 Safari 이외의 것으로 식별합니다.
- 웹 검사기 연결: CSS 정보 및 DOM 메트릭을 포함한 모든 웹 페이지 리소스를 표시합니다.
- 오류 콘솔 표시: JavaScript, HTML 및 XML 오류 및 경고를 표시합니다.
- 페이지 소스 표시: 활성 웹 페이지의 소스 코드를보고 검색합니다.
- 페이지 리소스 표시: 현재 페이지에서 문서, 스크립트, CSS 및 기타 리소스를 표시합니다.
- 스 니펫 편집기 표시: 코드 조각을 편집하고 실행합니다. 이 기능은 테스트 관점에서 매우 유용합니다.
- 확장 프로그램 표시: 코드를 적절히 패키징하고 메타 데이터를 추가하여 고유 한 Safari 확장을 빌드하십시오.
- 타임 라인 녹화 시작: WebKit Inspector 내에서 네트워크 요청, JavaScript 실행, 페이지 렌더링 및 기타 이벤트를 기록합니다.
- 빈 캐시: 표준 웹 사이트 캐시 파일뿐만 아니라 Safari 내에 저장된 모든 캐시를 삭제합니다.
- 캐시 비활성화: 캐싱을 사용하지 않으면 로컬 캐시를 사용하는 대신 액세스 요청을 할 때마다 웹 사이트에서 리소스가 다운로드됩니다.
- 스마트 검색 필드에서 JavaScript 허용: 보안상의 이유로 기본적으로 비활성화되어있는이 기능을 사용하면 Safari의 주소 표시 줄에 JavaScript가 포함 된 URL을 입력 할 수 있습니다.
- SHA-1 인증서를 안전하지 않은 것으로 취급: Secure Hash Algorithm의 약자 인 SHA-1 해시 기능은 원래 생각보다 보안 수준이 낮으므로 Safari에이 옵션이 추가되었습니다.
