당신이 일하던 웹사이트를 방문하고 있는데 약간의 결함이 있다고 가정해 봅시다. 버그가 있는 코드를 찾아 수정하려면 iPhone 또는 iPad에서 페이지 소스를 확인해야 합니다. Safari를 열고 열광하여 Safari에서 HTML 소스 코드 보기 버튼을 찾을 수 없습니다. 지금 무엇을 합니까? 쉽습니다. 이 기사를 읽으십시오!
모든 웹 사이트 개발자, 프로그래머, 소프트웨어 디자이너, App Store 앱 개발자, 콘텐츠 제작자 및 웹마스터는 소스 코드가 얼마나 중요한지 알고 있습니다. 이 작업 단계에서는 항상 웹 페이지 소스 코드를 확인하여 문제를 수정하고, 디버깅하고, 디자인하고, 웹 사이트에 가치를 추가해야 합니다.
이 작업은 Android 및 Windows 장치에서 매우 쉽지만 iPhone, iPad, MacBook 및 iMac과 같은 Apple 장치에서도 똑같이 어렵습니다. 그러나 macOS에서는 이 기능을 사용할 수 있지만 숨겨져 있으며 다음 "Safari에서 HTML 소스 코드 보기" 기사. 그러나 iOS 기기의 경우 이야기가 다릅니다.
Apple은 iPad/iPhone에서 페이지 소스를 보는 것을 완전히 어렵게 만들었습니다. 웹 페이지의 HTML 소스 코드를 얻기 위해 탭하거나 터치할 수 있는 쉬운 방법이 없습니다. 하지만 아직 너무 미쳐버리지 마세요. 대신 iPhone 또는 iPad의 Safari에서 페이지 소스를 보는 방법을 배우는 가장 좋은 방법을 찾으려면 이 기사를 끝까지 읽으십시오.
iPhone/iPad에서 페이지 소스를 확인해야 하는 이유
iPad/iPhone의 Safari에서 페이지 소스를 보는 몇 가지 상황과 이유는 다음과 같습니다.
- iPhone 또는 iPad와 같은 특정 장치에 대한 웹 페이지의 페이지 소스를 확인해야 합니다. Mac에서 웹 사이트에 접속하여 HTML 소스 코드를 보면 iPhone 또는 iPad 버전이 아닌 데스크톱 버전의 요소가 표시됩니다.
- 여행 중이며 새로운 아이디어를 얻거나 디버깅 계획을 세우기 위해 웹 페이지 코드를 보는 데 시간을 투자하고 싶습니다.
- 다음과 같은 많은 멀티태스킹 기능이 제공되므로 iPad에서 웹 사이트 개발을 선호합니다. 무대 감독, 분할보기 등
따라서 언제든지 iPhone 또는 iPad에서 페이지 소스를 볼 필요가 있을 경우를 대비하여 아래 방법을 따르십시오.
iPhone/iPad에서 페이지 소스를 보는 가장 좋은 방법
다음은 타사 앱을 활용하지 않고 iPhone 또는 iPad에서 HTML 코드의 페이지 소스를 보는 일반적인 방법입니다. 이러한 방법은 개인 정보 보호 및 보안 관련 코더 및 최종 사용자에게 적합합니다.
1. 바로 가기 앱을 사용하여 HTML 소스 코드 가져오기
이 방법은 iOS 12.0(iPadOS 12.0) 이상을 실행하는 경우에만 작동합니다. iPhone 또는 iPad에서 페이지 소스 보기 바로가기를 만드는 방법은 다음과 같습니다.
- 열기 바로 가기 홈 화면 또는 앱 서랍에서 앱.
- 을 누릅니다 더하기(+) 새 빈 바로 가기를 만들려면 아이콘을 클릭하십시오.
- 검색창에 다음을 입력합니다. HTML 선택 리치 텍스트에서 HTML 만들기.
- 다시, 다음을 찾으십시오. 한눈에 검색창에 앱을 입력하고 바로가기 편집기에 추가합니다.
- 이제 상단의 바로 가기 아이콘을 탭하고 선택하십시오. 이름 바꾸기.
- 이름 바꾸기 소스 코드 보기 완료를 탭합니다.
- 을 누릅니다 (나) 버튼을 누르고 토글 공유 시트에 표시 옵션.
- 이제 Safari 브라우저를 열고 원하는 웹 페이지를 방문하십시오.
- 터치 공유하다 Safari 앱의 버튼을 누르고 아래로 스크롤하여 소스 코드 보기 지름길.
- 바로 가기를 탭하면 Quick Look에서 HTML 소스 코드를 얻을 수 있습니다.
2. 책갈피 스크립트를 사용하여 페이지 소스 보기
이 방법에서는 북마크를 만들고 URL은 소스 보기 스크립트가 됩니다. 웹 페이지를 탐색하고 Safari에서 페이지 소스를 확인해야 하는 경우 책갈피를 탭하기만 하면 됩니다. 페이지의 HTML 소스 코드를 받게 됩니다. 방법은 다음과 같습니다.
- 임의의 웹사이트를 방문하여 iPad 또는 iPhone용 Safari 브라우저에 북마크하십시오.
- 을 누릅니다 사파리 메뉴 왼쪽 상단 모서리에서 북마크.
- 만지다 즐겨찾기 방금 추가한 북마크를 찾습니다.
- 북마크를 길게 누른 다음 선택 편집하다 상황에 맞는 메뉴에서.
- 기존 책갈피 제목을 지우고 이름을 다음으로 바꿉니다. HTML 소스 코드 또는 북마크를 기억하기 위한 다른 것.
- 을 누릅니다 주소 입력란을 열고 기존 URL을 지웁니다.
- 다음 코드를 복사하여 URL로 붙여넣습니다(코드 작성자: Rob Flaherty).
javascript:(function(){var a=window.open('about: blank').document; a.write('');a.close();var b=a.body.appendChild (a.createElement('pre'));b.style.overflow='auto';b.style.whiteSpace=' pre-wrap';b.appendChild (a.createTextNode (document.documentElement.innerHTML))})();- 수도꼭지 완료 지금까지 변경한 내용을 저장하려면 키보드에서
- 이제 소스 코드를 검사해야 하는 웹 페이지로 이동합니다.
- 로 이동 북마크 메뉴를 터치하고 HTML 소스 코드 방금 만든 책갈피.
- 새 Safari 탭에서 방문 중인 페이지의 HTML 코드를 볼 수 있습니다.
또한 읽으십시오:iOS 및 Mac의 Safari에서 책갈피를 관리하는 방법
3. macOS 테더링을 사용하여 페이지 소스 보기
iPhone 및 iPad의 Safari 앱에는 Web Inspector 도구가 내장되어 있습니다. 안타깝게도 이 기능은 iPhone 또는 iPad 기기에서 직접 작동하지 않습니다. 장치를 MacBook 또는 iMac에 테더링해야 합니다. 그런 다음 Mac Safari의 컨트롤을 사용하여 HTML 소스 코드를 시각화할 수 있습니다. 프로세스는 아래에 설명된 대로 두 단계로 작동합니다.
웹 검사기 활성화
켜려면 다음 단계를 따르세요. 웹 검사기 iPad 및 iPhone용 Safari의 기능:
- iPhone 또는 iPad에서 설정 앱.
- 이동 사파리 설정.
- Safari 설정 창 하단으로 스크롤하여 고급의 메뉴. 그것을 탭하십시오.
- 활성화 웹 검사기 토글 버튼을 탭하여.
Mac Safari에서 페이지 소스 보기
Mac으로 이동하여 다음 단계를 따르세요.
- USB 케이블을 사용하여 iPhone 또는 iPad를 MacBook 또는 iMac에 연결하십시오.
- 기기가 이전에 인증되지 않은 경우 Mac은 Apple ID를 사용하여 기기를 인증하도록 요청합니다.
- 이제 Mac에서 Safari 앱을 열고 아무 웹사이트나 방문하세요.
- Mac 도구 모음에서 개발하다.
- 열리는 상황에 맞는 메뉴에서 iPad 또는 iPhone을 찾으십시오.
- iPad 또는 iPhone을 클릭하여 Mac에서 이러한 장치의 Safari 화면을 표시하는 새 창을 엽니다.
- 이제 iPhone 또는 iPad에서 대상 웹 사이트를 열고 Mac Safari 브라우저에서 소스 코드를 봅니다.
타사 앱 및 도구를 사용해도 괜찮다면 웹 페이지의 HTML 소스 코드를 보기 위해 다음과 같은 추가 방법을 살펴볼 수도 있습니다.
4. Safari 확장 프로그램 – 웹 검사기
iPad 및 iPhone에 Apple Safari 브라우저용 Web Inspector 확장 프로그램을 설치할 수 있습니다. 그런 다음 웹 페이지를 탐색할 때 확장 프로그램을 호출하여 HTML 소스 코드를 봅니다. 시도해야 할 단계는 다음과 같습니다.
- 열기 설정 앱으로 이동하여 사파리 설정 부분.
- 찾을 때까지 아래로 스크롤 확장 프로그램 옵션. 그것을 탭하십시오.
- 확장 프로그램 내에서 더 많은 확장 프로그램.
- Safari 확장 프로그램의 App Store 페이지가 나타납니다.
- 터치 찾다 상자와 유형 웹 검사기 키보드에서 검색을 누릅니다.
- Web Inspector 앱을 찾아 설치합니다.
- 다시 이동 설정 > 원정 여행 > 확장 프로그램 > 탭 웹 검사기.
- 토글 버튼을 사용하여 Safari용 확장 프로그램을 활성화하세요.
- Safari를 열고 아무 웹사이트나 방문하십시오.
- 을 누릅니다 확장 프로그램 주소 표시줄의 오른쪽 모서리에 있는 아이콘입니다.
- 선택 웹 검사기 확대.
- 선택 하루 동안 허용 표시되는 팝업의 옵션.
- 다시, 확장 프로그램 아이콘을 터치한 다음 Web Inspector를 터치합니다.
- 보고 있는 웹 페이지 하단에서 HTML 소스 코드가 팝업되어야 합니다.
- DOM, 요소, 콘솔, 네트워크 및 리소스와 같은 탭 간에 전환할 수 있습니다.
- 일반 보기로 돌아가려면 Safari의 확장 프로그램 섹션에서 Web Inspector 확장 프로그램을 누르기만 하면 됩니다.
5. iOS 앱 – 소스 보기
App Store에서 무료로 다운로드할 수 있습니다. 검색 상자에 소스 보기를 입력하고 검색을 터치합니다. App Store에서 여러 결과를 볼 수 있습니다. View Source라는 것을 설치하십시오. 앱의 제공자는 Roman Tomjak입니다.
홈 화면 또는 앱 서랍에서 앱을 엽니다. 그런 다음 주소 표시줄에 웹 사이트 URL을 입력하여 HTML 소스 코드를 표시합니다.
이 도구는 소스 코드의 iPhone 크기 보기를 제공합니다. 그러나 화면 오른쪽 하단의 해당 버튼을 사용하여 방향을 변경하거나 확대할 수 있습니다.
6. Google Web Cache를 사용하여 무료로 소스 코드 보기
방문한 웹 사이트에서 다음과 같은 깔끔하고 멋진 트릭을 수행하여 Safari 또는 Chrome에서 기본 소스 코드를 볼 수 있습니다.
- HTML 소스 코드를 찾아야 하는 웹 페이지를 방문하십시오.
- Safari 또는 Chrome 주소 표시줄에서 주소를 누릅니다.
- 위 이미지와 같이 주소 시작 부분에 입력 커서를 가져옵니다.
- 이제 앞에 다음 코드를 입력하십시오. https://
은닉처:
- 을 치다 가다 iOS 키보드의 버튼.
- 페이지 상단에 다음이 표시되어야 합니다. 소스보기 옵션. 그것을 탭하십시오.
- 이제 방금 방문한 웹 페이지의 소스 코드를 얻습니다.
또한 읽으십시오:북마크, 비밀번호 등을 가져오는 방법
7. 웹 앱에서 소스 코드 보기
웹사이트와 웹페이지의 기본 소스 코드를 무료 또는 약간의 비용으로 공개할 수 있는 웹사이트가 많이 있습니다. 모든 웹 앱 중에서 CodeBeautify의 소스 코드 뷰어를 선택했습니다. 작동 방식은 다음과 같습니다.
- iPhone 또는 iPad에서 다음 링크로 이동합니다. 소스 코드 뷰어 사파리 브라우저를 사용합니다.
- 에서 URL 입력 상자에 HTML 소스 코드를 표시하려는 웹 페이지 URL을 입력하거나 복사하여 붙여넣습니다.
- 을 누릅니다 보다 iPhone/iPad Safari 브라우저에서 페이지 소스를 보려면 버튼을 누르십시오.
결론
이제 iPhone 및 iPad 장치에서 페이지 소스를 보는 모든 요령을 알게 되었습니다. 이 기사에서 네이티브 및 비네이티브 메서드를 발견했습니다. iPad 또는 iPhone의 기본 트릭을 고수하여 웹 페이지의 HTML 소스 코드를 보거나 작업을 훨씬 쉽게 만들어주는 앱을 사용할 수 있습니다.
아래에 댓글을 남겨 어떤 방법이 마음에 드셨는지 알려주세요. 또한 웹 사이트 개발 및 앱 코딩을 배우는 친구들을 돕기 위해 소셜 미디어 및 WhatsApp에 기사를 공유하십시오.
다음, Mac 및 iPad에서 Swift를 배우는 방법.