以下の流れでご説明いたします。
大まかなデバッグ方法
詳細なデバッグ方法(HTMLとCSS)
詳細なデバッグ方法(JavaScript)
1. 大まかなデバッグ方法
こちらのプレビュー画面から大まかなデバッグができます。
例えばcssファイルにこのようなコードを追加すると、、
h1 {
color: yellow;
}
リロードなしで瞬時に変更が確認できます🎉
2. 詳細なデバッグ方法(HTMLとCSS)
「新しいタブで開く」をクリックします。
このように別のタブで結果が表示されます。
ブラウザ上でDevToolsを開くと、このようにHTMLとCSSのデバッグができます🎉
Note☝️
上記の例はGoogle Chromeを使用しています。
3. 詳細なデバッグ方法(JavaScript)
問題画面に戻り、jsファイルに標準出力する以下のようなコードを追加します。
console.log("Hello there");
「新しいタブで開く」をクリックします。
新しいタブで、もう一度DevToolsを開きます。
今度はConsoleタブを開きます。
先ほど標準出力したメッセージ内容が確認できます。
Note☝️
「新しいタブで開く」でタブを開いている状態で回答のコードを変更した場合、出力結果タブの方をリロードしたら変更が反映されます。
右側のリンクをクリックします。
すると、ソースコードに移動できます。
このようにBreak Pointを追加するとブラウザ上でデバッグできます🎉
以上です、お疲れ様でした!