はじめに
LINE WORKSのAndroid/iOSアプリ上でWOFFアプリの動作確認をする際に、開発者ツールの表示もできないため、何か動作に異変があった場合にデバッグが難しく、HTMLを修正して画面上やアラートでログを表示するといったことも限界があります。
スムーズなデバッグを行うために、「vConsole」を活用することができます。
サンプルコード
LINE WORKSが提供するWOFFのサンプルコードでもvConsoleを利用しています。
vConsoleを追加する
vConsoleの追加方法は簡単で、以下のコードをHTML内に入れるだけです。
<!DOCTYPE html>
<html lang="en">
<head>
....
</head>
<body>
<!-- VConsole -->
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
// VConsole will be exported to `window.VConsole` by default.
var vConsole = new window.VConsole();
</script>
<!-------------->
....
vConsoleでWOFFのログを見る
vConsoleを入れたWOFFアプリを立ち上げると、右下に「vConsole」ボタンが表示されます。
(画面はiOS版)
これを押すと、コンソール画面が立ち上がり、ログやシステムログ・ネットワークログといった一般的な開発者ツールでみられる情報が表示されるようになります。
console.log() で出力したログも、「Log」でみられるようになるため、動作を見ながら、このvConsoleでコンソールログも確認できるようになります。
参考
vConsoleが合わない場合は代替として「Eruda」という類似のツールもあります。
まとめ
WOFFアプリの開発をスムーズにするためのツールとしてvConsoleはおすすめです。
各種機能については、vConsoleのリポジトリの情報を参照ください。