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?

回答1:

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.

回答2:

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

回答3:

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.

回答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.

回答5:

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>

来源：https://stackoverflow.com/questions/12587063/ios-6-debug-console-gone

标签

iphone

ios

ios6