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

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

単純に文字を出力させるだけなのですが、JavaScriptを使用する人は確実に使用します。
処理中のデバック文を出力させる時によく利用します。

1.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;
	
</style>

2.HTMLの記述例

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

<div align="center">
ページ表示時にアラートダイヤログメッセージが表示されます。<br>
WindowsのChromeブラウザで閲覧の方は「F12」をクリック(Developer Tools)を表示し、<br>
「Console」をクリックするとconsole.logの出力文字が表示されてます。
</div>

3.アラート(alert)とコンソールログ(console.log)文字出力の記述

変数str1にアラートで表示させる文字、変数str2にコンソールログで出力させる文字を入れてます。

<script type="text/javascript">

str1="アラート文字を表示しました!";
str2="コンソールログ出力文字です。";

alert(str1);
console.log(str2);

</script>

 

alert文字を表示し、console.logに文字を出力するデモ

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