HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM console.clear()メソッドの使い方を徹底解説！コンソールをクリアする方法

HTML DOMのconsole.clear()メソッドは、ブラウザの開発者コンソールに表示された内容をすべて消去するためのメソッドです。このメソッドを実行すると、コンソール上の以前の出力がすべてクリアされ、「Console was cleared（コンソールはクリアされました）」というメッセージが表示されます。

console.clear()メソッドは、Chrome、Firefox、Edge、Safariなど、主要なすべてのブラウザで完全にサポートされています。

構文

console.clear()メソッドの構文は以下のとおりです。引数は不要で、非常にシンプルに使えます。

console.clear()

使用例

ここでは、HTML DOMのconsole.clear()メソッドを使った具体的なサンプルコードを紹介します。

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript console.clear() メソッド</h1>
<p>キーボードのF12キーを押すと、コンソールのメッセージを確認できます</p>
<script>
    console.log("テキストがコンソールに出力されました！");
</script>
<p>下のボタンをクリックするとコンソールがクリアされます</p>
<button onclick="clearConsole()">クリア</button>
<script>
    function clearConsole() {
        console.clear();
    }
</script>
</body>
</html>

実行結果

このコードを実行すると、まずconsole.log()によってコンソールにメッセージが出力されます。

コンソールの表示：

「テキストがコンソールに出力されました！」というメッセージが確認できます。

「クリア」ボタンをクリックした後：

ボタンをクリックすると、コンソールの内容がすべて消去され、「Console was cleared」というメッセージのみが表示されます。

コードの解説

上記の例では、以下のような処理を行っています。

1. コンソールへのメッセージ出力

まず、console.log()メソッドを使って、コンソールにメッセージを出力しています。

console.log("テキストがコンソールに出力されました！");

2. クリア用ボタンの作成

次に、クリックするとclearConsole()関数を実行する「クリア」ボタンを作成しています。

<button onclick="clearConsole()">クリア</button>

3. clearConsole()関数の定義

clearConsole()関数内では、consoleオブジェクトに対してclear()メソッドを呼び出しています。これにより、コンソールの内容がすべてクリアされ、「Console was cleared」というメッセージが表示されます。

function clearConsole() {
    console.clear();
}

まとめ

console.clear()メソッドを使えば、デバッグ作業中にコンソールを簡単にリセットでき、必要なログだけを見やすく確認できます。開発時のログ整理やデバッグ効率の向上にぜひ活用してみてください。

  1. HTML DOMのconsole.groupEnd()メソッドとは？使い方とサンプルコードを徹底解説

    HTML DOMのconsole.groupEnd()メソッドは、コンソール上で表示されるメッセージグループの「終了」を示すために使用されるメソッドです。このメソッドを呼び出すことで、現在開いているメッセージグループから抜け出し、以降の出力はグループの外側に表示されるようになります。構文console.groupEnd()メソッドの構文は以下の通りです。console.groupEnd()引数は不要で、非常にシンプルに使えます。また、開いているメッセージグループが存在しない状態で呼び出しても、エラーにはならない点も覚えておきましょう。サンプルコードそれでは、console.groupEnd()

  2. HTML DOM console.groupCollapsed()メソッドの使い方をわかりやすく解説

    HTML DOMのconsole.groupCollapsed()メソッドは、折りたたまれた（collapsed）状態のメッセージグループの開始を指定するためのメソッドです。このメソッドを呼び出した後にコンソールへ出力したメッセージは、すべて折りたたまれたグループ内に表示されます。構文console.groupCollapsed()メソッドの構文は以下のとおりです。console.groupCollapsed(label)引数のlabelには、グループに表示するラベル名を指定します。ラベルは省略可能です。サンプルコードここで、console.groupCollapsed()メソッドの具体的な使