0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【Javascript】Consoleやdebuggerを使った開発支援

Posted at

他にも競合記事が多そうですが!
社内で JavaScript を書いている時に、どのようにデバッグしたら良いかという質問があり記事にしました!

以下、サンプルは Vue にて表示しているが、基本的に JS 系列ならすべて同じ。


【Console 画面】
「F12」や右上の「... > その他のツール > デベロッパーツール」画面にて
「Console」タブを選択した際に閲覧できる場所。
ブラウザのターミナル。

image.png

Show console drawer を ON にすると、いつでも友達になれて便利。
image.png

⭕ Console.log

一番有名なやつ
引数内の要素を Console 画面へ表示してくれます。

ただ単に表示

console.log('hello')

image.png

配列やオブジェクトも

引数は、配列でもオブジェクトでも何でも入る。
また複数突っ込むこともできる。

const numArray = [1, 2, 3, 4, 5]
const map = new Map()
map.set('key', 'vaue')

console.log(numArray, map)

Console 画面では、 が表示され、折り畳みができる。死ぬほど便利。

image.png

JSON化するものあり

たまに表示されないオブジェクトは、JSON化して表示すると良い。
この形式なら他へのコピーも簡単。

const numArray = [1, 2, 3, 4, 5]
console.log(JSON.stringify(numArray, null, 2))

image.png

※ちなみに、要素を右クリックすると表示されるメニューから、JSON取得ができたりもする。
適材適所。

image.png

console.dir という親戚

親戚に console.dir というものがあり、オプションや隠された関数も含めて全部表示する機能があります。
でも chrome だとそこまで差が無いかも...
log で困った時に使ってみると良い。

const numArray = [1, 2, 3, 4, 5]

console.log(numArray)
console.dir(numArray)

image.png

console.trace という神

他にも warn や info など、ログに使えそうな親戚が多いですが、こいつは必要!
実行された場所のスタックトレースが表示されます!
デバッグ時に、どこから呼ばれたかを確認するのに便利...

console.trace('test')

image.png

console.log のデコレーション

:mag: 「console.log CSS 装飾」

console.table

引数の要素をテーブルにして表示してくれるすごいやつ。
忘れられがちだが、俯瞰したいときにとても便利。

const users = [
  { id: 10, name: 'Aさん', age: 20 },
  { id: 20, name: 'Bさん', age: 33 },
  { id: 30, name: 'Cさん', age: 26 },
]

console.table(users)

テーブルのおまけに、下に console.log 時の表示もしてくれる。

image.png

console.time

なんと時間も測れます。
new Date().getTime() - date.getTime() とかやってませんか??

引数の文字がタイマーを区別する文字になります。

  • console.time() : タイマースタート
  • console.timeLog() : 今の時間を表示
  • console.timeEnd() : タイマーを止めて、今の時間を表示
console.time('a_timer')
setTimeout(() => {
  console.timeLog('a_timer')

  setTimeout(() => {
    console.timeEnd('a_timer')
  }, 1000)
}, 1000)

image.png

(setTimeoutはそんなに正確ではないのです!)

console.count

最後に!回数もカウントできるんですよ~。
ループ処理などで、何回通ったかを確認する際に良いと思います。

  • console.count() : カウントして、今のカウントを表示
  • console.countReset() : カウントをクリアする
for (let i = 0; i < 10; i++) {
  console.count('a_count')
}
console.countReset('a_count')
console.count('a_count')

image.png

⭕ debugger

これはJSにおいて、ブレークポイントを追加するすごいやつです。
dev 画面を使い慣れている人だと、Source 画面で付与する人もいると思いますが、消し忘れたり以外と不便なんですよね...

image.png

この機能は、止めたい箇所に debugger と書くだけで機能します。

let test = ''

for (let i = 0; i < 5; i++) {
  debugger
  test += ''
}

console.log(test)

image.png

が次の debugger、ブレークポイントまで実行する。
が、次の一行を実行する、です。(ステップ実行)

基本的には怪しい箇所に debugger を書いて、ステップ実行して、変数の状態や処理の順番を確認します。

例えば上の例で、 を2回押すとこうなります。

image.png

ちゃんと変数の状態が分かるんですね...つよつよ機能なのでぜひお忘れなく!

他にも良い点があって、この debugger、「dev tools」を表示していない場合は無視されます。
消し忘れても安心!(ダメ)

おわりに

とりあえず console.logdebugger が使えたら困りません!!!

Vue でデバッグするなら Vue.js devtools 一択。

0
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?