VSCodeを用いてNext.jsで作ったサイトのデバッグをしたいが、対象ファイルへのアクセス方法が分からない

前提

Next.jsの勉強のため、参考書に沿ってブログサイトを作っています。
参考書の中にconsole.logを使ってデバッグを行う部分があり、その表示のやり方が分からず困っています。
デバッグの設定はでき、デバッガーも立ち上がったのですが、対象のファイルにアクセスする方法が分かりません。
正しい質問の方法も分からないレベルなので、意味が通るか分かりませんが質問させてください。

実現したいこと

VSCodeを用いてNext.jsで作成中のサイトのデバッグを行いたい。

該当のソースコード

ターミナルからアクセスしたいファイルの存在するディレクトリまではたどりつけましたが、対象ファイルを実行する手順が分かりません。
(多分根本的になにか勘違いをしているのだと思います)

VSCodeのターミナル画面

ディレクトリ: C:\linux_home\NextProj\blog\pages\blog Mode LastWriteTime Length Name ---- ------------- ------ ---- -a---- 2022/10/11 13:54 0 index.js -a---- 2022/10/11 14:00 424 schedule.js  ←★このファイルを実行して結果を見たい★ PS C:\linux_home\NextProj\blog\pages\blog>

JavaScript

//schedule.js :デバッグしたい(console.logの表示を確認したい)ファイル // 記事本体部分export default function Schedule() { return <h1>記事のタイトル</h1>;} // 非同期処理export async function getStaticProps() { console.log("処理1"); console.log("処理2"); console.log("処理3"); return { props: {}, };}

試したこと

open schedule.js →実行できなかった
cd schedule.js →ディレクトリではないので当然できなかった

補足情報(FW/ツールのバージョンなど)

Vscode 1.71.2

コメントを投稿

0 コメント