はじめに
webアプリをデバッグしていると、ログ表示が欲しくなります。通常は、console.log()を使用していますが、これは、コンソールデバッガーを開かないと見ることができません。
そこで、毎回、コンソールデバッガーを開くのが面倒なので、いっそのこと、画面にリアルタイムで、ログを表示できないものかと思い、作成したのが、今回のログ表示関数です。
サンプル画面
ログ表示画面を見た方がわかりやすいと思い、以下はその画面です。
拡大画面
このように、実画面上にリアルタイムでconsole.log()の内容と同様に表示しています。時刻と行番号を表示するようにしています。
ログの行番号を見ると、上から下へ流れるような実行順序ではないことがわかります。結構、あっちこっちへ飛んでいます。これは、コードに非同期処理が含まれているためです。
サンプル画面の実行方法について
このログ関数は、Agent_Youtubeプラグインv10.0に含まれたものです。このバージョンはまだ、未公開です。現在はv9.0がChromeウェブストアで公開されています。
(1)プラグインのインストール
まだ、未公開のため、パソコン内のプラグインからインストールしています。インストール後に表示される拡張機能ボタンをクリックすると以下のようなポップアップ画面が表示されます。
このプラグインは、以下の2つの機能をもっています。
(1) Agent i の実行
(2) Youtube検索と再生
このポップ画面からいずれかを選択しておきます。先に、Agent i の実行から始めます。
実行手順
(1)任意のページ(アメバなど)を開いて、そこのページ上のテキストをマウスで選択します。
(2)すると、Agent i ページに選択したテキストを質問内容とした、回答が表示されます。
ここで、ログの表示が行われます。
これは、「あなたのピグ」を選択した時の画面です。ログとプラグインの画面が表示されます。
ここで、回答ボタンをクリックすると、Agent i のページが開き、回答を見ることができます。
このページでもログ表示が出ます。
あとがき
今回は、ポップアップログ表示の概要をご説明しました。次回は、具体的な内容についてご説明したいと思います。