4

質問

Javascriptを、Chrome,EdgeやFirefoxの開発ツールとVSCodeを使ってデバッグを行っています。
デバッグ中に変数をウォッチすると変数は文字列化されて表示されますが、米国式(MDY)に表示されるのが読み取りづらいです。

読み取りやすいYMDの並びで表示させる方法はありますか?

環境

Chrome 120.0.6099.217
VS Code 1.85.1


試したこと

Dateオブジェクト自身で文字列化しているのか調べてみるために以下のことを試してみました。

console.log(new Date(2023,1,15));

は、Wed Feb 15 2023 00:00:00 GMT+0900 (日本標準時)と米国式の並びで表示されます。
これは

new Date(2023,1,15).toString();

を実行した時と同じです。

toString()による文字列化が行われて表示されているのか調べるため、ためしに

Date.prototype.toString = Date.prototype.toISOString;
console.log(new Date(2023,1,15));  // Wed Feb 15 2023 00:00:00 GMT+0900 (日本標準時)
console.log(new Date(2023,1,15).toString()) ;// 2023-02-14T15:00:00.000Z
console.log(new Date(2023,1,15)[Symbol.toPrimitive]('string')); // Wed Feb 15 2023 00:00:00 GMT+0900 (日本標準時)

してみると、toString()なしではやはり米国式の文字列になり、デバッガのウォッチでも米国式のままでした。
toDateString,toGMTStringの変更なども試しましたが、prototypeの定義では影響しないようです。

toStringの挙動についての仕様はEMCAScriptに書かれているのが見つかりましたが、to**Stringを使わない文字列化については見つけられませんでした。


その他

デバッグプロセスとデバッガが通信するのにJSONが使われているかもしれないと思い、toISOStringを細工してみましたが、JSON化は変更できてもデバッガのウォッチは変更されませんでした。

Date.prototype.toISOString = Date.prototype.toLocaleTimeString;
JSON.stringify( {"D": new Date(2023,1,15)}) // {"D":"0:00:00"}

1 件の回答 1

1

Chrome開発ツールのカスタムフォーマッタを使うのはいかがでしょうか?

  1. Chrome開発ツールを開く
  2. 設定を開く
  3. コンソール - カスタムフォーマッタにチェックを入れ有効化する
    カスタムフォーマッタ
  4. ソース - スニペットから以下のスニペットを登録する
function formatDate(date) {
    const year = date.getFullYear();
    const month = ('0' + (date.getMonth())).slice(-2);
    const day = ('0' + date.getDate()).slice(-2);
    const hours = ('0' + date.getHours()).slice(-2);
    const minutes = ('0' + date.getMinutes()).slice(-2);
    const seconds = ('0' + date.getSeconds()).slice(-2);
    return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
}

// カスタムフォーマッタの定義
const dateFormatter = {
  header: function(obj) {
    if (obj instanceof Date) {
      return ['span', {style: 'color: blue'}, formatDate(obj)];
    }
    return null;
  },
  hasBody: function(obj) {
    return false;
  },
  body: function(obj) {
    return null;
  }
};

// カスタムフォーマッタをクリアしてから登録
window.devtoolsFormatters = [];
window.devtoolsFormatters.push(dateFormatter);
  1. 登録したスニペットを実行

こうすることで、以降のコンソールやウォッチでの日付型の書式をカスタマイズすることができます。
↓コンソール出力
画像の説明をここに入力

Chrome起動時にまずはスニペットを実行する手間はありますが、実現は可能かと。
Chrome起動時に自動実行したいのであれば、拡張機能などを使って上記スクリプトを実行するなどでいけそうな気はします(試してはいないです)

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。