jQuery コンソール|console.log()の使い方

どうもかわうそです!

jQuery コンソール|console.log()の使い方 』 を動画も交え解説します!

そもそもコンソールとは

まず、ブラウザにはコンソールという機能があります。”入出力装置”や”入出力画面”なんて言ったりしますが、意味が分からないですよね。

結論、変数やオブジェクト、文字列などなどを、console.log()によって確認できる場所ということです。

正直、めっちゃ使います!

変数の中身を確認したり、プログラムが意図した設計通りに動いているか調べたり、指定した要素が思った通りに取得できているかなど、使用頻度はとても多いです。

さっそくconsole.log()を使って、コンソール画面に出力してみましょう。

console.log()でコンソール画面に出力

jQueryを読み込んでいる以外は、何も書かれていないindex.htmlを用意しました。

scriptタグ内にはjQueryで

と記述しました。ではコンソール画面を確認してみましょう。

と、console.log()の中身 “かわうそです” が確認できましたね。

もちろん文字列ではなく、数字でもokです!

計算だってできます。

と出力されましたね。
文字列と数字で色を変えてくれるので、分かりやすいですね。

次は変数を出力してみましょう。

と、変数kawausoの中身 “かわうそです” が出力されました。

jQueryオブジェクトだって取得できます。
head要素のhtmlの情報を変数に格納して出力してみます。

head要素が持つhtml情報

を出力できましたね!

もちろん、変数を使わずに

この記述でもokです。

さらに、head要素自体を出力できたりもします。

ちょっと分かりにくいですが、動画のように情報が格納されていることが分かりますね。

このようにconsole.log()の中身に知りたい情報をぶち込むと、コンソール画面で確認ができちゃうんです!

続いて各ブラウザ、googlechrome、firefox、edge、Internet Explorerでのコンソール画面確認方法を紹介します。

コンソール画面の確認方法

google chrome

[timeline]
[tl label=’STEP.1′ title=’f12でデベロッパーツールを開く’][/tl]
[tl label=’STEP.2′ title=’consoleをクリック’][/tl]
[tl label=’STEP.3′ title=’コンソール画面が開く’][/tl]
[/timeline]

ショートカットキー
ctrl+shift+J

firefox

[timeline]
[tl label=’STEP.1′ title=’f12で開発者ツールを開を開く’][/tl]
[tl label=’STEP.2′ title=’コンソールをクリック’][/tl]
[tl label=’STEP.3′ title=’コンソール画面が開く’][/tl]
[/timeline]

ショートカットキー
ctrl+shift+K

edge

[timeline]
[tl label=’STEP.1′ title=’f12で開発者ツールを開を開く’][/tl]
[tl label=’STEP.2′ title=’コンソールをクリック’][/tl]
[tl label=’STEP.3′ title=’コンソール画面が開く’][/tl]
[/timeline]

ショートカットキー
ctrl+shift+J

Internet Explorer

[timeline]
[tl label=’STEP.1′ title=’f12で開発者ツールを開を開く’][/tl]
[tl label=’STEP.2′ title=’コンソールをクリック’][/tl]
[tl label=’STEP.3′ title=’コンソール画面が開く’][/tl]
[/timeline]

どのブラウザも基本はf12で開発者ツールを開き、コンソール画面を開くタブをクリックで統一されています。

エラーやアクセスログが表示される場合もありますので、console.log()だけの情報を見たい場合は、動画のように画面の絞り込みをかけると見やすくなります!

次はコンソール画面の使い方を説明します。

コンソール画面の使い方

今まではconsole.log()を使って、コンソール画面に出力をしていました。

今度はコンソール画面を直接操作して、コンソール画面に出力する方法をお伝えします。

ブラウザはgoogle chromeで説明しますね。
functionの中に書いたconsole.log()は消すかコメントアウトしておいてください。

これでコンソール画面に何も表示されないはずです。

コンソール画面に出力する

コンソール画面にフォーカスをすると、エディタのようにコードを入力できます!

console.log()を使って、出力してあげましょう。

コンソール画面で変数を出力してみる

今度は変数を使ってみましょう。

shift+Enter

で改行入力ができます。

コンソール画面でalertを実行してみる

alertも出せちゃいますね!

コンソール画面からhtmlを編集してみる

を書いて、bodyタグに文字を書いてみましょう。

どうやらコンソールからHTMLの情報も操作もできるみたいです!

すごいですねコンソール!

console.log()を使用したエラー特定やデバッグの方法は別の記事で解説したいと思います。

フォローする