ChromeやSafariといった主要ブラウザには「デベロッパーツール」というデバッグに使える機能があります。このデベロッパーツールを使って、一時的にブラウザ上からjQueryを読み込む方法をご紹介します。
デベロッパーツールって何？という方は、かなり古い記事ですが以前一通りの使い方を書きました。
1.デベロッパーツールとは何か
目次
デベロッパーツールのConsoleからjQueryを読み込む
Chromeのデベロッパーツールを使って説明します。
状態をConsoleに変更
デベロッパーツールを開き、状態を”Console”に変更します。
もしConsoleになっていない場合、右にある矢印をクリックし、Consoleを選択しましょう。
jQueryを読み込む
CDNとして提供されているjQueryを利用します。公式サイトのリリースを確認すると現在の最新は3.7.1なので、このバージョンを使います。
jQuery CDN
CDNは今回、Google Hosted Library を利用しました。
以下のコードをConsoleに貼り付けます。
var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
貼付け後、エンターで確定すると以下のようにコードが表示されました。Elementsからheadタグ内に追加されているのも確認できます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
jQueryを実行して確認
読み込んだら後は確認です。jQueryが正しく動くのか、実際に適当にメソッドを実行してみます。今回はh1タグ要素をhide(), show()メソッドを使って非表示・表示してみます。
hide() メソッドで要素を非表示に
以下のコードをconsole上で実行すると、h1タグが非表示になりました。
$('h1').hide();
show() メソッドで要素を表示させる
再びh1タグを表示させるために、以下のshow()メソッドを実行します。
$('h1').show();
これで正しくjQueryが動作しているのが確認できました。
Safariでも同様に実行可能
別のブラウザでも動くのか試しにSafariで確認したところ、Chrome同様にjQueryをブラウザ上から読み込んで実行できたことを確認しました。
他のCDNも読み込み可能
今回はjQueryを例に上げて紹介しましたが、他のCDNでも同様に確認できます。例えばリセットCSSを読み込んでみます。例としてModern CSS resetを使います。
<link rel="stylesheet" href="https://unpkg.com/modern-css-reset/dist/reset.min.css" />公式に紹介されている通り、CDNは上記に用意されているのでこれを使います。以下のコードをデベロッパーツールのConsole上に貼り付けてエンターで実行します。
var css = document.createElement('link');
css.href = "https://unpkg.com/modern-css-reset/dist/reset.min.css";
css.rel = "stylesheet";
css.type = "text/css";
document.head.appendChild(css);
実行後、h1タグのスタイルが変化するのがわかります。Elementsからh1タグを確認してみると、リセットCSSが適用されているのがわかりました。
デベロッパーツールで一時的に確認したい時に
以上、ブラウザのデベロッパーツールのConsoleを使って一時的にjQueryを読み込む方法のご紹介でした。
当然ですが、ソースコードに反映はしておらずブラウザ上だけのため、再読み込みすれば消えますし、ソースコードを確認しても反映していません。
「今だけjQueryを実行したい」
「jQueryで実装した箇所が正しく動いていないためデバッグしたい」
そのような目的として、デベロッパーツールから読み込むのに使うという方法となります。あまり使い道がないかもしれませんが、何かの時に知っておくと役に立つかもしれません。
実際にこれで、過去制作したクライアントから連絡があり、「ウェブサイトのある箇所が動いていない」と連絡があり、確認してみると混在コンテンツが原因でjQueryが動作していないということがありました。サーバーに接続しなくても、ブラウザ上から確認できるためアクセス情報を送ってもらったり接続する手間もありませんし、何より楽ですよね。
コメントを残す