blocks|key|702014|text|有了Google+Chrome+for+Android+Beta，你现在就可以在桌面上使用谷歌Chrome内置的开发人员工具来做remote+debugging了。演示如何工作的Here+is+a+video。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|702015|entityMap|0|LINK|mutability|MUTABLE|url|http://googleblog.blogspot.com/2012/02/introducing-chrome-for-android.html|1|http://code.google.com/chrome/mobile/docs/debugging.html|2|http://www.youtube.com/watch?v=s4zpL4VBbuU^0|2|U|0|1S|G|1|2H|F|2|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]|$A|T|B|U|1|V]|$A|W|B|X|1|Y]]|C|$]]|$1|D|3|-4|5|6|7|Z|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]|N|$5|G|H|I|C|$J|O]]]]

With <a href="http://googleblog.blogspot.com/2012/02/introducing-chrome-for-android.html">Google Chrome for Android Beta</a> you can now do <a href="http://code.google.com/chrome/mobile/docs/debugging.html">remote debugging</a> using the developer tools built into Google Chrome on your desktop. <a href="http://www.youtube.com/watch?v=s4zpL4VBbuU">Here is a video</a> demonstrating how this works.

blocks|key|701880|text|我最近在为工作而开发的一个移动网站上遇到了同样的问题。我找到的最好的解决方案是使用Safari的UserAgent设置为Iphone+(确保您启用了Safari的开发人员工具)。您必须检测到用户来自移动设备，并将他们重定向到您的移动url或加载特定于移动设备的样式表，因为这种方法不能设置css媒体类型。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|701881|Firefox也有这个功能，但没有注册webkit+css样式(我假设你会使用它，因为它们既适用于Mobile+Safari，也适用于Android)。|701882|你会在你的桌面浏览器和实际的移动浏览器之间遇到一些不一致的地方，但是对于快速识别样式和javascript调试来说，它就像一个护身符。|701883|希望这能有所帮助。|701884|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|L|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|M|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

I recently ran into the same issue with a mobile site I was developing for work. The best solution I found was to use Safari's UserAgent set to Iphone (make sure you have Safari's developer tools enabled). You will have to detect that the user is coming from a mobile device and either redirect them to your mobile url or load the mobile specific stylesheets, as this method doesn't work setting the css media type. 

Firefox has this capability as well, but doesn't register webkit css styles (which I assume you will be using as they work for both Mobile Safari and Android).

You will run into a few inconsistencies between your desktop browser and your actual mobile browser, but for quickly identifying styles and javascript debugging it worked like a charm.

Hope this helps.

blocks|key|702075|text|奥多比刚刚发布了一个新的工具，一个新的检查和预览工具：Adobe+Shadow。包含说明的页面是here。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|702076|它将移动web浏览与计算机同步，并允许执行web检查和DOM操作。|702077|entityMap|0|LINK|mutability|MUTABLE|url|http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow|1|http://labs.adobe.com/technologies/shadow/^0|R|C|0|1C|4|1|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]|$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

Adobe just released a new tool a new inspection and preview tool:<a href="http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow" rel="nofollow">Adobe Shadow</a>. The page with instructions is <a href="http://labs.adobe.com/technologies/shadow/" rel="nofollow">here</a>.

It synchronizes mobile web browsing with computer and allows to perform web inspection and DOM manipulation.

blocks|key|702249|text|打开Xcode附带的iOS模拟器，然后打开Safari，您应该会在“开发”菜单中看到这个选项|type|unstyled|depth|inlineStyleRanges|entityRanges|data|702250|​|702251|📷|atomic|offset|length|702252|702253|工作方式与Firebug类似|702254|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/958f8d0ae51633194d9da24b6c593ece.png|imageAlt^0|0|0|0|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@$G|X|H|Y|1|Z]]|A|$]]|$1|I|3|C|5|6|7|10|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|11|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S|T|-4]]]]

Open the iOS simulator that comes with Xcode, then open Safari, and you should see this option in the "Develop" Menu

<img src="https://i.stack.imgur.com/3bKr3.png" alt="enter image description here">

Works just like Firebug

blocks|key|701970|text|我将模拟器与我的osx系统代理一起使用，将请求发送到运行在windows机器上的Fiddler这对移动safari的javascript/内部内容没有太大帮助，但它至少显示了网络上实际发生的事情，并让我可以动态截取/日志/分析/调整事情，以找出哪些工作正常，哪些不工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|701971|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I use the simulator with my the osx system proxy set to send requests to Fiddler running on a windows machine - that doesn't help much with javascript/internal stuff to mobile safari, but it at least shows me what's actually going over the wire and lets me intercept/log/analyze/tweak things on the fly to figure out what works and what doesn't.

blocks|key|702127|text|有一个书签小程序，可以让你在Safari+iOS上使用Firebug。你必须将书签复制到桌面上，并通过电子邮件将其发送到iOS设备上，否则它将正常工作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|702128|http://martinkool.com/post/13629963755/firebug-on-ipad-and-iphone|offset|length|702129|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1T|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

There is this bookmarklet that allows you to use Firebug on Safari iOS. You have to copy the bookmarklet on a desktop and email it to your iOS device but otherwise it works:

<a href="http://martinkool.com/post/13629963755/firebug-on-ipad-and-iphone" rel="nofollow">http://martinkool.com/post/13629963755/firebug-on-ipad-and-iphone</a>

