[{"data":1,"prerenderedAt":78},["ShallowReactive",2],{"content-doc:article:/articles/dev-tool-payload":3,"content-surroundings:article:/articles/dev-tool-payload":67},{"id":4,"title":5,"body":6,"date":51,"description":52,"extension":53,"kind":54,"meta":55,"navigation":56,"ogImage":57,"path":58,"seo":59,"sitemap":60,"stem":61,"tags":62,"updatedAt":57,"__hash__":66},"article/articles/dev-tool-payload.md","ペイロードを見る",{"type":7,"value":8,"toc":48},"minimark",[9,35,38,44],[10,11,12,13,16,26,27,34],"p",{},"コードベースが大きい機能のデバッグをしていていると、バグがフロントとバックのどちらにあるのかを素早く判断したくなる。",[14,15],"br",{},[17,18,22],"code",{"className":19,"language":20,"style":21},"language-python shiki shiki-themes github-light","python","",[23,24,25],"span",{},"print"," や ",[17,28,31],{"className":29,"language":30,"style":21},"language-javascript shiki shiki-themes github-light","javascript",[23,32,33],{},"console.log"," のようなログだと局所的な情報だけになる。また、コードは設計や処理フローであって、実際に入ってくる値そのものは見えない。「ここにどんな値が入るかな？」を想像しながら推測する必要がある。",[10,36,37],{},"ブラウザのネットワークタブであれば、1つの通信に対するペイロードとレスポンスが確認できる。値そのものとパラメータ名がセットで表示されるのでわかりやすい。",[10,39,40,41,43],{},"なので、めちゃくちゃ使うようになった。",[14,42],{},"\nデベロッパーツール、もっと使ったほうがいい機能たくさんありそう",[45,46,47],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":21,"searchDepth":49,"depth":49,"links":50},2,[],"2026-02-01T15:00:00.000Z","開発者ツールのネットワークタブって便利だなって話","md","tech",{},true,null,"/articles/dev-tool-payload",{"title":5,"description":52},{"loc":58},"articles/dev-tool-payload",[63,64,65],"browser","payload","debug","OCjgFg3H_GA4w2hP3Bjz3bU38C7KX9pTZ0qVEpra_rM",[68,73],{"title":69,"path":70,"stem":71,"date":72,"children":-1},"🔥Honoにはまってる","/articles/hono","articles/hono","2026-02-06T00:00:00.000Z",{"title":74,"path":75,"stem":76,"date":77,"children":-1},"開発環境現状確認 2026","/articles/dev-env-2026","articles/dev-env-2026","2026-01-18T00:00:00.000Z",1772952405473]