Jun 12, 2017

How to debug Javascript on IOS (IOSでのJavascriptのデバッグ方法)

I found a bug of My site YARUBEN,  it can't speak with SpeechSynthesisUtterance after someday only in IOS, but in Windows it is well.

(私のサイト やるベンのバグを発見しました。IOSで いつの間にか SpeechSynthesisUtteranceと話すことができなくなりました。でも、Windowsではうまくいきます。)

The debugging led me take 4 days. (デバッグに4日もかかりました。)

I write how to debug it and the reason of the bug. (デバッグ方法と原因です)

(1) change outer js file to inside js. (js ファイルを内部化する)

in my php,
OLD "<script type=\"text/javascript\" src=\"myscript.js\"></script>"
NEW "<script type=\"text/javascript\">\n<!--\n".file_get_contents("myscript.js")."\n// -->\n</script>"

This change has effect of force to re-load the newest javascript of web page.
(この変更で、ページ再ロードで最新のjavascriptが強制ロードされます)

(2) add an error handler (エラーハンドラーの追加)

in my js,
NEW 
window.onerror = function(msg, url, line, col, error) {
   // Note that col & error are new to the HTML 5 spec and may not be 
   // supported in every browser.  It worked for me in Chrome.
   var extra = !col ? '' : '\ncolumn: ' + col;
   extra += !error ? '' : '\nerror: ' + error;

   // You can view the information in an alert to see things working like this:
   alert("Error: " + msg + "\nurl: " + url + "\nline: " + line + extra);

   // TODO: Report this error via ajax so you can keep track
   //       of what pages have JS issues

   var suppressErrorAlert = true;
   // If you return true, then error alerts (like in older versions of 
   // Internet Explorer) will be suppressed.
   return suppressErrorAlert;
};

the reason of the bug

The bug code is (原因コード)
var recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition || window.mozSpeechRecognition || window.msSpeechRecognition)();

this code make an error only in IOS. but no error in Windows.
(IOSのみでエラーが出ます)

this code is copy from https://davidwalsh.name/speech-recognition
(コードの出所はここです)

the new code

var recognition = null;
function initRecognition()
{
if(recognition === null){
if ('SpeechRecognition' in window) {
recognition = new window.SpeechRecognition;
} else if('webkitSpeechRecognition' in window){
recognition = new window.webkitSpeechRecognition;
} else if('mozSpeechRecognition' in window){
recognition = new window.mozSpeechRecognition;
} else if('msSpeechRecognition' in window){
recognition = new window.msSpeechRecognition;
}
}
}
...