はじめに
今回は、ブラウザの開発者ツールで「JavaScript」のソース実行やデバッグを実施する方法を記載していきます。
この記事では「Chrome」ブラウザを例に実施方法を見ていきます。
開発者ツールの開き方
Chromeブラウザ上で「F12」キーを押すか、右上タブメニューの「デベロッパーツール」を押すことで開発者ツールを開くことができます。
開発者ツールの画面説明
Elemantsタブ
ブラウザ上のHTMLやCSSを参照することができます。 また、一時的に編集することも可能です。
Consoleタブ
JavaScript内に記載されているログや、実行時のエラー、警告などが表示されます。また、JavaScriptのコードを実行することも可能です。
Sourcesタブ
ブラウザ上のHTMLやCSS、JavaScriptのファイルが、ディレクトリ階層のような形で参照することができます。JavaScriptのソースコード上でブレークポイントを置くことで、デバッグ実行をすることが可能です。
JavaScriptの実行
実際にコンソールタブでJavaScriptを実行してみます。
Alertを出力してみる
コンソールにJavaScriptのコードを記載し、「Enter」を押します。上部にアラートが出てくることが確認できます。
alert('test')
特定のHTML要素のプロパティを取得する
document.getElementsByClassName('クラス名')
document.getElementById('id名')
document.getElementsByName('neme名');
デバッグ方法
ソース上で、確認したい箇所にブレークポイントを置いて画面を実行することで、ブレークポイントで実行内容を止めることができるデバッグ実行が可能となります。
参考
【ドキュメント】
Chrome DevTools | Chrome for Developers
最後に
開発者ツールを活用すると、JavaScriptのコードを効率的に実行・デバッグできます。特に、コンソールの活用やデバッガの利用は、開発スピードを向上させる重要なスキルです。ぜひ実践してみてください！
以上、ログになります。
これからも継続していきましょう！！
コメント