39

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?

Matt
  • 1,015
  • 1
  • 11
  • 12

5 Answers5

28

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.

rgdigi
  • 1,701
  • 2
  • 21
  • 31
  • 3
    Thanks a lot. This saved my day, I improved it a little bit and put it out there: https://github.com/AlphaGit/random-javascript/tree/master/alert-errors – Alpha Aug 07 '13 at 21:59
  • 1
    This one is the bestie :) – Nav Mar 07 '14 at 12:58
  • Genius! Thanks a lot sir, now I don't have to give apple any of my hard-earned cash just to get things working on their platform! – Danman May 24 '15 at 07:34
19

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

user139078
  • 411
  • 1
  • 4
  • 12
  • 194
    Yes, it's super easy... unless you don't have a Mac. – K2xL Oct 02 '12 at 15:22
  • 25
    Also doesn't answer the question: the questioner said he's not permitted to plug the phone into his Mac. – Mark Whitaker Oct 02 '12 at 16:34
  • 3
    You guys should try the [Firebug Lite (bookmark version)](http://getfirebug.com/firebuglite#Stable). It works fine for me. – Derek 朕會功夫 Nov 15 '12 at 08:16
  • 9
    @Derek I can't get Firebug Lite working on my iPhone 3GS using Safari and iOS 6. Why did they remove the console in iOS 6!? Now you can't even debug through Safari because you need Safari 6 which only runs on Mac. You're totally stuffed if you're running Windows. For shame Apple. I'm back to debugging with alert(). Awesome. This is the most backwards thing ever. Guess that'll teach me for using version 6 software. Name one piece of good version 6 software. Windows 6 = Vista, iOS 6, Safari 6. Anyone seeing the pattern here? 666... – zuallauz Dec 05 '12 at 08:54
  • @zuallauz - Well if you want to debug on Windows, you can use remote debugging. You can try it in jsfiddle. ;) – Derek 朕會功夫 Dec 05 '12 at 14:09
  • Even if you do have a Mac, you're stuck with Safari 5.x unless you upgrade to OSX 10.7 ... lousy Apple. – sbeliv01 Jun 19 '13 at 21:35
  • Did never and will never understand the people who promote/d Apple. Even here, Apple forces you to buy one of their MACs just to be able to debug their device. In my case I need to check a html5 embedded video, that of course does not play on ipad (but on all other devices), so I am stuck coz I cannot use the javascript debugging proposal from above. – Avatar Jun 04 '14 at 13:04
  • Apple is just a religion mean towards other religions. I really dislike what they are doing at all levels. Opposite of cool. – Mike Garcia Jul 04 '14 at 07:35
  • 0) Convince your employer to spend $500 on a Mac mini that is otherwise air gapped. – Damian Yerrick Jun 08 '16 at 15:49
14

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.

bernard
  • 306
  • 1
  • 8
4

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.

Mattio
  • 2,014
  • 3
  • 24
  • 37
1

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>
Joey
  • 1,075
  • 8
  • 13
  • paste into babel https://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015&targets=&browsers=&builtIns=false&debug=false&code_lz=Q if you need it in es5 – Joey Aug 08 '17 at 23:30