React（Next.js）の環境でGoogle Chromeの開発者ツールでデバッグする方法を紹介します。
やる事
今回は、Google ChromeのSource(ソース)タブからブレークポイントを貼ってデバッグをして、サーバーに送るリクエストパラメーターを変更したいと思います。
なお、Next.jsのプロジェクトはセットアップ済みのものとして進めます。
実行環境と検証コード
実行環境
あまり関係ないですが、今回は以下の環境で実装・検証を行います。
- react : 18.2.0
- next : 14.2.15
- typescript : 5.3.2
検証コード
src/app/page.tsx
"use client";
import { postText } from "@/api/postText";
import { useState } from "react";
export default function Home() {
const [text, setText] = useState("");
const onClickButton = () => {
postText(text);
setText("");
};
return (
<div>
<input value={text} onChange={(e) => setText(e.target.value)} size={20} />
<button onClick={onClickButton}>送信</button>
</div>
);
}今回は、サンプルなのでpage.tsxをクライアントコンポーネントにして実装します。
src/api/postText.ts
"use server";
export const postText = (text: string) => {
console.log({ text });
};関数名をpost…としていますが、クライアントから送られてきたテキストをログで表示します。
動作確認
- まずは、
npm run devで、プロジェクトを起動します。 - Chromeで「
http://localhost:3000/」のパスを叩くと、以下の画面が表示されるかと思います。
3. 次にChrome上で「F12」を押して、開発者ツールを表示させます。
4. 下記のキャプチャにある順番通りに操作していきます。
- ソース(Source)タブをクリック
localhost:3000/_N_E/src/app/page.tsxのファイルを開きます。- サーバーアクションの関数
postText(text)に、ブレークポイントを貼ります。
5. 画面に戻り、入力項目に何らかの文字を入れて「送信」ボタンをクリックします。そうすると、ブレークポイントで処理が止まるはずです。（私は適当に「あいうえお」と入力します。）
6. 下記キャプチャのように、開発者ツール上にある、「範囲」のアコーディオン内にある「クロージャー(HOME)」を開きます。
7. すると、「①」にあるようにtext: あいうえお と画面から入力した文字列があるかと思うので、これを別の文字列に変更します。（私は適当に「かきくけこ」と入力します。入力を終えたら、下記キャプチャの左上にある「②」をクリックして処理を進めます。
8. 最後に、ターミナルに戻ってログを確認してみると、画面で入力した文字列ではなく、開発者ツールで入力した文字列が表示されているかと思います。
以上、開発者(デベロッパー)ツールでデバッグする方法でした。