CODEWITHSUNDEEP
iphoneiosios6
Matt
Matt

Reputation: 1025

iOS 6 debug console gone?

I used to use the "Debug Console" for mobile Safari to print out console.log messages when I'm troubleshooting. With iOS 6, in Safari's advanced settings, the "Web Inspector" replaced the "Debug Console." Unfortunately, my company doesn't allow me to plug the phones we're testing with into the computers we're developing on.

Does anyone know how to enable messages printed by using console.log() to be show on iPhones with iOS 6?

Upvotes: 38

Views: 40708

Answers (5)

Joey
Joey

Reputation: 1155

Just create your own console at the bottom of the screen. This is a quick solution but its better than making alerts all over the place. Make sure to put this in the root html file (bottom) or convert to all JS and put in the root JS file (top).

<div id="console"></div>
<style media="screen">
#console {
    resize: both;
    height :200px;
    overflow: scroll;
    background: white;
    color: black;
    border: 1px solid black;
    width: 95vw;
    padding: 5px;
    margin: auto;
}
</style>
<script type="text/javascript">
logger = (...params) => {
  const newLog = document.createElement("div");
  newLog.textContent = params.reduce((str, param) => {
      if (typeof param === 'string') return `${str} ${param}`;
      return `${str} ${JSON.stringify(param)}`;
    }, '');
    document.getElementById('console').appendChild(newLog);
  }
  window.onerror = (error) => {
    const newLog = document.createElement("div");
     newLog.style.color = 'red';
     newLog.textContent = error;
    document.getElementById('console').appendChild(newLog);
};
  console.log = logger;
  console.warn = logger;

</script>

Upvotes: 1

rgdigi
rgdigi

Reputation: 1747

I have found it helpful to output any JS errors with an alert on window.onerror ->

window.onerror = function(error) {
    alert(error);
};

I paste that into the top of scripts so that any runtime errors will be output in a native alert. Works on desktop too.

Upvotes: 28

bernard
bernard

Reputation: 316

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.

Upvotes: 14

Mattio
Mattio

Reputation: 2032

Another possible option is Steve Souders' mobile performance bookmarklet. It includes Firebug Lite, which has a console and a good bit more. It doesn't work quite the same as the previous Mobile Safari console and you must have a connection to use it.

Upvotes: 4

user139078
user139078

Reputation: 411

They removed it. You will now be required to debug through Safari.

http://www.mobilexweb.com/blog/iphone-5-ios-6-html5-developers

It's actually pretty easy to setup.
1) Make sure your Web Inspector setting is turned on under iPhone Settings => Safari => Advanced.
2) Plug in your phone to a Mac OSX computer.
3) Open Safar 6 and make sure Develop mode is on Safari Preferences => Advanced => Show Develop Menu

Upvotes: 19

Related Questions