HTMLとJavaScriptのデバッグ
小さな例とコンソールでセレクター、スタイル、実行時の問題を調べます。
手順
- スターターテンプレートから始めるか、サンプルプロジェクトを読み込みます。
- HTML構造、CSSスタイル、JavaScriptの動作を編集します。
- 実行（Ctrl/Cmd + Enter）でsandboxプレビューを更新します。
- Consoleパネルでlog、warn、errorを確認します。
- レスポンシブコントロールで一般的な幅のレイアウトを確認します。
- 整形、コピー、またはindex.htmlとしてダウンロードします。
例
HTML
<button id="demo">Hello</button>CSS
#demo { padding: 12px; }JavaScript
// Broken: document.getElementById("missing").textContent = "OK";
const button = document.getElementById("demo");
if (button) button.textContent = "OK";missingというIDの要素は存在しないためエラーになります。demoを使ってください。構文チェックではこの実行時エラーは検出できません。
ヒント
プレビュー用のHTML、CSS、JavaScriptの基本実行はブラウザ内でローカルに行われます。