駆け出しエンジニアさん向けの情報を発信していきます。itLinkedInPocketCopyJavaScriptをデバッグする際に、よく使う機能のみに重点を当てて説明します。その他、色々なデバッグ方法やツール・機能がありますが、当ブログは駆け出しエンジニアさん向けであるため、ご了承ください。サンプル用のHTMLとJavaScriptを用意しますね。"さん、こんにちわ!";}これをChromeで開いて、デバッグツールを開きましょう。「Elements」では、HTMLの表示される内容とHTMLとを比較しながら見ることが出来ます。HTMLの部分をクリックすると、左側の表示部分がハイライトされます。このマークのところをクリックすると、逆にブラウザ表示の表を選択できるようになって、対応するHTMLの部分がハイライトされます。この時、キャプチャをみてわかったと思いますが、適用されているスタイルが表示されたりと、色々な機能がありますが、省略しますね笑HTMLを直に修正することも出来、修正したらすぐにブラウザ表示側に反映されます。「Sources」でJavaScriptのデバッグJavaScriptのデバッグをする際は、「Sources」タブを使います。最初は、「ブレークポイント」「スコープ」「ウォッチ」から始めましょう。「ブレークポイント」まずは「ブレークポイント」ですね。対象のソースを開いたら、行数の部分をクリックしてみてください。色が変わりましたね?これでブレークポイントが設定されました。何が起きるかというと、処理がそこで一時停止します。JavaScriptの処理を止めることで、その時点の変数の値などを見ることが可能になるのです。その際に使うのが、「スコープ」「ウォッチ」です。「スコープ」ブレークポイントで処理を一時停止した際に、その時に使用できる変数を確認できるのが「スコープ」です。今使える変数の中身(値)が見えるのがわかりますか??ちなみに、こんなところにも表示されていますので、こちらを見る方が楽かもですね。このスコープ、値を変更することも出来るのですが、応用編になるので、説明は省略しますね笑。必要あれば、試してみてくださいね。想定と違う値が入っていた場合は、次の「ウォッチ」を使って、調べていきましょう。前述しました「スコープ」は、現在の変数の中身を参照する機能です。「ウォッチ」は、自由に処理を書くことで、その時になんでも取得することが出来ます。こんな感じに、document.getElementById("name1")と書いてみてください。※右上の「+」から追加できます。itLinkedInPocketCopyオブジェクト?オブジェクト指向とは?(Ruby)Nextこれからどうするか...Prev関連記事プログラムの基礎を簡単に考えるこんにちは、にゅ〜ぶるです。...クラスの継承・オーバーライドとは?(Ruby)こんにちは、にゅ〜ぶるです。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。最近のコメント表示できるコメントはありません。