blocks|key|918532|text|我知道这个问题很久以前就被问到了，但我仍然希望我的回答能有所帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|918533|您可以使用android或NetBeans设备使用IOS集成开发环境进行调试。只需确保您安装了android+SDK+(用于android设备)，在NetBeans中打开您的项目，并在运行时选择android设备作为您的浏览器。|918534|我发现这很有帮助，因为你可以看到安装在你的设备上的不同浏览器的结果。|918535|您可以使用此链接了解更多详细信息|918536|http://wiki.netbeans.org/MobileBrowsers|offset|length|918537|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|13|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|V|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|W|8|@]|9|@$J|X|K|Y|1|Z]]|A|$]]|$1|L|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|I]]]]

I know this question was asked a long time ago but still hope my answer helps. 

You can use NetBeans IDE to debug using a real android or IOS device. Just make sure you have android SDK installed (for android devices), open your project in NetBeans and when running choose android device as your browser. 

I find this very helpful since you can see the result from the different browsers installed on your device. 

You can use this link for more details

<a href="http://wiki.netbeans.org/MobileBrowsers" rel="nofollow noreferrer">http://wiki.netbeans.org/MobileBrowsers</a>

blocks|key|702465|text|自从Firebug+Lite停止工作后，我切换到了Eruda，它提供了一个控制台、一个DOM浏览器和一些更多的特性。您可以使用bookmarklet将其注入任何页面。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|702466|​|702467|📷|atomic|702468|702469|entityMap|0|LINK|mutability|MUTABLE|url|https://eruda.liriliri.io/|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/246353e7f2a69373dafae6c1d7043127.png|imageAlt^0|P|5|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|I|3|E|5|6|7|16|8|@]|9|@]|C|$]]|$1|J|3|-4|5|6|7|17|8|@]|9|@]|C|$]]]|K|$L|$5|M|N|O|C|$P|Q]]|R|$5|S|N|T|C|$U|V|W|-4]]]]

Since Firebug Lite stopped working, I've switched to <a href="https://eruda.liriliri.io/" rel="nofollow noreferrer">Eruda</a>, which provides a console, a DOM explorer, and some more features. You can inject it into any page using the bookmarklet.
<a href="https://i.stack.imgur.com/SeNDX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SeNDX.png" alt="A screenshot of Eruda's UI. A tab bar is shown at the top, linking to &quot;Console&quot;, &quot;Elements&quot;, &quot;Network&quot;, &quot;Resources&quot;, &quot;Sources&quot;, &quot;Info&quot;, &quot;Snippets&quot;, and &quot;Settings&quot;. &quot;Console&quot; is highlighted. Below that, there are buttons to filter down the messages. A single message is shown: &quot;Hello, this is Eruda.&quot;" /></a>

blocks|key|918353|text|您可以将iPhone或iPad连接到mac电脑上，并使用Safari的开发工具。https://developer.apple.com/safari/tools/也有一些在线工具可以做同样的事情。检查http://farjs.com|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|918354|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.apple.com/safari/tools/|1|http://farjs.com/^0|14|15|0|2S|G|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

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

blocks|key|918592|text|我建议使用：https://www.vanamco.com/ghostlab/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|918593|这是一个可以在多个移动设备上一键调试的平台。|918594|在浏览器中执行操作，可以选择传播到连接到私有IP的其他设备(这些设备应该连接到相同的网络并使用IP地址)。|918595|您将看到Chrome开发人员界面，但在那里您可以进行CSS调整(更改将发生在每个连接的设备上)和Javsascript调试。|918596|entityMap|0|LINK|mutability|MUTABLE|url|https://www.vanamco.com/ghostlab/^0|6|X|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@]|C|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|K|$L|$5|M|N|O|C|$P|Q]]]]

I would suggest to use: <a href="https://www.vanamco.com/ghostlab/" rel="nofollow noreferrer">https://www.vanamco.com/ghostlab/</a>

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

Doing an action in a browser, can choose to propagate to other devices connected to a private IP (and those devices should connect to same network and use IP address).

You'll see a Chrome developer interface but there you can make CSS adjustements (the changes will occur to every devices connected) and Javsascript debugging.

blocks|key|702496|text|所有的答案都很有帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|702497|如果您需要访问移动浏览器上的控制台日志进行调试，您可以使用OutFrontJS之类的工具。它是一个npm包，可以将控制台记录到DOM中。|offset|length|702498|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/paanSinghCoder/OutFrontJS^0|0|T|A|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

All of the answers are helpful.
If you need access to console logs on mobile browsers for debugging you can use something like <a href="https://github.com/paanSinghCoder/OutFrontJS" rel="nofollow noreferrer">OutFrontJS</a>. It an npm package that logs your console to the DOM.

How do people debug websites on mobile devices?

I'd like to be able to manipulate the HTML and CSS similar to using the Inspector in a desktop browser, and debug JavaScript.

How to debug web sites on mobile devices?

集成开发环境

Android

Xcode

人们如何在移动设备上调试网站？我希望能够操作超文本标记语言和CSS，就像在桌面浏览器中使用检查器一样，并调试JavaScript。

问如何在移动设备上调试网站？
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在移动设备上调试网站？EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在移动设备上调试网站？
EN