JavaScriptのデバッグで使えるalert文字を表示し、console.logに文字を出力する方法をご紹介します。
単純に文字を出力させるだけなのですが、JavaScriptを使用する人は確実に使用します。
処理中のデバック文を出力させる時によく利用します。
Contents
ディスプレイ広告
alert文字を表示し、console.logに文字を出力するCSSの記述
※本記事に関して、CSSの記述は重要では無いので必要に応じて書き換えてください。
<style> body{ font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",Arial,sans-serif; padding: 0; margin: 0; overflow-x: hidden; line-height: 1.8em; } h1{ font-size:18px; line-height:1.6em; text-align:center; font-weight:normal; padding:10px 0; } </style>
alert文字を表示し、console.logに文字を出力するHTMLの記述
※本記事に関して、HTMLの記述も重要では無いので必要に応じて書き換えてください。
<h1>alert文字を表示し、console.logに文字を出力</h1> <div align="center"> ページ表示時にアラートダイヤログメッセージが表示されます。<br> WindowsのChromeブラウザで閲覧の方は「F12」をクリック(Developer Tools)を表示し、<br> 「Console」をクリックするとconsole.logの出力文字が表示されてます。 </div>
アラート(alert)文字とコンソールログ(console.log)に文字を出力するJavaScriptの記述
※変数str1にアラートで表示させる文字、変数str2にコンソールログで出力させる文字を入れてます。
<script type="text/javascript"> str1="アラート文字を表示しました!"; str2="コンソールログ出力文字です。"; alert(str1); console.log(str2); </script>
alert文字を表示し、console.logに文字を出力するデモページ
alert文字を表示し、console.logに文字を出力するデモ
※流用される場合は自己責任でお願いします。