web-dev-qa-db-ja.com

モバイルデバイスでWebサイトをデバッグする方法

モバイルデバイスでWebサイトをデバッグするにはどうすればよいですか？

デスクトップブラウザでインスペクターを使用するのと同じようにHTMLとCSSを操作し、JavaScriptをデバッグできるようにしたいと思います。

debuggingmobilemobile-safariremote-debuggingweb-inspector
72
Crashalot

これは正解です。なぜブレインがコメントとして残しただけなのかはわかりません！

IOS 6以降、リモートデバッグが利用可能になりました： https://stackoverflow.com/a/12762449/72428

OS Xでは、iOSシミュレーターおよびiOS 6デバイスでSafari Webインスペクターを使用できます。

  1. まず、デスクトップのSafariで[開発]メニューを有効にします。

  2. 次に、iOSデバイス（またはシミュレーター）でリモートデバッグを有効にします。

    設定> Safari>詳細設定> Web Inspector（ON）

  3. コンピューターのSafariに戻り、[開発]メニューをクリックし、デバイス（iPhone Simulator、iPhoneなど）を選択します

17
Meekohi

Google Chrome for Android Beta できるようになりました リモートデバッグ に組み込まれている開発者ツールを使用してGoogle Chrome=デスクトップ上。 ビデオはこちら この仕組みのデモ.

19
dlannoye

最近、仕事のために開発していたモバイルサイトで同じ問題に遭遇しました。私が見つけた最良の解決策は、Iphoneに設定されたSafariのUserAgentを使用することでした（Safariの開発者ツールが有効になっていることを確認してください）。ユーザーがモバイルデバイスから来ていることを検出し、モバイルURLにリダイレクトするか、モバイル固有のスタイルシートをロードする必要があります。このメソッドはcssメディアタイプの設定では機能しません。

Firefoxにもこの機能がありますが、webkit cssスタイルは登録しません（Mobile SafariとAndroidの両方で機能するため、使用することを想定しています）。

デスクトップブラウザーと実際のモバイルブラウザーの間でいくつかの不整合が発生しますが、スタイルとJavaScriptのデバッグをすばやく特定することは魅力的でした。

お役に立てれば。

18
davidnorman

Chromeの場合：

設定->ツール->開発者ツール->設定（サイトの右下）->ユーザーエージェント（タブメニュー）->「ユーザーエージェントの上書き」

9
Chris Conway

  • iWebInspector iOSの場合、iOSでWebページをデバッグするのは本当に素晴らしいです。

    iWebInspector screenshot

    更新：この回答を投稿してからiOSとOS Xが更新され、MacのSafariがMobile Safariに接続してデバッグできるようになりました。

  • Firebug Lite をご覧ください。

  • for Chrome Androidでは、 リモートデバッグ は悪くありません！

7
Alan H.

モバイルデバイスでDOMとJSをデバッグするには、いくつかの方法があります。 Adobe Shadowを使用すると、localStorageを検査することもできます。

  • ワイン
  • Adobe Shadow
  • MacおよびiPhoneの場合：iWebInspector
6
Jörg Vanderhoeven

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');

この2番目のブックマークレットを使用して、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コマンドラインツール。ただし、他のブラウザウィンドウにブリッジして、そのウィンドウをリモートで制御およびデバッグすることもできます。これは、別のブラウザまたは別のデバイスで実行することです。

3
davidcondrey

アドビは新しいツールである新しい検査およびプレビューツールをリリースしました： Adobe Shadow 。手順が記載されたページは here です。

モバイルWebブラウジングとコンピューターを同期し、Web検査とDOM操作を実行できます。

2
Anvaka

Xcodeに付属のiOSシミュレーターを開き、Safariを開くと、「開発」メニューにこのオプションが表示されます。

enter image description here

Firebugと同じように機能します

2
seantomburke

Safari iOSでFirebugを使用できるようにするこのブックマークレットがあります。デスクトップにブックマークレットをコピーして、iOSデバイスにメールで送信する必要がありますが、それ以外の場合は機能します。

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

1
Stuart Young

私はこの質問がずっと前に尋ねられたことを知っていますが、私の答えが助けになることを望みます。

NetBeans IDEを使用して、実際のAndroidまたはIOSデバイスを使用してデバッグできます。 Android SDKがインストールされていることを確認し（Androidデバイス用）、NetBeansでプロジェクトを開き、実行時にブラウザーとしてAndroidデバイスを選択します。

お使いのデバイスにインストールされているさまざまなブラウザーから結果を確認できるため、これは非常に役立ちます。

詳細については、このリンクを使用できます

http://wiki.netbeans.org/MobileBrowsers

1
Ivan of uganda

Osxシステムプロキシを設定したシミュレーターを使用して、Windowsマシンで実行されているFiddlerに要求を送信します。その場で物事を傍受/ログ/分析/微調整して、何が機能し、何が機能しないかを把握できます。

1
ddedward

使用することをお勧めします： https://www.vanamco.com/ghostlab/

これは、ワンクリックで複数のモバイルデバイスでデバッグできるプラットフォームです。

ブラウザでアクションを実行すると、プライベートIPに接続された他のデバイスに伝播することを選択できます（これらのデバイスは同じネットワークに接続してIPアドレスを使用する必要があります）。

Chrome開発者インターフェイスが表示されますが、CSS調整（接続されているすべてのデバイスに変更が発生します）およびJavsascriptデバッグを行うことができます。

0
Snake Eyes

IPhoneまたはiPadをMacコンピューターに接続し、Safariの開発ツールを使用できます。 https://developer.Apple.com/safari/tools/ あるいは、同じことができるオンラインツールがいくつかあります。チェック http://farjs.com

0
BlueStory

ユーザーエージェントを決定するためにphpを使用していますか？

もしそうなら、私は使用します。 Fennec そして、あなたのモバイルデバイスの例外リストにfennecユーザーエージェントを追加します

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

追加：モバイル用にCSSスワップを行う場合、これを使用します script そして、fennec用に上記の例外を追加します。

0
Tim Joyce