1. 首頁
  2. 問答
  3. 如何在移動設備上調試網站？

如何在移動設備上調試網站？

2011-04-26 124 views
64

人們如何在移動設備上調試網站？如何在移動設備上調試網站？

我希望能夠操縱HTML和類似桌面瀏覽器中使用CSS檢查和調試JavaScript的。

來源

2011-04-26 Crashalot

+4

截至iOS 6遠程調試是可用的：http://stackoverflow.com/a/12762449/72428 – Blaine 2012-10-06 18:21:35

+1

可能重複的[移動網站調試]（http://stackoverflow.com/questions/4285686/mobile-website -debugging） – givanse 2014-02-17 05:28:59

+1

這裏的答案是非常過時的。 [Android的]（https://developer.chrome.com/devtools/docs/remote-debugging），[iOS的]（https://developer.apple.com/library/mac/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted /GettingStarted.html#//apple_ref/doc/uid/TP40007874-CH2-SW8）和[Windows手機（https://dev.windowsphone.com/en-us/oem?contentName=docs%2FDebugging%2FDebugging_Windows_Phone）*所有*現在允許您通過電纜將手機連接到計算機，並使用計算機上的開發工具來檢查和修改手機中的頁面。我會盡力找到添加答案的時間。 – 2015-05-13 23:16:40

回答

16

這是正確的答案，不知道爲什麼布萊恩只留下它作爲評論！

隨着iOS 6的遠程調試的可用：https://stackoverflow.com/a/12762449/72428

在OS X上，你可以使用Safari的網絡督察在iOS模擬器和iOS 6的設備。

  1. 首先在桌面上的Safari中啓用開發人員菜單。

  2. 接下來，啓用iOS設備（或模擬器）上的遠程調試。

    設置>野生動物園>高級> Web檢查（ON）

  3. 回到Safari瀏覽器在您的計算機上，單擊開發菜單，並選擇您的設備（如iPhone模擬器，iPhone）

來源

2013-07-02 14:25:40 Meekohi

0

您是否使用php來決定用戶代理？

如果是這樣，我用.. Fennec然後添加Fennec的用戶代理例外列表中找到您的移動設備這將是

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

補充：當只是在做CSS互換移動我用這script並添加上面的例外它爲fennec。

來源

2011-04-26 18:55:11

18

我最近遇到了一個與我正在開發的移動網站相同的問題。我發現的最佳解決方案是將Safari的UserAgent設置爲Iphone（確保您已啓用Safari的開發人員工具）。您必須檢測到用戶來自移動設備，並將其重定向到您的移動網址或加載移動設備特定樣式表，因爲此方法無法設置css媒體類型。

Firefox有這個能力爲好，但不註冊WebKit的CSS樣式（我假設你會使用，因爲它們爲移動Safari瀏覽器和Android工作）。

你會遇到你的桌面瀏覽器和實際的移動瀏覽器之間的一些矛盾，但對於快速識別的風格和JavaScript調試它的工作就像一個魅力。

希望這會有所幫助。

來源

2011-04-26 19:00:09 davidnorman

+1

如何將Safari的UserAgent設置爲iPhone？ – moleculezz 2011-08-02 11:31:11

+1

在工具欄中單擊開發 - >用戶代理，您可以選擇多種不同的UA。 – davidnorman 2011-08-25 15:14:39

+0

我想這只是在Mac？因爲我在windows版本的任何地方都沒有這個選項。 – moleculezz 2011-08-26 12:30:14

1

我使用模擬器與我的osx系統代理設置發送請求到在Windows機器上運行的提琴手 - 這並沒有幫助很多與JavaScript /內部的東西到移動Safari，但它至少告訴我什麼是實際上通過網絡讓我攔截/記錄/分析/調整事情，以確定什麼可行，哪些不行。

來源

2011-10-24 01:29:35 ddedward

2

的Adobe剛剛發佈了一個新的工具，新的檢查和預覽工具：Adobe Shadow。包含說明的頁面是here。

它同步移動web瀏覽與計算機和允許執行卷材檢查和DOM操作。

來源

2012-03-07 14:39:46 Anvaka

6

有幾種方法可以在移動設備上調試DOM和JS。藉助Adobe Shadow，您還可以檢查localStorage。

  • weinre
  • 的Adobe陰影
  • 對於Mac和iPhone：iWebInspector

來源

2012-03-22 21:07:41

7

  • iWebInspector iOS版的iOS中調試網頁了不起的事情。

    iWebInspector screenshot

    更新：因爲我張貼了這個答案，iOS和OS X更新了，現在的Safari在Mac上可以連接和調試移動Safari瀏覽器。

  • 結賬Firebug Lite。

  • 適用於Android的Chrome，Remote Debugging還不錯！

來源

2012-05-06 01:28:32

8

在Chrome中：

設置 - >工具 - >開發者工具 - >設置（右側網站底部） - >用戶代理（在標籤菜單中） - >「覆蓋用戶代理」

來源

2012-10-22 23:14:55

+3

有趣的信息.. +1 – boddhisattva 2013-01-04 11:17:47

+1

我猜測這個選項的前提是，既然Safari和Chrome使用WebKit，這個選項在Chrome上也會以某種方式提供。 這需要更加明顯！ +1 – xiankai 2013-01-29 07:37:18

2

打開自帶的Xcode中的iOS模擬器，然後打開Safari瀏覽器，你應該看到這個選項中的「開發」菜單

enter image description here

作品就像螢火蟲

來源

2014-05-30 10:11:44 hawaiianchimp

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

您可以使用第二個書籤，即可在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：一個簡單的JavaScript命令行工具：一個遠程調試工具使用Socket.IO

  • jsConsole建。不過，它還提供了橋接到其他瀏覽器窗口的功能，可以遠程控制和調試該窗口 - 完全可以在另一個瀏覽器或其他設備上。

來源

2015-06-09 08:31:45 davidcondrey

1

我知道這個問題很久以前就被問過了，但仍然希望我的答案能夠幫助。

您可以使用NetBeans IDE中使用真正的Android或iOS設備進行調試。只要確保你已安裝Android SDK（對於Android設備），在NetBeans中打開項目並在運行時選擇Android設備作爲瀏覽器。

我覺得這是非常有幫助的，因爲你可以看到從安裝在設備上的不同瀏覽器的結果。

你可以使用這個鏈接查看更多細節

http://wiki.netbeans.org/MobileBrowsers

來源

2016-12-04 13:49:29

0

我會建議使用：https://www.vanamco.com/ghostlab/

這是你可以在多個移動設備與點擊調試平臺。

否則在瀏覽器中的動作，可以選擇傳播到連接到專用IP的其他設備（以及這些設備應該連接到同一個網絡，並使用IP地址）。

你會看到一個Chrome開發者接口，但有可以使CSS adjustements（的改變將被連接的每一個設備）和Javsascript調試。

來源

2017-05-15 20:09:20

相關問題

 相關問題