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

Question

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 limit

Answer 1

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

Answer 2

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.

Answer 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

Answer 4

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.

Answer 5

A poor mans debugging console:

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

Answer 6

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.