<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>コンソール</title>
<link rel="stylesheet" text="text/css" href="JS.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="copy.js" defer></script>
</head>
<body>
<h1>console(コンソール)とは</h1>
<p>コンソールはブラウザの開発者ツールにあり、ウェブページ上では見えない
情報を確認できる。</p>
<h3>「console」API一覧</h3>
<table border=1>
<tr><th bgcolor='#a9a9a9'>メソッド名</th><th bgcolor='#a9a9a9'>内容</th></tr>
<tr><td><a href="#char">console.log()</a></td><td>任意の値を出力する。</td></tr>
<tr><td><a href="#char">console.error()</a></td><td>コンソールへエラーログレベルでメッセージを出力する。</td></tr>
<tr><td><a href="#char">console.info()</a></td><td>コンソールへ情報ログレベルでメッセージを出力する。</td></tr>
<tr><td><a href="#char">console.warn</a></td><td>コンソールへ警告ログレベルでメッセージを出力する。</td></tr>
<tr><td>console.clear()</td><td>コンソール画面をクリアにする。</td></tr>
<tr><td>console.debug()</td><td>コンソールへデバッグログレベルでメッセージを出力する。</td></tr>
<tr><td>console.group()</td><td>インデントを付けて出力することで階層構造を持たせる(groupEnd()で終了する)。</td></tr>
<tr><td>console.grounpCollapsed()</td><td>新たなインライングループを作成し、以降のすべての出力を別なレベルに字下げする。<br>console.group()とは異なり、グループが折り畳まれた状態で作られ、それを開くには展開ボタンを操作する必要がある(grougEnd()で終了する)。</td></tr>
<tr><td>console.time()</td><td>time()~timeEnd()までの間にある処理を計測する。</td></tr>
<tr><td>console.timeLog()</td><td>指定されたタイマーの値をコンソールへ出力する。</td></tr>
<tr><td>console.trance()</td><td>呼び出し元などを記録した実行過程を出力する。</td></tr>
<tr><td>console.count()</td><td>実行する度にカウントアップして回数を出力する。</td></tr>
<tr><td>console.countReset()</td><td>指定されたラベルのカウンターの値をリセットする。</td></tr>
<tr><td>console.table()</td><td>配列やオブジェクトなどの構造をテーブル表にして出力する。</td></tr>
<tr><td>console.dir()</td><td>オブジェクトが持つプロパティの一覧をリストで出力する。</td></tr>
<tr><td>console.dirxml()</td><td>指定されたオブジェクトをXML/HTML要素で表現したものを表示する。<br>表現できない場合は、JavaScriptオブジェクトビューを表示する。</td></tr>
</table>
<h2 id="char">コンソールにログを出力（ log() / error() / info() / warn() ）</h2>
<p>consoleオブジェクトで用意されているコンソールにログとして文字列を出力するメソッドは、</p>
<ul>
<li>console.log()</li>
<li>console.error()</li>
<li>console.info()</li>
<li>console.warn()</li>
</ul>
<p>の4つがある。</p>
<div class = "chr-str">
<p><span class = "white">#基本的な書式</span></p>
<p><span class = "red"> console</span>
<span class = "white">.</span>
<span class = "orange">log</span>
<span class = "white">(表示内容);</span></p>
<p><span class = "red"> console</span>
<span class = "white">.</span>
<span class = "orange">error</span>
<span class = "white">(表示内容);</span></p>
<p><span class = "red"> console</span>
<span class = "white">.</span>
<span class = "orange">info</span>
<span class = "white">(表示内容);</span></p>
<p><span class = "red"> console</span>
<span class = "white">.</span>
<span class = "orange">warn</span>
<span class = "white">(表示内容);</span></p>
</div>
<h4>例</h4>
<div>
<p>コード</p>
<pre><code>
const charset = 'Hello';
console.log(charset);
console.error(charset);
console.info(charset);
console.warn(charset);
</code></pre>
<p>動かしてみると、</p>
<img src ="スクリーンショット 2025-09-28 175431.png" alt ="moji">
</div>
</body>
