【デバッグで使える】alert文字を表示し、console.logに文字を出力

JavaScriptのデバッグで使えるalert文字を表示し、console.logに文字を出力する方法をご紹介します。
単純に文字を出力させるだけなのですが、JavaScriptを使用する人は確実に使用します。
処理中のデバック文を出力させる時によく利用します。

alert文字を表示し、console.logに文字を出力するCSSの記述

※本記事に関して、CSSの記述は重要では無いので必要に応じて書き換えてください。

<style>
body{
	font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",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に文字を出力するデモ

　
※流用される場合は自己責任でお願いします。
　タグ内のGoogleアナリティクスタグは流用しないで下さい。

ディスプレイ広告

ディスプレイ広告