Get Launch Console Logs in iOS WebView
In a Cordova application, any calls to the console. {log, warn, error, etc} before connecting Safari developer tools are not displayed in the console. This makes it impossible to debug startup errors. How do I get these messages?
Bonus question: how to make the WebView stop on the debugger; lines before connecting to Safari?
I remember a friend telling me how to start the safari web inspector, whether the app is in the foreground or not. I found his article and here are the details -
The first thing to do is set a global hotkey - steps:
- Open System Preferences / Keyboard
- In the right pane select
Application Shortcuts
- Add hotkey - use any keys you want (I used
CMD + ALT + I
) - Pick a suitable key
index.html
or whatever, html file
Steps to open an open SWI
- Launch the Cordova application
- Open SWI
- Close SWI
- Run SWI with the shortcut key configured in the global hotkey
Application Shortcuts
- Close application
- Reopen App - notification that SWI is still running and keeps giving us logging / debugging!
Apart from the above technique, have you installed this plugin below and checked the logs in Xcode?
cordova plugin add org.apache.cordova.console
Are you using the Ripple emulator? Here's a great post on setup .
There is a nice new tool, quite simple, that solves your problem. Take a look at GapDebug
here , it's pretty new, but works great for me!
It does exactly what you are trying to achieve with Safari Remote Inspector, in particular, it does not close sessions when you exit the application and therefore catches all console output.
Also very interesting when combined with Android because you get one tool to debug both platforms respectively.
I could, of course, override or wrap the console.log, to display the log messages in the array window._log
.
(function(){
var _console = window.console;
window.console = {};
window.$log = {};
['log', 'warn', 'error', 'debug'].forEach(function(level){
window._log[level] = [];
window.console[level] = function(){
var args = Array.prototype.slice.apply(arguments);
window._log[level].push(arguments);
_console[level].apply(_console, arguments);
}
});
}());
I gave up and just did the following:
// At beggining
window.logs = [];
// Just push the logs
window.logs.push(err)
window.logs.push(string)
You can then view the logs in the developer console log screen by entering, logs.
This simple trick can be useful, just open a console in Safari and run:
window.location.reload()
You just need to click the round arrow and restart the webapp!
