未経験から転職

今更聞けないウェブ開発の基本!ウェブコンソールの使い方

こんにちは、とだ (cohki0305) です!

今回は、ウェブコンソールの基本的な使い方について紹介します。

ウェブコンソールは、Web エンジニアリングには必須ツールですので、

使い方がわからない とか、そもそもブラウザコンソールツールなにそれ??と思っている人は是非読んでいってください!

ウェブコンソールとは?

ウェブコンソールとは、Web で開発する際に利用するツールです。

ブラウザはサーバーから送られてきた HTML や CSS などのソースコード読み取って表示させています。

ウェブコンソールは簡単に言うとその HTML や CSS の中身をいじったり確認したりすることができるツールです。

百聞は一見にしかずなので、お見せするとこんな感じです。

これは twitter のページでウェブコンソールを開いたのですが、 HTML や CSS が記述されているのがわかると思います。

どうやって起動するのか

起動方法は簡単です。

Chrome の場合は、右クリックしてから「検証」を押してください。そうすれば上のようなコンソールを開くことができます。

HTML / CSS を確認・編集

HTML

ウェブ開発を行っていると、なぜか思ったように表示されていない場合が結構あります。
直接的に HTML を編集している場合は、わざわざコンソールで見る必要はないのですが、
Rails や PHP などでテンプレートをいじっている場合は自分が書いたコードがそのまま表示されているとは限りません。

もし自分が書いたとおりに表示されていない場合、ブラウザにちゃんとした HTML が返っているのかを確認しましょう。

HTML が表示されているのは、画像で言うところの赤い枠線内です。

HTML コードの上で右クリックすることで編集したりコピーすることもできますよ!

ただ、これだけコードがあると目当ての箇所が見つけるのが難しいですよね…

そういったときに使える機能があります!要素を選択して見る機能です。

コンソールの左上に以下のようなマークがあると思います。これをクリックします。

そうすると、以下のようにカーソルで見たい要素をクリックすることで該当する HTML を確認することができます。

CSS

次によく使うのが CSS の編集です!

画面の右側に表示されているのが CSS です。

これがすごく便利な点は気軽に CSS をここで編集できることです。

上の画像のように、CSS を編集することでその場で反映してくれます。

なのでちょっとした CSS の修正にめっちゃ便利です!

Javascript の実行

ウェブコンソールは HTML/CSS だけではなくて Javascript を実行することもできます。

いままでは、Element というタブを選択していました。
Javascript を実行するには Console というタブを選択してください。

画像の様に DOM 操作や Javascript のコードの実行が簡単にできます。

DOM 操作がうまくいかない場合や Javascript を手軽に実行したいときに利用すると便利ですよ

debugger の利用

またdebugger というコードを仕込んだ Javascript ファイルを
ウェブコンソール起動時に実行することで処理を一旦とめることができます。

たとえば、以下のようなコードにおいて b の値が期待したものではなかった場合などに使用できます。

b の値が期待と異なるということは、a の値が何かおかしいはずです。
この場合、a の値を見てみたいと思いますよね。

そのときに以下のようにコードを書き換えるとよいです。

このようにすることで、処理が debugger の位置で止まります。
止めることによって、ウェブコンソールでそこのコードを自由に実行できるようになるのです。

デバッグの際にめちゃくちゃ利用するものなので覚えておきましょう

console.log の利用

console.log もまた、debugger 同様にデバッグツールとしてよく用いられます。

以下のように、引数に値を入れておくことで、コンソールにその値を表示することができるのです。

debugger で処理を止めるほどではないが、値を確認しておきたいときによく使います。

最後に

以上がウェブコンソールの基本的な利用方法でした。
日頃の開発から利用することを意識すると良いと思います!

そして、ウェブコンソールはまだまだいろんな使い方ができるツールです。

使い方がわからなければ、デバッグや開発にかなり苦労すると思います。

今回紹介したのはあくまで基本なので、これらに慣れたら自分で調べて他の機能も使ってみましょう!

ABOUT ME
cohki0305
営業から転職し、たった6ヶ月でリードエンジニアになった最速の男。 その後半年でフリーランスとして独立し時給が4倍に。今は海外ノマドやりながら、週3フルリモート労働。 自分の経験を元に、未経験からエンジニアになる方法や業界のことを発信してます。
プログラマーになって年収1000万目指そう

学歴・職歴関係なく、数年間で年収 1000 万円を目指せる職業って何が思いつきますか??

僕はソフトウェアエンジニア(プログラマー)しか思いつかないです。

僕は実務一年でフリーランスになって年収1000万稼げるようになりましたが、別にこの業界なら普通です。学歴も職歴も関係ないです。

プログラマーを目指して稼ぎたい方は、僕が紹介している「プログラマーになるための最短ステップ 3」を是非読んでチャレンジしてください。

未経験からプログラマーになるための方法を知る