Chrome 拡張機能でコンソールの［Object ］の内容を表示する方法　

Google Chromeの拡張機能などを制作していると多用する［console］画面ですが、基本文字しか表示できないので、オブジェクトから取得できる値をすべて確認したい場合の手順について備忘録的に投稿しておきます。

JSON形式で出力する

Chrome 拡張機能の場合、コンソールに何かの出力する場合、次のような JavaScript コードで可能です。

chrome.contextMenus.onClicked.addListener(async (info, tab) => {

  console.log("Sample info" + info);

});

しかし、変数がオブジェクトの場合には、次のような形式で出力されるケースがあります。

オブジェクトのプロパティ名が分かっている場合には、こんな感じで出力できます。

chrome.contextMenus.onClicked.addListener(async (info, tab) => {

  console.log("Sample info.linkUrl" + info.linkUrl);

});

しかし、すべてのプロパティの値を確認したい場合や、プロパティ名が分からない場合もあります。

そんな場合には、”JSON.stringify” を利用してJSON形式で確認ができました。

chrome.contextMenus.onClicked.addListener(async (info, tab) => {

  console.log("Sample info" + info);
  console.log("sample info(JSON)" + JSON.stringify(info, null, 2));

});

実行すると、こんな感じで表示可能なすべてのプロパティと名前がコンソールに表示されます。

まとめ

今回は、短い内容ですがChromeの［コンソール］画面に、オブジェクト変数のプロパティを表示したい場合の手順について書きました。

Chrome拡張機能のコンソール画面に［Object object］と表示されてしまう人の参考になれば幸いです。

スポンサーリンク

最後までご覧いただきありがとうございます。