DevTools の 5つのTips

こんにちは、株式会社スマートショッピングでエンジニアをしているrobjamです。

デベロッパーツール（DevTools）には便利な機能が盛り沢山です。今回はその中から一部の機能をご紹介したいと思います。今回は主にChromeのDevToolsを使いますが、他のbrowserでも同じような機能が提供されております。

簡単な例文をローカルで試せるようにrepoを準備しました。
こちらをcloneしてセットアップいただければと思います。

---

1. タブの並べ替え

タブの並び替えは、キラーフィチャーではないかもしれませんが、ご存知の方が少ないかもと思って共有します。タブの並び替えができます！動画をみていただければイメージがつかめると思います。

---

2. xhrリクエストの再送信

たまにプログラム的にリクエストを送信したい時があります。例えば、体験のrepoにあるcounterのエンドポイントを20回送信して、画面が20回更新されたことを確認したいです。DevToolsの「network」タブにある要求を右クリックして、「copy ▸ Copy as fetch」をクリックするとクリップボードに入ります。

ブラウザーのfetch以外のフォーマットがありますが、DevToolsのConsoleのまま使うと便利です！
Consoleに貼り付けてreturnを押したら実行されます。20回試したい時は Promise.map を使って並行に送信できます。

Promise.all(Array.from({ length: 20 }).map((_, index) => {
  return fetch("http://localhost:3001/counter", {
    "headers": {
      "accept": "*/*",
    },
    // snip...
    "referrer": "http://localhost:5173/",
    "method": "POST",
    "mode": "cors",
    "credentials": "omit"
  })
  .then(()=> {
    console.log('completed')
  })
}))

Promise.mapを使うと20回のリクエストが瞬時に行われ、手動操作に比べて効率的です！

---

3. Consoleからデータのコピー

copy()の関数を使うと、Javascriptでデータを変更した後にそれをクリップボードに入れてくれます。
これがすごい便利で、ゲームチェンジャーな機能に思えます。
サンプル：

copy(Array.from({length: 10}).map((_, index) => index + 1))

Consoleに貼り付けをしてみたらいい感じにコピーしました。

さらに要素の値を変更してコピーもできます：

// get all anchor elements as an array
const elements = Array.from(document.querySelectorAll('a').values())
// transform to tab delimited list
const tabDelimitedList = elements.map((element, index) => `${element.href}\t${element.innerText}`)
// copy to clipboard as TSV!
copy(tabDelimitedList.join('\n'))

ちょっと調整が必要そうですが、便利だと思います！

修正版

const elements = Array.from(document.querySelectorAll('a').values())
// transform to tab delimited list
const tabDelimitedList = elements.map((element, index) => {
  // some elements call javascript without an href
  // ignore them for now
  if(!element.href.startsWith('http')) {
    return undefined
  }
  return `${element.href}\t${element.innerText}`
}).filter(line => !!line)
// copy to clipboard as TSV!
copy(tabDelimitedList.join('\n'))

---

4. XHRのコールスタックからブレークポイント設定できる

個人的にDevToolsの中でもっとも重要な機能はnetworkのタブであるように思います。
Web App内の通信が全て可視化されるので、トラブルシューティング時にとても助かります。
何が送られれたか、いつ送られれたか、時間どれぐらいかかったか、どのコードが呼ばれたか、など必要な情報の全てがここで見ることができます。
普段は url, method, query params, bodyを見るだけでも十分なのですが、「どこから呼ばれた？？」を見たい時は、Initiatorの行を見るのが良いです。

まずはDevTools開いて、counterのxhrのリクエストを送信してみます。

devで実施された場合は、ソースを参照するためのソースマップが自動的に含まれますし、コールスタックもシンプルに表示されます。
フレームワークや、minifyされたコードなどが含まれる読みにくいかもしれませんが、やり方はほぼ一緒です。

counter.ts:9 をクリックすると、そのソースコードが表示されます。
ソースコードの9行目の左をクリックすると、下記の画面キャプチャーのようにbreakpointを設定することができます。

breakpointを設定後に再度実行するとbreakpointで処理を止めることができます

---

5. breakpoint内で変数の値の変更

breakpointで処理を停止した状態でUIのトラブルシューティングや、リクエストのレスポンスを変更することがでます。

例えば、右のサイドパネルにrのcounterの属性の値がありますが、それをダブルクリックすると、値を9000に変更することができます。

変更したら、f8 のキー、または実行アイコンを押すと、以下のように画面で確認することができます。

---

ボーナス. Consoleウィンドウが下にもある

esc のボタン押すと Console と what's new のタブが画面下に表示されます。他のタブを操作しながらConsoleを見たい場合に便利です。

引き続きに他のtipsを共有したいと思います！