반응형
Safari 개발자 툴
여러분은 Safari의 브라우저 개발자 툴에 대해서 알고 계시나요?
Google Chrome의 디벨로퍼 툴을 알고 있는 사람이 많을 거라고 생각합니다.Chrome의 디벨로퍼 툴에서는 보여 주고 있는 사이트의 html 요소 검증이나 css 등 사이트가 어떤 구성으로 이루어져 있는지 살펴볼 수 있는 검증 툴입니다.
비슷한 기능은 브라우저에 Safari에도 존재하고, Safari에는 개발자툴이라고 하는 이름으로 되어있습니다.게다가 Safari의 개발자 툴에서는 Mac에 접속되어 있는 iPhone에 대해서도와 같이 html 의 요소의 검증등을 행할 수 있습니다.
이번 기사에서는 Safari의 개발자 툴에 대해서 표시를 시키는 방법이나 사용법을 소개합니다.꼭 Safari의 개발자 툴을 활용합시다.
Safari 개발자 툴 표시 방법
기본적으로 Safari의 개발자 툴은 숨겨져 있습니다.우선은 Safari의 개발자 툴을 표시하도록 하겠습니다.
Safari의 메뉴를 열고 ′환경설정′을 선택합니다.
그런 다음 환경설정 중 상세 탭을 엽니다.
그 안에 「메뉴바에′개발′메뉴를 표시」라고 하는 항목이 있으므로, 여기에 체크를 하겠습니다.
그러면 Safari의 메뉴바에 ′개발′메뉴가 추가됩니다.
메뉴바에 개발 메뉴가 추가되어 있으면 이상으로 설정이 완료됩니다.
Safari 개발자 툴 표시 방법
Safari의 ′환경설정′
상세 탭의 ′메뉴 바에 ′개발′ 메뉴 표시′에 체크 표시
Safari 개발자 툴의 Web 인스펙터 사용법
그러면 Safariu의 메뉴바에 추가한 개발 메뉴를 열어 보겠습니다.
Safari의 개발 메뉴를 열면 상당히 많은 기능이 표시됩니다.
이번에는 그 안의 Web 인스펙터의 기능에 대해 해설해보도록 하겠습니다.
Web 인스펙터 표시
적당한 사이트를 Safari에서 열고 개발메뉴의 Web 인스펙터를 표시하고 선택을 하겠습니다.
그러면 Safari에서 html 요소 검증이라던가 사이트 내용물을 확인할 수 있는 웹 인스펙터가 표시됩니다.
브라우저 사이트 디버깅 시 등에 이용하세요.
아이폰의 Safari에서의 Web 인스펙터
iPhone 의 Safari 로 표시하고 있는 Web 사이트를 Mac 의 Safari 의 Web 인스펙터로 표시시킬 수 있습니다.이를 통해 iPhone에서 보고 있는 스마트폰 사이트의 html 요소 검증 등을 할 수 있습니다.
설정하려면 먼저 iPhone측의 설정이 필요합니다.
iPhone의 「설정」에서 Safari를 선택합시다.
Safari의 설정 중에서 맨 아래에 「상세」라고 하는 메뉴가 있으므로 이곳을 선택합니다.
Safari 설정의 상세 메뉴 중에 Web 인스펙터라고 하는 항목이 있으므로 이것을 유효하게 합니다.
이상으로 iPhone측의 설정은 완료입니다.그럼 Mac과 아이폰을 연결해 볼까요?
iPhone이 Mac에 접속되어 있는 상태에서 개발 메뉴를 열면, 「○○의 iPhone」과 같은 iPhone의 이름이 표시됩니다.
여기를 열면 현재 iPhone의 Safari에서 열려 있는 사이트가 표시되어 있습니다.선택합시다.
그러면 현재 iPhone의 Safari에서 보고 있는 웹 사이트의 웹 인스펙터가 표시됩니다.
이것으로 iPhone에서 보고 있는 사이트를 검증할 수 있게 되는 것입니다.
정리
어떠셨는지요?Safari의 개발자 메뉴에 대해 표시를 시키는 방법이나 Web 인스펙터의 사용법, iPhone와의 제휴의 방법에 대해 소개했습니다.
Google Chrome의 디벨로퍼 툴을 평상시 사용하고 있고, Safari에서도 검증이 필요할 때에 「디벨로퍼 툴과 같은 기능은 Safari에는 없는 거야?」라고 생각하는 분이 꼭 이번 기사에서 해설한 방법을 시험해 주셨으면 합니다.
또한 Safari의 개발자 메뉴에는 WebRTC 등 새로운 기능의 설정 등 많은 기능들이 있습니다.꼭 Safari의 개발자 메뉴를 표시하고 잘 다루어 나가도록 하겠습니다.
여러분은 Safari의 브라우저 개발자 툴에 대해서 알고 계시나요?
Google Chrome의 디벨로퍼 툴을 알고 있는 사람이 많을 거라고 생각합니다.Chrome의 디벨로퍼 툴에서는 보여 주고 있는 사이트의 html 요소 검증이나 css 등 사이트가 어떤 구성으로 이루어져 있는지 살펴볼 수 있는 검증 툴입니다.
비슷한 기능은 브라우저에 Safari에도 존재하고, Safari에는 개발자툴이라고 하는 이름으로 되어있습니다.게다가 Safari의 개발자 툴에서는 Mac에 접속되어 있는 iPhone에 대해서도와 같이 html 의 요소의 검증등을 행할 수 있습니다.
이번 기사에서는 Safari의 개발자 툴에 대해서 표시를 시키는 방법이나 사용법을 소개합니다.꼭 Safari의 개발자 툴을 활용합시다.
Safari 개발자 툴 표시 방법
기본적으로 Safari의 개발자 툴은 숨겨져 있습니다.우선은 Safari의 개발자 툴을 표시하도록 하겠습니다.
Safari의 메뉴를 열고 ′환경설정′을 선택합니다.
그런 다음 환경설정 중 상세 탭을 엽니다.
그 안에 「메뉴바에′개발′메뉴를 표시」라고 하는 항목이 있으므로, 여기에 체크를 하겠습니다.
그러면 Safari의 메뉴바에 ′개발′메뉴가 추가됩니다.
메뉴바에 개발 메뉴가 추가되어 있으면 이상으로 설정이 완료됩니다.
Safari 개발자 툴 표시 방법
Safari의 ′환경설정′
상세 탭의 ′메뉴 바에 ′개발′ 메뉴 표시′에 체크 표시
Safari 개발자 툴의 Web 인스펙터 사용법
그러면 Safariu의 메뉴바에 추가한 개발 메뉴를 열어 보겠습니다.
Safari의 개발 메뉴를 열면 상당히 많은 기능이 표시됩니다.
이번에는 그 안의 Web 인스펙터의 기능에 대해 해설해보도록 하겠습니다.
Web 인스펙터 표시
적당한 사이트를 Safari에서 열고 개발메뉴의 Web 인스펙터를 표시하고 선택을 하겠습니다.
그러면 Safari에서 html 요소 검증이라던가 사이트 내용물을 확인할 수 있는 웹 인스펙터가 표시됩니다.
브라우저 사이트 디버깅 시 등에 이용하세요.
아이폰의 Safari에서의 Web 인스펙터
iPhone 의 Safari 로 표시하고 있는 Web 사이트를 Mac 의 Safari 의 Web 인스펙터로 표시시킬 수 있습니다.이를 통해 iPhone에서 보고 있는 스마트폰 사이트의 html 요소 검증 등을 할 수 있습니다.
설정하려면 먼저 iPhone측의 설정이 필요합니다.
iPhone의 「설정」에서 Safari를 선택합시다.
Safari의 설정 중에서 맨 아래에 「상세」라고 하는 메뉴가 있으므로 이곳을 선택합니다.
Safari 설정의 상세 메뉴 중에 Web 인스펙터라고 하는 항목이 있으므로 이것을 유효하게 합니다.
이상으로 iPhone측의 설정은 완료입니다.그럼 Mac과 아이폰을 연결해 볼까요?
iPhone이 Mac에 접속되어 있는 상태에서 개발 메뉴를 열면, 「○○의 iPhone」과 같은 iPhone의 이름이 표시됩니다.
여기를 열면 현재 iPhone의 Safari에서 열려 있는 사이트가 표시되어 있습니다.선택합시다.
그러면 현재 iPhone의 Safari에서 보고 있는 웹 사이트의 웹 인스펙터가 표시됩니다.
이것으로 iPhone에서 보고 있는 사이트를 검증할 수 있게 되는 것입니다.
정리
어떠셨는지요?Safari의 개발자 메뉴에 대해 표시를 시키는 방법이나 Web 인스펙터의 사용법, iPhone와의 제휴의 방법에 대해 소개했습니다.
Google Chrome의 디벨로퍼 툴을 평상시 사용하고 있고, Safari에서도 검증이 필요할 때에 「디벨로퍼 툴과 같은 기능은 Safari에는 없는 거야?」라고 생각하는 분이 꼭 이번 기사에서 해설한 방법을 시험해 주셨으면 합니다.
또한 Safari의 개발자 메뉴에는 WebRTC 등 새로운 기능의 설정 등 많은 기능들이 있습니다.꼭 Safari의 개발자 메뉴를 표시하고 잘 다루어 나가도록 하겠습니다.
반응형