macoblog

「ゲーム × プログラミング」で生きていく

アプリ検索ツール(β版)を公開

デベロッパーツールでjQueryが使えない時はこれ【コピペOK】

JavaScript プログラミング

jQueryを読み込んでいないサイトで、デベロッパーツールからjQueryを試してみたい、どうすればいい?こんな疑問に答えます。

コピペしてすぐに使えるコードを紹介しておりますので、独学中の方やjavascript初心者の方は参考にどうぞ。難しいことは一切していません。

デベロッパーツールからjQueryを試そうとするとエラーが!原因はそもそもjQueryを読み込んでいないからです。

シンプルなサイトや動きのないサイトに多く見られます。

阿部寛さんのホームページが良い例ですね、読み込まれていませんのでjQueryが全く反応しません。

阿部寛ホームページ

他人のサイトなので編集することもできません、どうですればいいでしょうか?

デベロッパーツールでこれをコピペして実行すればOK

デベロッパーツールを開きコンソールに下記をコピペし実行しましょう

document.body.appendChild((function(){
  var jq = document.createElement("script");
  jq.src = '//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js';
  return jq;
})());

jQueryが使えるようになると思います。

もうちょっと詳しく!という方のために、せっかくなので阿部寛さんのサイトを例にもう少し詳しくみていきましょう。

jQueryが読み込まれていない場合

コンソールからdivにCSSを適用しようとすると。

jQueryが読み込まれていない状態でテスト

jQueryが読み込まれていないためエラーが出る

本来であれば左側で選択されている「div」要素内の「★★★最新情報★★★」の文字色が変わるとことですが、

jQueryがそもそも読み込まれていないため、色は変わらず代わりにエラーを吐いているのがわかります。

前述したコードを実行してから試してみる

前述したコードを実行してから、処理を記述すると・・・

前述したコードを実行してから処理を記述すると

jqueryを使用することができる

jQueryが使用できるようになっていることがわかります、簡単ですね!

おまけ:jQueryが使えるか確認(チェック)する方法【コピペOK】

下記コードをデベロッパーツールでコピペして実行してください。

if(window.jQuery){
	console.log('jQuery使用可');
}else {
	console.log('jQuery使用不可');
}

読み込ませるコードと組み合わせれば、あれば読み込まず、なければ読み込ませるなんて事も可能です。

終わりに

これでどのサイトでもjQueryをテストできるようになりましたね。

コンソールから実行しているだけなので、当然ファイルに影響もありません。

たくさん処理を書いて試してjQueryの理解を深めていきましょう!

以上になります