2020年から始めるJS入門3 デバッグFront End Programming

2020年から始めるJS入門3 デバッグ

JS 2020年から始めるJS入門

今日紹介するのは、デバックの方法です。プログラミングは小さな単純の処理の積み重ねです。うまくプログラミングを書くコツは、処理の一個一個ちゃんと動いているか確認することを怠らないこと。これを怠ると、どこでバグが発生しているか特定が難しくなります。デバッグができるようになることはプログラミングの基本なのでしっかりやり方を抑えておきましょう。

JSのデバッグのコマンド console.log()とは?

ブラウザの機能・開発者ツール上、どんな結果が出ているかを確認するのに便利な関数が console.log() です。昔は、alert() を使って結果を出力していましたが、今はこちらを使うのが一般的です。今回は Google Chrome の開発者ツールとセットでご紹介します。

console.log | MDN Web Docs

まずは、コードを書き基本の出力

以下のようにコードを書きます。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/index.js" defer></script>
</head>
<body>
</body>
</html>
</pre>

JS

let msg = 'Hello, World!';
console.log(msg);

こんな感じで出力されます。

js-debug01.jpg

 

まとめて出力

カンマ区切りで書くとまとめて出力可能です。

JS

let name = 'かみーゆ';
console.log(msg, name);

js-debug02.jpg

型ごとに出力

こんな書き方もできます。

JS

let num = 123456;
let flo = 3.14;
let url = "{https://ginneko-atelier.com}/";
let style = 'font-size:30px;background:#ff0033;';console.log('文字列の出力 : %s', name);
console.log('整数の出力 : %i', num);
console.log('浮動小数点数の出力 : %f', flo);
console.log('Linkの出力 : %o', url);
console.log('%cスタイルを指定して出力', style);

リンクはオブジェクトとして出力できます。

%s 文字列
%d or %i 整数
%f 浮動小数点数
%o オブジェクト
%c スタイル
%j JSON

js-debug03.jpg

console.teble() まとめて表として出力

通常オブジェクトをまとめて出力するときはこんな感じが一般的です。

const banana = { fluit: 'banana', price: 100 };
const apple = { fluit: 'apple', price: 150 };
const orange = { fluit: 'orange', price: 120 };console.log({ banana, apple, orange });

console.teble() を使うと変数を表にまとめて表示できるので違いがとてもわかりやすい。

console.table({ banana, apple, orange });

js-debug04.jpg

要素のDOMを詳しく調べるときはconsole.dir()

DOMの構造を調べたいときは console.dir() を使うと便利です。

HTML

<div id="test">
  <ul>
    <li>あああああ1</li>
    <li>あああああ2</li>
    <li>あああああ3</li>
  </ul>
</div>

JS

const elm = document.getElementById('test');
console.log(elm);
console.dir(elm);

js-debug05.jpg

console.count()で処理の回数を出力

何回繰り返しているかが分かります。
処理回数をカウントできます。

JS

for (i = 10; i > 0; i--) {
  console.count();
}

js-debug09.jpg

上級者向け:Chromeの開発者ツールを使いこなす

出力結果までは確認できるようになりました。

開発者ツールでconsole.logなしでデバッグみようと思います。

ブレークポイントを使う

ブレークポイントを設置したら、プログラムの実行中に任意の行で処理を止めることができます。

開発者ツールから Source のタブを開き、停止したい位置をクリックします。

すると右側のBreakpointsに指定した7行目がブレークポイントとして登録されます。

js-debug06.jpg

ブレークポイントは複数設置でき、同タブの中で右クリックすることにより個々もしくはまとめて削除も可能です。

js-debug07.jpg

スコープ内の変数の確認

scopeを確認すると、現在使用している変数名と値を一気に確認できます。
ブレークポイントを切り替えたら値が変わります。

js-debug08.jpg

watchを使って特定の変数を追いかける

Watchに変数名を登録しておくと、ブレークポイントごとに処理の変化などを確認できます。

js-debug10.jpg

 

まとめ

今回は大まかなデバッグの仕方についてまとめました。

もっとマニアックな使い方があるのですが、入門編ということでここまでにしておきます。
記事が増えてきたら、もう少し踏み込んだJSのデバッグ方法をまとめようと思います。

最後までお読みいただきありがとうございました。

参考リンク

https://qiita.com/nakajmg/items/0a27c6642268243c8eef
https://qiita.com/mtoyopet/items/7274761af5424cee342a
https://ics.media/entry/190517/

関連記事もあわせてお読みください

Read More Blogs

Web制作に関する人気の記事

セブ島・海外移住に関する人気の記事

キャリアアップ・ライフスタイルに関する人気の記事

管理人について

IT戦士:かみーゆ

私、フロントエンドエンジニアのかみーゆです。日本でフロントエンドを中心に約10年Web制作 →→→ セブ島に転職してエンジニア講師 →→→ オフショア開発担当者(イマココ)。13歳の頃から「好きなように生きて好きなように死ぬ」が人生のKPI。なので、「楽しいか」、「かっこいいか」でやることを判断・取捨択一しています。好きなものは肉とビール。

About Me