一番簡単なJavaScriptのデバッグ環境とデバッグ方法について

前提

・最新版のChromeを使う

今回のゴールについて

本当にちょっとした実験をJavaScriptでしたくなることがある。
ちょっとした実験というのは、例えばJavaScriptで構文があってるかの確認とか、ES2019の新しいメソッドの実験とか。
以前Visual Studio Codeで実験する方法を書いたけど、今回はもっと簡単に実験したい場合を想定してます。
なので、今回の実験環境では一つ制限があります。
・import exportは使えない。
上記できないけど、エディタとChromだけあれば色々実験できます。いじくれます。

仮にimport exportを使った実験もしたいというのであれば、前回の記事を参考にしてください。
Visual Studio CodeでJavaScriptのプログラムをデバッグするために書いたものですが、vagrantでローカルサーバ立てる方法を書いてます。

Visual Studio CodeでJavaScriptのプログラムをデバッグする環境を準備する


それ以外にも、Chromeの設定を変更してもいけるようですね。
https://dev.classmethod.jp/etc/chrome-localfile-security/
ちょっとやってみたけど、うまくいかなかったのでスルーしましたが。。

ところで、Visual Studio Codeで実験したい場合は、以下の準備が必要となります。
①Visual Studio Codeを用意する。
②Visual Studio Codeの拡張機能のDebugger for Chromeが必要
③Visual Studio Codeにlaunch.jsonを設定しないといけない
④CORSエラー対策のためにローカルサーバ立てないといけない(それかブラウザでfileアクセス可に設定しないといけない)

一度作ってしまえばそれ以降は楽なんだけど、もうほんとそれすらもめんどくさいという場合はChromeのデベロッパーツールを使えばいいやんと思ってます。

最低限デバッグで実現したいこと
・ブレークポイントの設定
・watchの設定
・簡単に変数の中身がわかる
・変数の中身を変えたりできる
たぶんこれは僕が普段VisualStudioを使っているからなのだろう。

今回の記事は【最低限デバッグで実現したいこと】も含めてChromeのデベロッパーツールで実現する方法について書いてます。

index.htmlを作る。

実際のところファイル名は何でもよい。
今回はindex.htmlにした。

visual studio codeを使って開くと中身は空。
htmlと打ち込むと、スニペットでhtml5という候補が出るのでそれを選択。

scriptタグをbody以下に追加する。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
<script>
    let hellow = 'hello world'
    console.log(hellow)
    debugger
</script>
</html>

ブレークポイントを設定してデバッグ実行

上記したソースコードでScriptタグの中がJavaScriptのコードです。
この中にdebuggerというのを記述しておく。
これがブレークポイントみたいな役割となります。

では、Chromeでindex.htmlを開きましょう。
開くと何も表示されてないページが出てきます。
その状態でＦ12を押すとChromeデベロッパー・ツールが立ち上がります。
基本的にJavaScriptのデバッグはこのデベロッパーツールを使います。

Console部分でhello worldが出ていると思います。
これは特に説明の必要もないと思いますが、console.log(hellow)で実行した内容となります。
デベロッパーツールを開いた状態でF5を押すと、debuggerの部分で止まったと思います。
ちなみに、エディタで編集してF5でリロードすると直ちに変更が反映されます。

他にもブレークポイントの設定方法があります。
ブレークポイントを設定したい位置をクリックします。
今回だと12行目のちょうど12の位置でクリックするとブレークポイントの位置がハイライトされます。
この方法であれば、わざわざソースコード上でdebuggerと書かずに済むし、デバッグしながら違う個所でブレークポイントを設定したりできます。

Visual Studioを普段使っていると、非常に混乱するポイントが処理の再開方法が微妙に違うところです。

Visual StuioであればF5で再実行してくれますが、Chromeのデベロッパーツールでは、F8が再開となります。
ただ、これも別に覚える必要はなくて、以下に各種ボタンが用意されてます。

簡単に変数の中身を知る方法

ツールチップで表示させる

上記状態で、例えばhellowの上にマウスカーソルを持っていくと、ツールチップが表示されます。
‘hello world’が格納されているよというのがツールチップで表示されます。

console.logを使う

もちろん、既にconsole.log(“”)も使ってますが、これもよく使います。
これ以外にもconsole.log以外にも、console.table()とか使ったりしますが、これはまた別の機会に記事にしたいなと思います。

Consoleを使う

console.logとはまた違った方法で変数の内容を確認する方法。
私はこれを一番よく使います。

使い方としては、知りたい変数名を>に打ち込めばOKです。
Consoleを一番よく使う理由は、インテリセンスがなかなかにイケてるからです。
今回の例でいえば、hと打ち込んだ瞬間に候補としてhellowが出てきます。

あと、helloを打ち込んだ後に.（ドット）を打てば、そこから予測されるメソッドなりを候補として出してくれます。

これが地味に一番助かってます。
というのも、型がよくわからん！どんなメソッド使えるかわからん！
というのがよく遭遇するからです。あれ？わしだけかな？

変数の中身を変えたりできる

以下のようなコードを用意します。

<script>
    let val = 5
    debugger
    console.log(val)
</script>

F5でリロードするとdebuggerで停まります。
そのままF8を押して通りすぎると、コンソールにval = 5と表示されます。
もう一度F5でリロードします。
その状態で、コンソール上(上記したConsoleを使うと同じところ)でval = 8 と打つと、valの中身が変更されてコンソールへの出力も8に変わります。
このように、コンソール上で変数を変更したりできます。

watchに追加する

先ほどのコードのままで、debuggerで停止させます。
その状態で、valを選択して右クリックしてコンテキストメニューから
Add selected text to watches
に追加すると、Watchに追加されます。

どこまで実験できるのか

ES2019はいけるようだ

ところで、今回僕が実験したかったのが、ES2019で追加された新機能でした。
ざっくりどんな動きをするのかというのを理解したくて、デバッグしながら中身を確認したいなと思ったのが今回の記事を書こうと思った動機です。

前提で書いた通り、Chromeの最新版を使うので、ES2019も対応しているはず。
で、実際にやってみると対応していました。
※Google Chrome 73以降であれば、すべてのES2019の機能は使えるようです。
つまり、すべてデバッグして動作を確認していくことができます。

scriptタグ内を以下のように編集しました。

    let flatTest = [[1, 2], 3, 4].flat();
    console.log(flatTest)
    debugger

このflat()ですが、ES2019の機能になります。

ES2020もいけるようだ

最新バージョンのChromeだと、対応しているようだ。
今回は以下で実験してみる。
Optional Chaining（?演算子）やNullish coalescing Operator（??演算子）

<script>
    console.log(null?.toString())
    console.log(null ?? 'test')
    debugger
</script>

これc#のと同じ使い方だろうと仮定してやってみた。ほぼ一緒だった。
違いといえば、null?.toString()だとundefinedが帰ってきたので、c#だとnullになるなと。
もちろん、
null.toString()
だと

Uncaught TypeError: Cannot read property 'toString' of null
    at eval (eval at <anonymous> (index.html:4), <anonymous>:1:6)
    at index.html:14

というエラーがでます。

とまあ、ES2020の機能も実験できることがわかった。

JavaScriptJavaScript

Posted by takumioda