自分用のメモ
Contents
ソースの準備
実行環境
- VS code：v1.62.3
- Node.js：v14.17.3
- React：v17.0.2
プロジェクトの作成
React Create Appで作成します。
デバッグの準備
.vscodeフォルダ配下に２ファイルを作成する
- VS codeとChromeブラウザを利用してデバッグ起動する設定ファイルです。
- 6行目でデバッグ起動時にサーバ起動（npm start）するようにしています。
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"preLaunchTask": "npm: start",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}",
"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack:///./*": "${webRoot}/src/*"
}
},
]
}- launch.jsonでデバッグ起動する前に実行されるnpmタスクです。
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "start",
"label": "npm: start",
"detail": "react-scripts start",
"group": {
"kind": "test",
"isDefault": true
},
"isBackground": true,
"problemMatcher": {
"owner": "custom",
"pattern": {
"regexp": "ˆ$"
},
"background": {
"activeOnStart": true,
"beginsPattern": "Compiling...",
"endsPattern": "Compiled .*"
}
}
}
]
}プロジェクト直下に.envファイルを作成する
- デバッグ起動と関係ないブラウザを起動しないための設定です。
BROWSER=noneデバッグの実行
- App.jsの５行目にブレークポイントを設定します。
- F5キーでデバッグ起動し、ブレークポイントで止まれば成功です。
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
あとがき
いつも忘れてしまうデバッグ設定を再度試してみました。
コメントを残す