79

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

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

4

17 に答える 17

19

Google Chrome for Android Betaを使用すると、デスクトップの Google Chrome に組み込まれている開発者ツールを使用してリモート デバッグを実行できるようになりました。これがどのように機能するかを示すビデオです。

于 2012-02-08T17:10:07.937 に答える
19

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

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

デスクトップ ブラウザーと実際のモバイル ブラウザーの間でいくつかの不一致が発生する場合がありますが、スタイルと JavaScript のデバッグをすばやく識別するには、魅力的に機能します。

お役に立てれば。

于 2011-04-26T19:00:09.267 に答える
9

Chrome の場合:

設定 -> ツール -> 開発者ツール -> 設定 (サイトの右下) -> ユーザー エージェント (タブ メニュー内) -> "ユーザー エージェントのオーバーライド"

于 2012-10-22T23:14:55.593 に答える
7

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

    iWebInspectorのスクリーンショット

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

  • FirebugLiteをチェックしてください。

  • Android上のChromeの場合、リモートデバッグは悪くありません。

于 2012-05-06T01:28:32.203 に答える
6

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

  • ワインレ
  • アドビ シャドウ
  • Mac および iPhone の場合: iWebInspector
于 2012-03-22T21:07:41.017 に答える
3

モバイルで使用できる 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 アプリ: weinre のラッパー。無料版と有料版があります。

  • SocketBug : Socket.IO を使用して構築されたリモート デバッグ ユーティリティ

  • jsConsole : シンプルな JavaScript コマンド ライン ツール。ただし、別のブラウザー ウィンドウにブリッジして、そのウィンドウをリモートで制御およびデバッグする機能も提供します (別のブラウザーまたは別のデバイスで)。

于 2015-06-09T08:31:45.917 に答える
2

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

ここに画像の説明を入力

Firebug と同じように動作します

于 2014-05-30T10:11:44.473 に答える
2

アドビは、新しい検査およびプレビュー ツールであるAdob​​e Shadowという新しいツールをリリースしました。手順のページはこちらです。

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

于 2012-03-07T14:39:46.920 に答える
1

私はosxシステムプロキシを設定したシミュレーターを使用して、Windowsマシンで実行されているFiddlerにリクエストを送信します-これは、モバイルサファリへのjavascript /内部のものにはあまり役立ちませんが、少なくとも実際にネットワーク上で何が起こっているかを示しています何が機能し、何が機能しないかを把握するために、その場で物事を傍受/ログ/分析/微調整できます。

于 2011-10-24T01:29:35.817 に答える
1

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

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

于 2012-09-20T00:23:26.837 に答える
1

この質問はずっと前に尋ねられたことを知っていますが、私の答えが役に立てば幸いです。

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

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

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

http://wiki.netbeans.org/MobileBrowsers

于 2016-12-04T13:49:29.567 に答える
0

iPhone や iPad を Mac コンピューターに接続して、Safari の開発ツールを使用できます。https://developer.apple.com/safari/tools/ または、同じことができるオンライン ツールがいくつかあります。http://farjs.comを確認してください

于 2014-04-27T16:32:02.097 に答える
0

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

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

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

追加:モバイル用の CSS スワップを行うとき、このスクリプトを使用し、上記の例外を fennec 用に追加します。

于 2011-04-26T18:55:11.343 に答える