以下の流れでご説明いたします。

  1. 大まかなデバッグ方法

  2. 詳細なデバッグ方法(HTMLとCSS)

  3. 詳細なデバッグ方法(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を追加するとブラウザ上でデバッグできます🎉

以上です、お疲れ様でした!


回答が見つかりましたか?