.net column

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

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

2020年03月27日

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

PM
特にjQueryを学習したばかりの初学者の場合、動かない問題に直面することが多いですよ。
SE
そうなんですね……。jQueryが動かないことは自分もよくあるので、これを機に原因解明力を身に付けます!

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

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

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

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

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

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

  1. ブラウザ上でキーボードの [F12] > [Console]をクリック
  2. ※ブラウザ上で右クリック > [検証] でも開きます。

    検証

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

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

    再確認

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

PM
ちなみに、デベロッパーツールでは「どのように変更されるのか?」という検証のみ行うことができます。実際のソースコードには反映されないため注意してくださいね。
SE
分かりました、注意します!デベロッパーツールを使えばいろいろな検証もできそうなので、jQueryを数パターン試してみたいと思います。

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

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


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

求人一覧

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)