🌊

ChromeのDevToolでデバッグしよう

2022/08/11に公開

Chrome

tech

まずは簡単なReact Appを作ります
ボタンをたくさん作り上げて、そしてボタンをクリックすればそのボタン自体を削除します

App.jsです

src/App.js

import { useState } from "react";
import GoalList from "./GoalList";
import "./styles.css";

export default function App() {
	const [goals, setGoals] = useState([
		{ text: "Play games", id: "g1" },
		{ text: "Shopping", id: "g2" },
		{ text: "Dummy", id: "g3" },
		{ text: "Radio", id: "g4" }
	]);

	function deleteItemHandler(id) {
		const deleted = goals.filter((item) => item.id !== id);
		setGoals(deleted);
	}

	return (
	<div className="App">
		<GoalList items={goals} onDeleteItem={deleteItemHandler} />
	</div>
	);
}

コンポーネントのGoalListです

src/GoalList.js

import Goal from "./Goal";

function GoalList(props) {
	return (
		<ul>
			{props.items.map((item) => (
			<Goal 
				key={item.id}
				id={item.id} 
				text={item.text} 
				onDelete={props.onDeleteItem} />
			))}
		</ul>
	);
}

export default GoalList;

コンポーネントのGoalです

Goal.js

function Goal(props) {
	function clickHandler() {
		props.onDelete(props.id);
	}

	return (
		<li>
			<button onClick={clickHandler}>
			{props.text}
			</button>
		</li>
	);
}

export default Goal;

styles.cssです

styles.css

.App {
	font-family: sans-serif;
	text-align: center;
}

ul {
	display: flex;
	gap: 10px;
}

ul li {
	list-style: none;
}

これでサンプルアプリが完了です
早速デバッグしましょう

Chromeのデバッグツールを開けて、「Sources」というタブを開けます

cmd + Pでクイックオープンウィンドウを開け、「Goal.js」で検索します
「Goal.js[sm]」でEnterを打ちます

これでGoal.jsのソースコードが見れるようになりました

行3のところにBreakpointを入れます

そして、画面のボタンを一つクリックします
これでデバッグモードに入りました

こちらのStep into next functionアイコンをクリックします

コードが次の場所に移ります、App.jsの行14に移します

マウスが行13の(id)をhover、現在のidの値は表示されました
（先ほどのGoal.jsからApp.jsへパスした値です）

App.jsの行14はfilter()なので
とても長いです
（JSのコードとしては一行ですが、実際にたくさんのコードが発生します）

なので次のコードの行き先を素早く見るためには
Step over next functionアイコンを2回クリックします

これでFunctionが終わりました
この時点でもう一度マウスが行13の(id)をhoverします
今回はFunctionが完了状態なので、idの値の正確性は高いです

他にはみたいのはないなので、
Resume script exceptionアイコンをクリックして、デバッグモードから退出します

React Developer Tools

Chrome extensionをインストールします

インストール後、chromeをrestartします

Dev ToolsにComponentsとProfilerが出ました

Componentsをクリックします
Component Treeが見れました

任意のComponentをクリックしたら、詳細が出ました
rendered byは上層Componentを提示します

rendered byのGoalListをクリックします

該当Componentにジャンプ出来ました

Appをクリックします、hooksの部分に注目します
これがuseState()のhooksです、いわゆるState Hookです

Dev ToolsからHooksのアイテムを削除すると、すぐに画面に反映されます

React Developer Tools

Discussion