![[Chrome]consoleで表示する文字列のスタイルを変更する[小技]](https://devio2023-media.developers.io/wp-content/uploads/2013/04/chrome.png)
[Chrome]consoleで表示する文字列のスタイルを変更する[小技]
コンソールのスタイルを変更
クライアント側のJavascriptでデバッグメッセージを出力させる場合、console.logを使用して表示します。 そのメッセージは開発/管理->Javascriptコンソールで出てくるウィンドウで確認することができます。 今回は、ここで表示するメッセージのスタイルを変更するライブラリを紹介します。
環境構築方法
今回使用した動作環境は以下のとおりです。
- OS : MacOS X 10.7.5
- ブラウザ : Chrome 26
log.jsを読み込んで使いましょう
コンソールにスタイルを適用させる方法は、ここにあるlog.jsをHTMLで読み込み、 log関数を使用して特定の記号で囲めばスタイルを適用させることができます。 log.jsをGithubから取得して、次のhtmlを作成しましょう。 このHTMLでは単にlog.jsとそれを使用するjsファイルを読ませるだけです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="log.js"></script>
<script type="text/javascript" src="foo.js"></script>
<title>hello</title>
</head>
<body>
hello
</body>
</html>
そして、log関数を使用するjsファイルは次のようになっています。
log('this is *italic*');
log('this word _bold_');
log('this word `code`');
log('this is red');
文字を「＊」で囲むと、イタリック、「_」で囲むと太字、「`」で囲むとcode形式になります。 また、色を任意で指定することもできます。
上記コードをconsoleで見ると、次のようになります。
ちなみに、Chrome以外で実行すると、ちゃんと表示されないので注意してください。
![[Transcribe] 動画内でしゃべった言葉をテキスト検索可能にする](https://images.ctfassets.net/ct0aopd36mqt/wp-thumbnail-cd051e80347b7e8a807fef242f24e718/ccaa2ddf9bcf8223013f2ee1cc04ed9a/amazon-transcribe)
![[Bun] JavaScriptでC言語のファイルを簡単に実行する](https://images.ctfassets.net/ct0aopd36mqt/wp-thumbnail-8c6d505db5519c426a9f992bfb37e1a0/753887f068b49792ca4f521aa8f565dd/eyecatch_bun_1200x630.png)
