はじめに
webページの最初の画面を表示したときに、javascriptのコードがどのような順序で実行しているかを確認したいときはコンソールデバッガーでログを見ます。そのログを表示するには、事前に、console.log(".....");のコードを各要所々に埋め込んでおきます。この時に、メッセージの書き方が統一されていないと、何が何だかわかりません。
ただ、メッセージがいろいろと表示されているだけです。
もう少し、時系列的に何が、どのような順序で実行されているのかを知りたくなります。
そこで、メッセージの書き方とか、どこへ埋め込むかとかを考えてみます。
少し複雑なwebページによっては、jsファイルも複数あったり、プラグインが実行されていたりします。DBを扱うために、phpファイルもあったりします。
そのあたりを考慮したconsole.log()メッセージを埋め込んでおくと、進行状況がわかりやすくなります。
今回は、その辺を考慮したconsole.log()メッセージを埋め込んだwebページで、スクリプトの進行状況を表示したいと思います。
メッセージ形式
console.log(....)の....に書く形式は、英語の5W1H形式がわかりやすいと思います。いつ、どこで、何を、どうしたとかで。
例 時刻(いつ)■ファイル名(どこで)■コールした関数、実行するリスナーとか(何を)■クリックしたとか(どうした)
例
07:27:02.372 main.js:851 ▼aaa()▼favoriteClass.jsをインポートします。
画面
ログを採取した画面です。
このページを表示後にコンソールデバッガーで、ログを採取しています。
ページのhtmlファイルです。
このページで使用しているjsファイルは3つあります。main.jsはモジュールタイプで、後の2つは、main.jsでダイナミックimport()しています。(favoriteClass.jsとgnplayer.jsです。)
<?php
/*********************************************************************
*URL https://favorite.tecoyan.net/test_debug/index_main.php
*Comment入力をクラス化してみる。
*comment = new Comment();
*test_debug
***********************************************************************/
header("Access-Control-Allow-Origin: *");
require_once 'https://favorite.tecoyan.net/test_debug/get_random_vid_func.php';
if(isset($_GET["lnm"])){
//あり
$lnm = $_GET['lnm'];
}else{
$lnm = "喫茶店の片隅で";
}
?>
<!DOCTYPE html>
<html>
<head>
<title>test_debug再生リスト</title>
<meta charset="UTF-8">
<meta name="referrer" content="origin" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://favorite.tecoyan.net/test_debug/style.css">
<!--要チェック-->
<!--このページのメインスクリプトファイルです。-->
<script type ='module' src="https://favorite.tecoyan.net/test_debug/js/main.js"></script>
<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon">
<!--要チェック-->
<link rel="canonical" href="https://favorite.tecoyan.net/test_debug/index_main.php">
</head>
<body>
<div id="block" name="0" style="border:solid 4px green; background-color:lightblue;height:60px;">
<span title='そろそろ80代になろうとしている元プログラマーが製作しています。' style='display: block;position: relative;height: 5px;'>
このサイトは、youtubeプレーヤーと再生リストを表示します。再生リストは自前のサーバからランダムに選択したリストです。
サムネイルをクリックすると再生します。再生が終了すると次のサムネイルの動画を再生します。
リストを連続自動再生します。<span id='lnm'><?php echo $lnm;?></span><span style='font-size:1.2em;font-weight:bold;color:blue;'>(注)「この動画を再生できません。」と表示された場合は、リロードしてください。</span>
</span>
<button id='close' class='kado_maru' style='position: absolute;top: 5%;left: 95%;float:right;'>閉じる</button>
<button id='comment_btn' class='kado_maru' style='position: absolute;top: 5%;left: 86%;float:right;'>コメント</button>
<button id='random' class='kado_maru' title='このランダム動画は昭和世代が選択していますので、悪しからず。' style='position: absolute;top: 5%;left: 81%;float:right;'>ランダム</button>
<button id='ichiran' class='kado_maru' title='クェリー一覧を表示します。' style='position: absolute;top: 5%;left: 76%;float:right;'>一覧</button>
<button id='いいね' title='いいねを表示します。' style='background-color:lightpink;color:white;font-weight:bold;position: absolute;top: 5%;left: 70%;float:right;'>いいね</button>
<span id="count" style='position: relative;background-color: white;top: 23px;width: 30px;left: 74%;display: block;'></span>
<!--プレーヤー要素 -->
<div id="player_elem" style="position:relative;top:30px;left:0px;clear: both;">
<div id="if_player" class="clearfix" style="float:left;"></div>
</div>
<!-- リスト一覧-->
<div id="list_blk" style="padding:3px;background-color:white;border:solid 4px green; position:absolute;left:660px;top:79.5px;display:block;width:800px;height:500px;">
<span style='position: relative; top: 10px;left:0px;height: 30px;'>クェリーキー:<span id='queryKey' style='position: relative;top:-23px;display: block;width:590px;height: 20px;left: 150px;'>
</span></span>
<input type="text" id="selchara" style='zoom:1.24;float:left;' name="name" required minlength="1" maxlength="10" size="10" />
<button id='search_chara' style='float:left;' >絞り込み</button><br>
<div id="selgenre" style='width:200px;clear:both;zoom:1.24;float:left;' ></div>
<button id='sel_genre' style='float:left;' >ジャンル表示</button>
<button id='wiki' style='float:left;' >Wiki検索</button>
<button id='yahoo_search' style='float:left;' >Yahooサーチ</button>
<div id="lists" style="position:relative;top:0px;float:left;display:block;"></div>
</div>
</div>
<div id="index" style="display:none;"></div>
<div id="player" style='border:solid 4px green; position: absolute;top: 11%;'></div>
<pre style='border:solid 4px green; font-size:1.3em;position:absolute;top:60%;width:640px;height:230px;'>
再生リストの登録の仕方
再生リストは、アメバの編集で行います。先に、「AmebaYoutueListプラグイン」を
インストールしておきます。アメバの編集の右側にyoutubeボタンがあります。
そのボタンをクリックすると、検索フィールドが表示されますので、そこに、
検索キーを入力して、検索ボタンをクリックすると、再生リストがサーバーへ登録
されます。この時、alert()メッセージが表示されます。okを押してゆくと保存され
ます。登録した再生リストは一覧ボタンで表示されます。
<a href='https://favorite.tecoyan.net/slim/zip/AmebaYoutubeList.zip'>「AmebaYoutueListプラグイン」のダウンロード</a>
任意のフォルダーで解凍して、Chromeの設定の「拡張機能」で解凍したフォルダー
を指定すれば、インストールできます。
</pre>
<button id='drag_stop' class='kado_maru' style='z-index:999999;position: absolute;top: 11%;left: 94%;float:right;'>ドラッグ禁止状態</button>
</body>
</html>
test_debug再生リスト https://favorite.tecoyan.net/test_debug/index_main.php?lnm=森田健作%E3%80%80-知事#block
ログの出力結果(全体)
07:27:02.372 main.js:851 ▼aaa()▼favoriteClass.jsをインポートします。
07:27:02.377 favoriteClass.js:58 ●constructor(list_name)● ランダム
07:27:02.443 favoriteClass.js:103 ●constructor(list_name)● リストサイズ = 50
07:27:02.635 ameba_youtube_list_content.js:13 ●拡張機能●ameba_youtube_list_contents.js●AmebaYoutubeListプラグインをロードします
07:27:02.696 ameba_repeat_content.js:13 ●拡張機能●ameba_repeat_content.js●AmebaRepeatプラグインをロードします。
07:27:02.874 favoriteClass.js:58 ●constructor(list_name)● ランダム
07:27:02.912 favoriteClass.js:103 ●constructor(list_name)● リストサイズ = 50
07:27:02.945 main.js:875 ▼aaa()▼gnplayer.jsをインポートしました。
07:27:02.991 main.js:51 ▼auto_start()関数▼スタート
07:27:03.058 main.js:787 ***********************************************************************
07:27:03.328 main.js:238 ***********************************************************************
07:27:03.407 main.js:903 ▼test().then()▼ setTimeoutテスト
07:27:03.443 ameba_repeat_content.js:297 ●拡張機能●.addEventListener('load',
07:27:03.480 gnplayer.js:17 ■$.ajax({url: 'https://favorite.tecoyan.net/test_debug/get_selected_ameba_youtube_list.php',
07:27:03.518 gnplayer.js:57 ■$.ajax({url: 'https://favorite.tecoyan.net/test_debug/getCommentDb.php',
07:27:03.555 favoriteClass.js:135 ●.get_lists(list_name, query))コール 全リスト 森田健作 -知事
07:27:03.597 gnplayer.js:119 ■$.ajax({url:'https://favorite.tecoyan.net/test_debug/getCommentDb.php'
07:27:03.754 gnplayer.js:160 ■onYouTubeIframeAPIReady ■ gnplayer = new YT.Player('player',
07:27:04.485 gnplayer.js:270 ■onPlayerReady(event)■event.target.playVideo();さらば涙と言おう / 森田 健作 : ピアノ（ソロ） / 入門
07:27:06.413 main.js:895 ▼test()▼setTimeout(3秒後) テスト
このログ出力結果を見ると時刻の後に、jsファイル名とその行番号が表示されていますので、これで、時刻順にどのスクリプトファイルのどこの行番号のスクリプトが実行されているのかがわかります。これだけで、プラグインも入れると5つのjsファイルが入り乱れて実行されているのがわかります。各ファイルで関数やメソッドの定義、呼びだし、ボタンのアクションなどが時系列に実行されています。
ちなみに、時刻と行番号は、コンソール デバッガーが出力したものです。
まず、ブラウザーからサーバーへurlのリクエストを出した後に、サーバーから、応答が返ります。その応答をサーバーがモニターへ表示します。
上のログ一覧は、応答を表示するまでに取得したログを表示しています。
ログの最初に07:27:02.372 main.js:851」と表示されています。これは、コンソールデバッガーが表示したものです。これは、最初に実行されたconsole.log(.....);です。main.jsファイルの851行目に、console.log(.....);を入れています。このように、各jsファイルの要所要所にconsole.log(....);を入れておくと、進行状況がわかります。
デバッグをしていると、どこで、どのスクリプトが実行されているのかを知る必要があります。正しい順序で実行しているのか、それとも、間違っ順序で実行しているのかを掴む必要があります。
ログを見ていると、それに気づきます。エラーログが出ているjsファイルの時刻と行番号をログと対比すれば、どこでエラーが発生したかを掴めます。
個別のログ出力結果を見るには
10:21:34.294 main.js:851 ▼aaa()▼favoriteClass.jsをインポートします。
10:21:34.638 main.js:875 ▼aaa()▼gnplayer.jsをインポートしました。
10:21:34.898 main.js:51 ▼auto_start()関数▼スタート
10:21:34.960 main.js:787 ***********************************************************************
10:21:35.962 main.js:238 ***********************************************************************
10:21:38.031 main.js:903 ▼test().then()▼ setTimeoutテスト
10:21:41.038 main.js:895 ▼test()▼setTimeout(3秒後) テスト
10:21:34.432 favoriteClass.js:58 ●constructor(list_name)● ランダム
10:21:34.477 favoriteClass.js:103 ●constructor(list_name)● リストサイズ = 2
10:21:34.542 favoriteClass.js:58 ●constructor(list_name)● ランダム
10:21:34.594 favoriteClass.js:103 ●constructor(list_name)● リストサイズ = 50
10:21:38.152 favoriteClass.js:135 ●.get_lists(list_name, query))コール 全リスト 森田健作 -知事
10:21:38.081 gnplayer.js:17 ■$.ajax({url: 'https://favorite.tecoyan.net/test_debug/get_selected_ameba_youtube_list.php',
10:21:38.116 gnplayer.js:57 ■$.ajax({url: 'https://favorite.tecoyan.net/test_debug/getCommentDb.php',
10:21:38.206 gnplayer.js:119 ■$.ajax({url:'https://favorite.tecoyan.net/test_debug/getCommentDb.php'
10:21:38.501 gnplayer.js:160 ■onYouTubeIframeAPIReady ■ gnplayer = new YT.Player('player',
10:21:39.315 gnplayer.js:270 ■onPlayerReady(event)■event.target.playVideo();さらば涙と言おう / 森田 健作 : ピアノ（ソロ） / 入門
以上のログは、初期画面を表示したときのものです。何も操作はしていません。次に、何かしらの操作をした時のログを表示してみます。ここで、初期画面の時のログは消去しておきます。
ボタン操作をした時のログ表示
画面の上端に一覧とランダムボタンがあります。この2つのボタンのログを表示してみます。
以下は、一覧ボタンをクリックすると、一覧リストが表示されます。そこで、「美空ひばり」をクリックすると、再生がスタートします。この再生が終了して次の動画の再生をスタートするまでをログ採取して表示してみます。
14:11:47.629 main.js:74 ▼$("#ichiran").on('click',***********************************************************************
14:11:47.629 main.js:75 ▼#ichiran▼click アクション
14:11:47.630 main.js:78 ▼glistobj.get_lists("一覧リスト", "").then(...) メソッド コール
14:11:47.630 favoriteClass.js:135 ●.get_lists(list_name, query))コール 一覧リスト
14:11:47.675 favoriteClass.js:340 ●display_list().then(msg) 一覧リストを表示しました。
14:11:47.675 main.js:81 ▼#ichiran▼glistobj.get_lists("一覧リスト", "").then(msg) 一覧完了
14:11:47.675 main.js:238 ***********************************************************************
14:11:49.502 main.js:238 ***********************************************************************
14:11:49.502 main.js:383 ▼一覧リストで、plist_title クリック 美空ひばり
14:11:51.938 favoriteClass.js:135 ●.get_lists(list_name, query))コール 全リスト 美空ひばり
14:11:51.999 main.js:396 ▼glistobj.get_lists("全リスト",美空ひばり 〜魅力のすべて〜
14:19:46.775 gnplayer.js:302 ■onPlayerStateChange(e)■ 0(終了)
14:19:46.776 gnplayer.js:338 ■gnplayer.loadVideoById(vid)■ 美空ひばり／愛燦燦
このログを見ると、3つのスクリプトファイルが表示されています。
まず、処理の流れでは、最初に一覧ボタンがクリックされたのがわかります。次に、glistsobj.get_lists("一覧リスト"").then(...)メソッドがコールされています。そこではDBから一覧リストを取得してその一覧を表示しています。
次に、一覧リストで「美空ひばり」がクリックされています。
それが、時刻では14:11:49:502になります。
クリックすると、favoriteClass.js:135 ●.get_lists(list_name, query)メソッドがコールされます。そこで、「美空ひばり」のリストが表示されます。ここでは、美空ひばりのリストが表示されたら、自動的にリストの先頭から再生がはじまります。これが、
main.js:396 ▼glistobj.get_lists("全リスト",美空ひばり 〜魅力のすべて〜になります。時刻的には、14:11:51.999に再生がはじまり、14:19:46.775に終了しています。
約8分の動画になります。これは、強制終了したためです。実際の動画は51分位です。それが終了すると次の動画が14:19:46.776にスタートします。それが、gnplayer.loadVideoById(vid)■ 美空ひばり／愛燦燦になります。
ログ表示の仕方を工夫して
console.log(............)のメッセージの書き方の一例として、区切り記号をいくつか使用して表示すると見やすくなります。
jsファイル名:行番号■関数名またはメソッド名(引数)、アクションを起こしたイベント■説明のような形式で表示できます。
ログは、コードのどこをいつ通ったかを示す必要があります。進行状況を把握するには最低限必要です。
クリックイベント
このページでは、以下の種類があります。どのボタンがクリックされたか、どのサムネイルがクリックされたか、一覧ではどのタイトルがクリックされたか、ジャンル選択ではどのジャンルが選択されたかを示す必要があります。
(1) ボタンクリック
この場合は、ボタン名を表示します。
例えば、一覧ボタンでは、
$("#ichiran").on('click', (e) => {
console.log("■$(\"#ichiran\").on('click',\");■");
....
});
だけでも、どのボタンでクリックされたかがわかります。
(2) サムネイルクリック
この場合は、サムネイルを再生します。
実は、これが一番苦労するところで、サムネイルのクリックには、いろいろな機能があるためです。
・サムネイルをクリックして再生する。
・サムネイルをクリックして、ジャンルへ登録する。
・サムネイルをクリックしてそのエントリーをリストから削除する。
・サムネイルをクリックしてそのエントリーをリストの先頭へ移動して保存する。
・などがあります。
それらを識別するメッセージをconsole.log(...)へ記述します。
以下はそのエントリーの動画を再生するログです。
$("#block").on('click', (e) => {
...
switch(e.target.className){
...
case "my_list"
console.log("gnplayer.loadVideoById(glistobj.vid)▼ "+glistobj.title+"▼サムネイルをクリックして再生");
....
});
これは、サムネイルがクリックされたときのリスナーを登録する場所に挿入するconsole.log(..)文ですが、その場所へ行くまでに、いくつかのセレクターチェックを経てきています。ここで、ようやく、classNameでサムネイルをチェックしています。これが、先ほど述べた苦労するところです。
ログ表示するときに、コンソールデバッガーの方で、jsファイル名と行番号を追加表示していますので、このconsole.log(...)で十分です。
(3) 一覧でタイトルをクリック
この場合は、タイトル名を表示します。
以下が一覧リストで、タイトルをリックした時のconsole.log(...)文です。
console.log("▼一覧リストで、plist_title クリック "+ e.target.innerText);
デバッガーの方で、jsファイル名と行番号が表示されますので、console.log(...)ではこの引数だけです。このログで、一覧リストの当該タイトルでクリックされたときに実行するイベントリスナーのスクリプトファイル名と行番号がわかります。
(4) ジャンル選択
この場合は、ジャンル名を表示します。
phpのログ表示
以下のログは、ChromePhp.phpプラグインで出力したログです。このログはまだ未整理です。このログは、DBアクセスするために$.ajax()コールしたときのログです。このプラグインでは、どのphpファイルをコールしたかがわかりません。すべて、log.jsファイルとして表示されています。そこで、整理後は、コールしたphpファイル名を表示するようにします。
07:33:49.145 log.js:137 db_connect.phpコール成功
07:33:49.145 log.js:137 get_random_ameba_youtube_list.php
07:33:49.145 log.js:137 get_random_ameba_youtube_list.php ランダム数 = 132
07:33:49.151 log.js:137 getCommentInputHtml.php
07:33:49.166 log.js:137 db_connect.phpコール成功
07:33:49.167 log.js:137 get_random_ameba_youtube_list.php
07:33:49.167 log.js:137 get_random_ameba_youtube_list.php ランダム数 = 114
07:33:49.167 log.js:137 getCommentInputHtml.php
07:33:49.168 log.js:137 get_genre.php
07:33:49.169 log.js:137 getCommentDb.php
07:33:49.169 log.js:137 getCommentDb.php vid = vW0-sRt0RYw
07:33:49.177 log.js:137 saveいいねDb.php
07:33:49.177 log.js:137 saveいいねDb.php flag = 0
07:33:49.178 log.js:137 saveいいねDb.php flag チェック = 0
07:33:49.178 log.js:137 saveいいねDb.php
07:33:49.178 log.js:137 saveいいねDb.php flag = 0
07:33:49.178 log.js:137 saveいいねDb.php flag チェック = 0
07:33:49.438 log.js:137 db_connect.phpコール成功
07:33:49.438 log.js:137 get_selected_ameba_youtube_list.php
07:33:49.438 log.js:137 get_selected_ameba_youtube_list.php 森田健作 -知事
07:33:49.439 log.js:137 getCommentDb.php
07:33:49.439 log.js:137 getCommentDb.php vid = ttqAEs5BeYw
07:33:49.440 log.js:137 get_ameba_youtube_list.php
07:33:49.440 log.js:137 get_ameba_youtube_list.php query_key = 森田健作 -知事
07:33:49.441 log.js:137 getCommentDb.php
07:33:49.441 log.js:137 getCommentDb.php vid = ttqAEs5BeYw
あとがき
少し手間ですが、このコードの要所要所にconsole.log(.....);を挿入しておくことが進行状況を把握するには必要な作業です。その時に、メッセージには、いつ、何をして、どこを通ったかを示しておく必要があります。また、区切り記号を使って見やすくする工夫が必要になります。
説明が不十分ですが、徐々に手を加えて行きたいと思います。