- テキストスタイルの変更: console.logの出力にスタイルを適用するためには、"%c"というプレースホルダを使用します。このプレースホルダに続けてCSSスタイルを指定します。例えば、以下のコードでは、背景色を黄色にし、テキストの色を赤に変更しています。
console.log('%cHello, world!', 'background: yellow; color: red;');- フォーマット指定: console.logには、文字列内で変数の値を表示するためのフォーマット指定子も使用できます。例えば、以下のコードでは、文字列と数値の値をフォーマットして出力しています。
const name = 'John';
const age = 25;
console.log('My name is %s and I am %d years old.', name, age);- オブジェクトの表示: console.logを使用してオブジェクトを出力する場合、オブジェクトの内容を展開して表示することもできます。例えば、以下のコードでは、オブジェクトのプロパティを展開して表示しています。
const person = {
name: 'John',
age: 25,
profession: 'Developer'
};
console.log('Person:', person);- グループ化: console.logの出力をグループ化して整理することもできます。console.groupとconsole.groupEndを使用して、関連する情報をグループ化します。例えば、以下のコードでは、"User Details"というグループ内にユーザーの情報を表示しています。
console.group('User Details');
console.log('Name: John');
console.log('Age: 25');
console.log('Email: [email protected]');
console.groupEnd();これらはconsole.logのCSSスタイリングと使用例の一部です。開発中にデバッグ情報を効果的に表示するために、これらのテクニックを活用してください。