トラブルシューティングを行っているときに、モバイルSafariの「デバッグコンソール」を使用してconsole.logメッセージを出力していました。 iOS 6では、Safariの詳細設定で、「Web Inspector」が「Debug Console」に置き換わりました。残念ながら、私の会社では、テスト中の電話を開発中のコンピューターに接続することを許可していません。
Console.log()を使用して印刷されたメッセージをiOS 6搭載のiPhoneで表示できるようにする方法を知っている人はいますか?
window.onerror->のアラートでJSエラーを出力すると役立つことがわかりました
window.onerror = function(error) {
alert(error);
};
ランタイムエラーがネイティブアラートで出力されるように、これをスクリプトの先頭に貼り付けます。デスクトップでも動作します。
彼らはそれを取り除いた。これで、Safariを介してデバッグする必要があります。
http://www.mobilexweb.com/blog/iphone-5-ios-6-html5-developers
実際には設定は非常に簡単です。
1)[iPhoneの設定] => [Safari] => [詳細]で、Webインスペクターの設定がオンになっていることを確認します。
2)電話機をMac OSXコンピューターに接続します。
3)Safar 6を開き、開発モードがSafariの設定=>詳細=>開発メニューを表示することを確認します
Mac OSXがない場合は、このスクリプトをコンソールの代替として使用できます。
https://github.com/robotnic/waterbug
エラーメッセージが表示され、あらゆる種類の変数を記録することができます。コンソールを開くには、iPhoneまたはiPadを90°右に回す必要があります。
別の可能なオプションは、Steve Soudersの モバイルパフォーマンスブックマークレット です。これには、Firebug Liteが含まれています。FirebugLiteには、コンソールなどがあります。以前のMobile Safariコンソールとまったく同じようには機能せず、使用するには接続が必要です。
画面の下部に独自のコンソールを作成するだけです。これは簡単な解決策ですが、あちこちでアラートを作成するよりも優れています。これを必ずルートhtmlファイル(下)に置くか、すべてのJSに変換してルートJSファイル(上)に入れてください。
<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>