【jQueryが動かない】Chromeのデベロッパーツールで原因を見つける方法

「jQueryを記述したのに動かない！」と悩んでいないでしょうか。しかし、心配はご無用です。Chromeのデベロッパーツールを使えば、エラーの原因を短時間で見つけることができます。修正の仕方が分からなくて時間ばかり過ぎている……という方は、ぜひこのページを参考にしてみてください。

プロジェクト
マネージャー

特にjQueryを学習したばかりの初学者の場合、動かない問題に直面することが多いですよ。

システム
エンジニア

そうなんですね……。jQueryが動かないことは自分もよくあるので、これを機に原因解明力を身に付けます！

デベロッパーツールの概要とできること

デベロッパーツールとは、プログラムのエラーを見つけて修正するための開発者向けツールです。各ブラウザで用意されており、ChromeではChrome DevToolsというツールセットが利用可能です。

デベロッパーツールを使うと、以下のようなことを簡単に行うことができます。

• ・デザイン変更の検証
• ・サイトに反映されているプログラム（CSSやJavaScript/jQueryなど）の確認
• ・ワンクリックで、パソコン・タブレット・スマホでの表示の確認
• ・他サイトのソースコードの確認

Chromeのデベロッパーツールで原因を特定する方法

では、実際にChromeのデベロッパーツールを使って原因を特定していきましょう。以下の手順に従ってください。
 

1. ブラウザ上でキーボードの [F12] > [Console]をクリック

※ブラウザ上で右クリック > [検証] でも開きます。



すると、このようにエラー内容やエラーのある場所を示してくれます。

2. エラーの修正をして再確認

デベロッパーツールで示されていた箇所のソースを修正し、再度 [F12] を押し、デベロッパーツールで開きます。



ちゃんと反映され、エラーが消えていることが分かります。

プロジェクト
マネージャー

ちなみに、デベロッパーツールでは「どのように変更されるのか？」という検証のみ行うことができます。実際のソースコードには反映されないため注意してくださいね。

システム
エンジニア

分かりました、注意します！デベロッパーツールを使えばいろいろな検証もできそうなので、jQueryを数パターン試してみたいと思います。

デベロッパーツールを活用して業務効率を上げよう

今回は、jQueryが動かない場合にChromeのデベロッパーツールを使って原因を特定する方法を紹介していきました。デベロッパーツールを使うと、必要以上の時間をかけずにエラーを見つけ、修正につなげることができます。ぜひ業務でも活用してみてはいかがでしょうか。