问题
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.
回答1:
This is the correct answer, not sure why Blaine only left it as a comment!
As of iOS 6 Remote Debugging is available: https://stackoverflow.com/a/12762449/72428
On OS X you can use the Safari web inspector on the iOS Simulator AND iOS 6 devices.
- First enable the Developer menu in Safari on your Desktop.
Next, enable remote debugging on your iOS device (or simulator).
Settings > Safari > Advanced > Web Inspector (ON)
Go back to Safari on your computer, click the Developer menu, and select your device (e.g. iPhone Simulator, iPhone)
回答2:
With Google Chrome for Android Beta you can now do remote debugging using the developer tools built into Google Chrome on your desktop. Here is a video demonstrating how this works.
回答3:
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.
回答4:
In Chrome:
Settings -> Tools -> Developer Tools -> Settings (right site bottom) -> User agent (in Tab menu) -> "Override User Agent"
回答5:
iWebInspector for iOS is truly amazing for debugging web pages in iOS.
Update: since I posted this answer, iOS and OS X have updated, and now Safari on your Mac can connect to and debug Mobile Safari.
Check out Firebug Lite.
for Chrome on Android, Remote Debugging isn’t bad!
回答6:
There are several ways to debug the DOM and JS on mobile devices. With Adobe Shadow you're also able to inspect localStorage.
- weinre
- Adobe Shadow
- For Mac and iPhone: iWebInspector
回答7:
There is a bookmarklet for a lite version of Firebug which you can use on mobile.
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');
You can use this second bookmarklet to display a console log on 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();}});}})();
There's also this one from farjs.com (similar to 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);})()
In addition to weinre (Web Inspector Remote). There is also..
MIHTool iOS App : a wrapper for weinre. Free version and paid version available.
SocketBug : a Remote Debugging Utility built using Socket.IO
jsConsole : a simple JavaScript command line tool. However, it also provides the ability to bridge across to other browser windows to remotely control and debug that window - be it in another browser or another device altogether.
回答8:
Adobe just released a new tool a new inspection and preview tool:Adobe Shadow. The page with instructions is here.
It synchronizes mobile web browsing with computer and allows to perform web inspection and DOM manipulation.
回答9:
Open the iOS simulator that comes with Xcode, then open Safari, and you should see this option in the "Develop" Menu
Works just like Firebug
回答10:
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.
回答11:
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:
http://martinkool.com/post/13629963755/firebug-on-ipad-and-iphone
回答12:
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
http://wiki.netbeans.org/MobileBrowsers
回答13:
Are you using php to decide the user agent?
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.
回答14:
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
回答15:
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.
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.
来源：https://stackoverflow.com/questions/5794984/how-to-debug-web-sites-on-mobile-devices