CDNで配信されているJavaScriptライブラリをブラウザのコンソールですぐに試す方法

はじめに

「このライブラリの最新版、あのバグ直ってるかな？」や「特定のバージョンでの挙動を確認したい」というとき、わざわざローカルにプロジェクトを作るのは面倒です。ブラウザの開発者ツール（Console）を使えば、CDN経由でライブラリを読み込み、その場ですぐにコードを実行できます。

手順

1. まず任意のWebページを開きます。検証対象のサイトがある場合はそのページを開き、特に決まっていない場合は Google のトップページなどシンプルなページがおすすめです。
2. 開発者ツールを開き、「Console」タブを選択します。
3. 以下のようなスクリプトをコピー＆ペーストして実行します。

const script = document.createElement('script'); 
script.src = 'https://example.com/lib.js'; // 検証したいライブラリを指定する
script.onload = () => {
  // 検証用のコードを記述する
};
document.head.appendChild(script);

具体的なサンプル：libphonenumber-js の挙動確認

日本の携帯電話番号（060から始まる番号）への対応状況を、libphonenumber-js の異なるバージョンで比較検証する例です。

v1.11.16 での実行例

このバージョンでは、060番号がまだ国内番号として正しくフォーマットされません。

const script = document.createElement('script');
script.src = 'https://unpkg.com/libphonenumber-js@1.11.16/bundle/libphonenumber-max.js';
script.onload = () => {
  const parsedPhoneNumber = libphonenumber.parsePhoneNumberFromString('06012341234', 'JP');
  console.log('v1.11.16 Result:', parsedPhoneNumber.formatNational());
};
document.head.appendChild(script);
//=> v1.11.16 Result: 6012341234

v1.11.17 での実行例

このバージョンから060番号に対応しており、正しくハイフンが付与された形式で取得できます。

const script = document.createElement('script');
script.src = 'https://unpkg.com/libphonenumber-js@1.11.17/bundle/libphonenumber-max.js';
script.onload = () => {
  const parsedPhoneNumber = libphonenumber.parsePhoneNumberFromString('06012341234', 'JP');
  console.log('v1.11.17 Result:', parsedPhoneNumber.formatNational());
};
document.head.appendChild(script);
//=> v1.11.17 Result: 060-1234-1234

環境

• Google Chrome 147.0.7727.101