본문 바로가기
카테고리 없음

모바일에서 웹페이지 소스코드 보는 방법

by sinbee2 2023. 10. 5.
반응형

오늘은 모바일 기기에서 웹페이지의 소스코드를 확인하는 방법에 대해 알려드리겠습니다. 웹 개발자들에게 유용한 정보일 것이니 잘 따라와 주세요.

안드로이드 운영체제
안드로이드 기반의 스마트폰 사용자들은 간단하게 웹페이지 소스코드를 확인할 수 있습니다. 다음과 같이 해보세요:

1. 모바일 브라우저를 엽니다.
2. 원하는 웹페이지로 이동합니다.
3. 웹페이지 주소 앞에 "view-source:"를 입력합니다.
  
   예시: view-source:http://사이트 주소

이렇게 하면 해당 웹페이지의 소스코드를 간단히 확인할 수 있습니다.

iOS 운영체제
아이폰(iOS) 사용자들은 조금 더 수고스럽게 소스코드를 확인할 수 있지만, 가능합니다. 아래의 단계를 따라 해보세요:

1. 사파리(Safari) 브라우저를 엽니다.
2. 아무 웹페이지를 열어둔 후, 책갈피로 추가합니다.
3. 책갈피 편집으로 이동하여 사이트 이름을 변경하고, 사이트 주소란에 아래의 자바스크립트 코드 중 하나를 복사하여 붙여 넣습니다.

   자바스크립트 소스 1
   ```javascript
   javascript:var sourceWindow = window.open('about:blank');
   var newDoc = sourceWindow.document;
   newDoc.open();
   newDoc.write('' + 'Source of ' + document.location.href + '' + '');
   newDoc.close();
   var pre = newDoc.body.appendChild(newDoc.createElement("pre"));
   pre.appendChild(newDoc.createTextNode(document.documentElement.innerHTML));
   ```
  
   자바스크립트 소스 2
   ```javascript
   javascript:(function() {
       var d = document, s, e;
       var el = d.getElementById('snpy');
       if (typeof Snoopy !== 'undefined') {
           Snoopy.toggle();
           return;
       } else if (el) {
           el.className = /closed/.test(el.className) ? el.className.replace('closed', '') : el.className + ' closed';
           return;
       }
       s = d.createElement('link');
       s.setAttribute('href', 'http://snoopy-assets.allmarkedup.com/snoopy-min.css');
       s.setAttribute('rel', 'stylesheet');
       s.setAttribute('type', 'text/css');
       d.getElementsByTagName('head')[0].appendChild(s);
       e = d.createElement('script');
       e.setAttribute('src', 'http://snoopy-assets.allmarkedup.com/snoopy-min.js');
       d.getElementsByTagName('body')[0].appendChild(e);
   })();
   ```

위의 자바스크립트 코드 중 하나를 책갈피에 추가 저장하면, 사파리 브라우저를 통해 모바일 아이폰에서도 소스코드를 확인할 수 있습니다.

이제 여러분도 모바일 기기에서 소스코드를 확인하는 데 어려움을 겪지 않을 것입니다. 웹 개발 작업 시 편리하게 활용해보세요!

반응형

댓글