投稿者: GotoAkiko

Chromeの開発者ツール、Web系の開発をしている方なら一度は触ったことがあると思います。

今回は、普通の使い方はもう知ってるよという人向けに、私が個人的に気に入っててちょっと便利な使い方を書いておきます。

①ブレークポイントを一時的に無効にする

サンプルスクリプトは下記です。

    const dog = {name: 'dog', age: 0}
    const monkey = {name: 'monkey', age: 1}
    const cat = {name: 'cat', age: 5}
    const animals = [dog, monkey, cat]
    animals.forEach(animal => {
      if(animal.name === 'monkey') {
        console.log('ウキー')
      }
    })

例えば、下記のような場所にブレークポイントを置いたとして

リロードのたびに実行されるのがなんかイヤだな…ってことがあると思います。

そういう時は、右クリックすると、次のようなメニューが出ますので

Disable breakpoint　を選択すると、Enableにするまでこのブレークポイントで止まりません。

私は結構これを使います。

なんで使うかっていうと、ページのリロードって弊社では例えばVue使ってるんですが、コードの更新ごとにリロード走って結構頻繁に起こるんですよね。そのたびにブレークポイントで止まってるとかが面倒だからです。

あとは普通にループの中で、ループの1回目はブレークしたいけど、後はもういいよ…という場合などに使います。

「ブレークポイント自体もう一度クリックしたら消えるじゃん」

という声も聞こえますが、そうすると、またコード直して同じところにブレークポイントを付けたい、という場合にちょっと手間が発生します。

ちょっとの手間、惜しんでいきましょう！！

②ブレークポイントに条件を設定する

ループの中の例えばループの10回目以降だけ発言する不具合がある、などの場合にポチポチステップ実行を押していませんか？

ブレークポイントに条件を設定することができます。

ブレークしたい場所を右クリックしてください。

「Add conditional breacpoint」を選択します。

animal の　age が 2より大きい時だけブレークするように設定します。

黄色いクエスチョンマークのブレークポイントができたらOKです。

これで、age > 2のcat の場合のみブレークするようになります。

③すべてのブレークポイントを一時的に無効にする

①で紹介したブレークポイントを一時的に無効にする、ですが、多くのブレークポイントがある場合に、いちいちDisableにしていくのは面倒だと思います。

そんな時に、一度に無効にできる方法があります。

下記の開発者ツールの右のほうにある電池のようなマークをクリックしてください。そうすると、ブレークポイントが一気に一時的に無効にできます。

また一気に有効にしたい場合は、同じマークをクリックすると、一気に有効になります。

後は、便利な使い方がもっとあると思いますが、公式サイトにも情報がいっぱいあるので、ぜひ見てみてください。

ブレークポイントでコードを一時停止する