iOS6 - removed console log for IPad - how to use web inspector on windows?

问题

So iOS6 is out, horrah. Now, it appears as though Apple have removed the 'Developer Console' that used to exist in Safari. Great, I hear a lot of people say - it was limited.

But, it works on the device - now apparently you have to connect the device to a Mac to get web inspector?

Is this the only way of debugging with console? Is there a way of debugging with windows, safari? Please note, I don't mean just changing user-agent, which you can do on Safari Windows - that doesn't register touch events - just click.

回答1:

If you don't have Mac OSX you can use this script as console replacement:

https://github.com/robotnic/waterbug

It shows error message, it's possible to log all kind of variables, you have to turn your iPhone or iPad 90° to the right to open the console.

回答2:

A poor mans debugging console:

    try {
        var test = document.do.something();
    }
    catch (exc) {
        alert(exc);
    }

回答3:

One can debug on the device by using bookmarklets (especially within Mobile Safari).

Debugging on the device can be very important if an error only appears live on the device but nowhere else. There is a variety of bookmarklets for developer, so choose the tool of your choice (e.g. Firebug Lite), add it to your bookmarks and use it right where you need it. This may not be the Developer Console, but it is a method to debug much more accurate and job-oriented.

I wrote a blogpost on how to use bookmarklets on my weblog (there is also a list of other common testing tools and further bookmarklets):

http://hofmannsven.com/2013/laboratory/ios-bookmarklets/

UPDATE: Chrome released its Mobile DevTools which will make debugging (within Google Chome Mobile, Android Devices only) much easier. This will not fix the missing DevTools issue within Safari, but it might help to locate errors on a device:

https://developer.chrome.com/devtools/docs/remote-debugging
http://www.html5rocks.com/en/tutorials/developertools/mobile/

UPDATE2: Mozilla released a Firefox add-on to enable web development across browsers and devices: http://youtu.be/kEFbQwB81RE?t=1m58s

回答4:

Have a look for weinre. It allows you to inspect a page running in Safari from another computer using a Chrome-like web inspector

回答5:

You can use window.onerror to debug errors without a console. Simply add this code to your HTML document in its own <script> tag before any other Javascript code:

<script type="text/javascript">
    window.onerror = function(e){
        alert(e);
    };
</script>

This will do so that whenever there is an error, the error message will be shown in an alert dialog box, which is visible in iOS Safari. It's important that the above code runs before the error you're trying to debug, and if you're debugging a syntax error, it's also important that it's in a separate <script> tag.

回答6:

Looks like the built in console is gone. I tried plugging into a Windows 7 and opened Safari and could not locate the developer console. Then I read this article which confirmed it.

If you need to be able to test your site in both orientations then waterbug is not a good option, because it uses up the landscape orientation for its console view.

One decent option is to use Adobe Edge Inspect. You open your site on Chrome and open the app on your device and your device will mirror whatever page you have open on your desktop. Then you can use the Chrome dev tools to debug your content.

回答7:

Instead of Safari on Windows you could use an app by Telerik called AppBuilder. I've found the instructions on this blog. You'll need to get an account to use the Telerik Platform though.

This will give you dev tools like the ones in Safari. I've used it on Win7 64 bit with regular web apps and Phonegap apps running on an iPad with iOS 7.1.

回答8:

Like neno suggested, Telerik AppBuilder is a great applications. I am actually running Windows XP in a virtual machine on Linux only for the purpose of debugging my iPhone. Windows XP because in my case Windows 7 does regognize the iPhone, but iTunes and Telerik AppBuilder don't.

来源：https://stackoverflow.com/questions/12583275/ios6-removed-console-log-for-ipad-how-to-use-web-inspector-on-windows

标签

ipad

debugging

ios6