모바일 장치에서 웹 사이트를 디버깅하는 방법은 무엇입니까?

모바일 장치에서 웹 사이트를 디버깅하는 방법은 무엇입니까?

---

사람들은 모바일 장치에서 웹 사이트를 어떻게 디버깅합니까?

데스크톱 브라우저에서 Inspector를 사용하는 것과 비슷하게 HTML과 CSS를 조작하고 JavaScript를 디버깅 할 수 있기를 바랍니다.

---

Blaine이 댓글로만 남겨둔 이유는 확실하지 않습니다.

iOS 6부터 원격 디버깅이 가능합니다 : https://stackoverflow.com/a/12762449/72428

OS X에서는 iOS 시뮬레이터 및 iOS 6 기기에서 Safari 웹 속성을 사용할 수 있습니다.

1. 먼저 데스크탑의 Safari에서 개발자 메뉴를 활성화하십시오.

2. 다음으로 iOS 장치 (또는 시뮬레이터)에서 원격 디버깅을 활성화합니다.

   설정> Safari> 고급> 웹 속성 (ON)

3. 컴퓨터에서 Safari로 돌아가서 개발자 메뉴를 클릭하고 장치 (예 : iPhone Simulator, iPhone)를 선택합니다.

---

함께 안드로이드 베타에 대한 구글 크롬 당신이 지금 할 수있는 원격 디버깅 바탕 화면에 구글 크롬에 내장 된 개발자 도구를 사용하여. 이것이 어떻게 작동하는지 보여주는 비디오 입니다.

---

최근 업무용으로 개발중인 모바일 사이트에서 동일한 문제가 발생했습니다. 내가 찾은 최고의 해결책은 Safari의 UserAgent를 Iphone으로 설정하는 것입니다 (Safari의 개발자 도구가 활성화되어 있는지 확인하십시오). 이 방법은 CSS 미디어 유형 설정이 작동하지 않으므로 사용자가 모바일 장치에서 오는 것을 감지하고 사용자를 모바일 URL로 리디렉션하거나 모바일 특정 스타일 시트를로드해야합니다.

파이어 폭스도이 기능을 가지고 있지만 웹킷 CSS 스타일을 등록하지 않습니다 (모바일 사파리와 안드로이드 모두에서 작동하기 때문에 사용할 것이라고 가정합니다).

데스크톱 브라우저와 실제 모바일 브라우저 사이에 몇 가지 불일치가 발생하지만 스타일을 신속하게 식별하고 자바 스크립트를 디버깅하려면 매력적으로 작동했습니다.

도움이 되었기를 바랍니다.

---

Chrome에서 :

설정-> 도구-> 개발자 도구-> 설정 (오른쪽 사이트 하단)-> 사용자 에이전트 (탭 메뉴)-> "사용자 에이전트 재정의"

---

• iOS 용 iWebInspector 는 iOS에서 웹 페이지를 디버깅하는 데 정말 놀랍습니다.

  

  업데이트 :이 답변을 게시 한 이후 iOS 및 OS X가 업데이트되었으며 이제 Mac의 Safari에서 Mobile Safari에 연결하고 디버깅 할 수 있습니다.

• Firebug Lite를 확인하십시오 .

• Android 용 Chrome의 경우 원격 디버깅 이 나쁘지 않습니다!

---

모바일 장치에서 DOM 및 JS를 디버깅하는 방법에는 여러 가지가 있습니다. Adobe Shadow를 사용하면 localStorage를 검사 할 수도 있습니다.

• Weinre
• Adobe Shadow
• Mac 및 iPhone : iWebInspector

---

모바일에서 사용할 수있는 Firebug 라이트 버전 용 북마크릿이 있습니다.

javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');

이 두 번째 북마크릿을 사용하여 Android에서 콘솔 로그를 표시 할 수 있습니다.

javascript:(function(){if((/android/gi).test(navigator.appVersion)){console={"_log":[],"log":function(){var%20arr=[];for(var%20i=0;i<arguments.length;i++){arr.push(arguments[i]);}this._log.push(arr.join(",%20"));},"trace":function(){var%20stack;try{throw%20new%20Error();}catch(ex){stack=ex.stack;}console.log("console.trace()\n"+stack.split("\n").slice(2).join("%20%20\n"));},"dir":function(obj){console.log("Content%20of%20"+obj);for(var%20key%20in%20obj){var%20value=typeof%20obj[key]==="function"?"function":obj[key];console.log("%20-\""+key+"\"%20->%20\""+value+"\"");}},"show":function(){alert(this._log.join("\n"));this._log=[];}};window.onerror=function(msg,url,line){console.log("ERROR:%20\""+msg+"\"%20at%20\""+"\",%20line%20"+line);}window.addEventListener("touchstart",function(e){if(e.touches.length===3){console.show();}});}})();

