メモログ

Load jQuery library in the Chrome developer console

スクリプト内の DOM 操作で jQuery を使っているけれど、処理がスクリプト内で完結していて、Global には jQuery をロードさせていないという場合がある。あると思う。

そういった場合、例えばそのスクリプトに新しい実装を入れたいけど jQuery での DOM 操作が自分の期待通りに行えるかを Chrome のデベロッパーツールでちょっと確認したいみたいな時に少し困る。大して困らない気もするけど、少し手間ではある。

そんな時に jQuery 用のスニペットを用意しておくと jQuery を手軽にロードすることができるので役に立つ。スニペットの作成、保存、実行のページに書かれている内容そのままだけど、以下のようなコードをスニペットとして作成して、右下の Run ボタンを押すだけである。

let script = document.createElement("script");
script.src = "https://code.jquery.com/jquery-3.2.1.min.js";
script.crossOrigin = "anonymous";
script.integrity = "sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=";
document.head.appendChild(script);

同じ方法で jQuery に限らず、一時的にページにライブラリをロードさせることができるので、まあまあ応用の利くハックかなと思う。スニペットの存在そのものを忘れる可能性はある。

というメモ。

私について

Yutaka Yamaguchi
東京在住。TypeScript, Node.js, Reactなどフロンエンドが主力。Perlも書く。SwiftやRubyも過去には使ってた。過去のTOEIC 860くらい。