.NET開発者のためのブログメディア

【jQueryが動かない】Chromeのデベロッパーツールで原因を見つける方法
2020年03月27日
「jQueryを記述したのに動かない!」と悩んでいないでしょうか。しかし、心配はご無用です。Chromeのデベロッパーツールを使えば、エラーの原因を短時間で見つけることができます。修正の仕方が分からなくて時間ばかり過ぎている……という方は、ぜひこのページを参考にしてみてください。
- PM
- 特にjQueryを学習したばかりの初学者の場合、動かない問題に直面することが多いですよ。
- SE
- そうなんですね……。jQueryが動かないことは自分もよくあるので、これを機に原因解明力を身に付けます!
目次
デベロッパーツールの概要とできること
デベロッパーツールとは、プログラムのエラーを見つけて修正するための開発者向けツールです。各ブラウザで用意されており、ChromeではChrome DevToolsというツールセットが利用可能です。
デベロッパーツールを使うと、以下のようなことを簡単に行うことができます。
- ・デザイン変更の検証
- ・サイトに反映されているプログラム(CSSやJavaScript/jQueryなど)の確認
- ・ワンクリックで、パソコン・タブレット・スマホでの表示の確認
- ・他サイトのソースコードの確認
Chromeのデベロッパーツールで原因を特定する方法
では、実際にChromeのデベロッパーツールを使って原因を特定していきましょう。以下の手順に従ってください。
- ブラウザ上でキーボードの [F12] > [Console]をクリック
- エラーの修正をして再確認
※ブラウザ上で右クリック > [検証] でも開きます。
すると、このようにエラー内容やエラーのある場所を示してくれます。
デベロッパーツールで示されていた箇所のソースを修正し、再度 [F12] を押し、デベロッパーツールで開きます。
ちゃんと反映され、エラーが消えていることが分かります。
- PM
- ちなみに、デベロッパーツールでは「どのように変更されるのか?」という検証のみ行うことができます。実際のソースコードには反映されないため注意してくださいね。
- SE
- 分かりました、注意します!デベロッパーツールを使えばいろいろな検証もできそうなので、jQueryを数パターン試してみたいと思います。
デベロッパーツールを活用して業務効率を上げよう
今回は、jQueryが動かない場合にChromeのデベロッパーツールを使って原因を特定する方法を紹介していきました。デベロッパーツールを使うと、必要以上の時間をかけずにエラーを見つけ、修正につなげることができます。ぜひ業務でも活用してみてはいかがでしょうか。