farjs.com에도 있습니다 (jsConsole과 유사)

javascript:(function(){ base_url = 'farjs.com'; base_path = ''; var _my_script=document.createElement('SCRIPT'); _my_script.type='text/javascript'; _my_script.src='http://farjs.com/bookmarklets/injector_v1.js'; document.getElementsByTagName('head')[0].appendChild(_my_script);})()

---

weinre (Web Inspector Remote) 외에도 . 도 있습니다..

• MIHTool iOS App : weinre 용 래퍼입니다. 무료 버전 및 유료 버전을 사용할 수 있습니다.

• SocketBug : Socket.IO를 사용하여 구축 된 원격 디버깅 유틸리티

• jsConsole : 간단한 JavaScript 명령 줄 도구입니다. 그러나 다른 브라우저 창에 연결하여 해당 창을 원격으로 제어하고 디버깅 할 수있는 기능도 제공합니다 (다른 브라우저 또는 다른 장치에있는 경우).

---

Adobe는 새로운 검사 및 미리보기 도구 인 Adobe Shadow를 출시했습니다 . 지침이있는 페이지는 여기에 있습니다 .

모바일 웹 브라우징을 컴퓨터와 동기화하고 웹 검사 및 DOM 조작을 수행 할 수 있습니다.

---

Xcode와 함께 제공되는 iOS 시뮬레이터를 연 다음 Safari를 열면 "개발"메뉴에이 옵션이 표시됩니다.

Firebug와 동일하게 작동

---

나는 OSX 시스템 프록시 세트와 함께 시뮬레이터를 사용하여 Windows 시스템에서 실행되는 Fiddler에 요청을 보냅니다. 이는 자바 스크립트 / 내부 항목을 모바일 사파리에 많이 도움이되지 않지만 적어도 실제로 와이어를 통해 진행되는 작업을 보여줍니다. 즉석에서 인터셉트 / 로그 / 분석 / 조정하여 작동하는 것과 작동하지 않는 것을 파악할 수 있습니다.

---

Safari iOS에서 Firebug를 사용할 수있는 북마크릿이 있습니다. 데스크탑에서 북마크릿을 복사하여 iOS 장치로 이메일을 보내야하지만 그렇지 않으면 작동합니다.

http://martinkool.com/post/13629963755/firebug-on-ipad-and-iphone

---

이 질문이 오래 전에 요청되었지만 여전히 내 답변이 도움이되기를 바랍니다.

NetBeans IDE를 사용하여 실제 Android 또는 IOS 장치를 사용하여 디버깅 할 수 있습니다. Android SDK가 설치되어 있는지 확인하고 (Android 장치 용) NetBeans에서 프로젝트를 열고 실행할 때 브라우저로 Android 장치를 선택하십시오.

기기에 설치된 다른 브라우저의 결과를 볼 수 있기 때문에 매우 유용합니다.

자세한 내용은이 링크를 사용할 수 있습니다.

http://wiki.netbeans.org/MobileBrowsers

---

사용자 에이전트를 결정하기 위해 PHP를 사용하고 있습니까?

if so, I use.. Fennec and then add the fennec user agent to the exceptions list for you mobile devices which would be

if ($_SERVER['HTTP_USER_AGENT'] == '4.0b5') {
    return = true;
}

Added: When just doing css swaps for mobile I use this script and add the above exception to it for fennec.

---

You could hook iPhone or iPad to a mac computer, and use Safari's developing tools. https://developer.apple.com/safari/tools/ Alternatively there are some online tools that could do the same. Check http://farjs.com

---

I would suggest to use: https://www.vanamco.com/ghostlab/

It is a platform which you can debug in multiple mobile devices with one click.

브라우저에서 작업을 수행하면 사설 IP에 연결된 다른 장치로 전파하도록 선택할 수 있습니다 (이러한 장치는 동일한 네트워크에 연결하고 IP 주소를 사용해야 함).

Chrome 개발자 인터페이스가 표시되지만 CSS 조정 (연결된 모든 장치에 변경 사항이 적용됨) 및 Javsascript 디버깅을 수행 할 수 있습니다.

참고 URL : https://stackoverflow.com/questions/5794984/how-to-debug-web-sites-on-mobile-devices