이 가이드에서는 Safari의 개발자 도구를 사용하는 방법에 대해 자세히 살펴보고자 합니다. Safari의 개발자 도구는 Chrome 및 Firefox의 개발자 도구와 약간의 차이가 있지만 기본 원칙은 동일합니다. 개발자 도구를 활성화하고, 다양한 영역과 기능을 사용하고, 필수 디버깅 프로세스를 구현하는 방법을 배우게 됩니다. 가장 중요한 인사이트부터 시작하겠습니다.
가장 중요한 결과
- Safari의 개발자 도구는 설정을 통해 활성화해야 하므로 다른 브라우저처럼 쉽게 액세스할 수 없습니다.
- 개발자 도구의 사용자 인터페이스와 기능은 다른 브라우저와 비슷하지만 구체적인 구현 방식은 다릅니다.
- iOS 기기에서 디버깅은 Safari에서 USB를 통해 기기를 연결하면 가능합니다.
단계별 지침
1. Safari에서 개발자 도구 활성화하기
Safari에서 개발자 도구를 활성화하려면 Safari 설정을 조정해야 합니다. Safari를 시작하고 메뉴 막대로 이동합니다. 'Safari'를 선택한 다음 '환경설정'을 선택합니다.
맨 오른쪽의 '고급' 탭으로 전환합니다. "웹 개발자를 위한 개발 기능 표시" 옵션을 찾을 수 있습니다. 이 옵션을 활성화하여 개발자 도구를 활성화합니다.
2. 개발자 도구에 액세스하기
개발자 도구가 활성화되면 메뉴 표시줄의 '개발' 메뉴를 통해 또는 특정 키 조합을 사용하여 열 수 있습니다. F12 또는 Alt-Cmd-I 키를 통한 직접 액세스는 작동하지 않지만, 예를 들어 요소를 마우스 오른쪽 버튼으로 클릭하고 "요소 검토"를 선택할 수 있습니다.
Cmd+Option+C 키 조합을 사용하여 콘솔을 열고 다른 보기 사이를 앞뒤로 전환할 수도 있습니다.
3. 개발자 도구 탐색
개발자 도구의 사용자 인터페이스는 다른 브라우저에서 익숙한 것과 비슷해 보이지만 몇 가지 특별한 차이점이 있습니다. 왼쪽 사이드바에서 '요소', '콘솔', '소스', '네트워크' 등의 탭 사이를 전환할 수 있습니다.
여기에서 웹사이트의 요소에 대해 자세히 알아보고 해당 스타일과 레이아웃을 보고 편집할 수 있습니다. 해당 CSS 규칙을 클릭하기만 하면 각 스타일을 편집할 수 있습니다.
4. 콘솔로 작업하기
Safari의 콘솔을 사용하면 JavaScript 코드를 실행하고 원하는 출력을 표시할 수 있습니다. 흥미로운 점은 여기서 출력 형식이 다르다는 것입니다. 첫 번째 인수는 텍스트로 출력되고, 그 이후의 모든 인수는 JavaScript 객체로 표시됩니다.
추가 로그 메시지를 출력하는 경우 개별 인수 사이에 공백이 없고 대시로 구분되어 표시되는지 확인하세요. 이는 디버깅 중 오해를 피하기 위해 중요할 수 있습니다.
5. 소스 코드 및 중단점 설정
"소스" 탭에서 웹사이트의 원본 파일과 트랜스파일된 파일을 볼 수 있습니다. 디버깅을 더 쉽게 하기 위해 여기에서 중단점을 설정할 수도 있습니다. 이렇게 하려면 해당 코드 줄을 클릭하기만 하면 됩니다.
다양한 컨트롤을 사용하여 코드를 더 쉽게 살펴볼 수 있다는 점도 잊지 마세요. Safari에서는 단계별 단축키가 다르므로 특정 아이콘을 사용하세요.
6. 네트워크 분석 수행
'네트워크' 탭에서는 페이지 로딩 시간 동안 발생하는 모든 요청에 대한 종합적인 정보를 제공합니다. 여기에서 주고받은 요청과 헤더 및 미리 보기를 볼 수 있습니다.
여기서 흥미로운 기능은 헤더와 타이밍을 구분하여 사이트 성능에 대한 심층적인 인사이트를 얻을 수 있다는 점입니다.
7. 성능 측정 및 타임라인 사용
"타임라인" 탭에서는 광범위한 성능 분석을 수행하고 기록을 만들어 사이트의 속도와 프로세스를 더 잘 이해할 수 있습니다.
이 기능은 다른 브라우저의 성능 프로필과 비슷한 방식으로 작동하지만 표시 및 이름 지정에 약간의 차이가 있으므로 익숙해져야 할 수 있습니다.
8 모바일 기기에서 디버깅
Safari 개발자 도구의 가장 큰 특징은 iPhone 또는 iPad에서 웹 사이트를 디버깅할 수 있다는 점입니다. USB를 통해 기기를 연결하고 기기 설정에서 해당 디버깅 옵션을 활성화하세요.
그런 다음 '개발' 메뉴로 이동하여 연결된 기기를 선택하면 열린 창과 해당 개발자 도구에 액세스할 수 있습니다.
요약
이 상세 가이드에서는 Safari 개발자 도구를 활성화하고, 다양한 기능과 탭을 사용하고, 모바일 기기에서 디버깅을 수행하는 방법을 배웠습니다. 대부분의 기능은 다른 브라우저의 도구와 유사하지만 특히 사용자 인터페이스와 단축키에서 몇 가지 차이점이 있습니다. 이러한 기능에 익숙해지면 Safari에서 디버깅하는 것이 매우 쉬워집니다.
자주 묻는 질문
Safari에서 개발자 도구를 활성화하려면 어떻게 하나요? '고급' 아래의 Safari 설정으로 이동하여 '웹 개발자를 위한 개발 기능 표시' 옵션을 활성화합니다.
Safari에서 콘솔을 열려면 어떻게 하나요?Cmd+Option+C 키 조합으로 콘솔을 열거나 상황에 맞는 메뉴에서 '항목 탐색'을 클릭하여 콘솔을 열 수 있습니다.
Safari의 콘솔은 다른 브라우저와 어떤 차이가 있나요? Safari에서는 첫 번째 인수가 텍스트로 출력되고 후속 인수는 JavaScript 객체로 출력되며 출력 사이에 공백이 사용되지 않습니다.
Safari에서 iPhone에서 디버깅할 수 있나요?예. USB를 통해 iPhone을 연결하고 디버깅 옵션을 활성화하면 iPhone에서 웹 페이지를 디버깅할 수 있습니다.
Safari에서도 Chrome과 동일한 성능 분석이 가능한가요?예. Safari의 타임라인 기능으로 비슷한 성능 분석을 할 수 있지만 표시되는 내용은 다를 수 있습니다.
