はじめに
普段のフロントエンド・バックエンド開発で、
「ちょっと確認したい」「APIレスポンスを軽く見たい」「URLパラメータを解析したい」
という場面、よくありますよね。
こういった場面で、開発者ツールのコンソールのみで色々対応できるとカッコいいと思います。
本記事では、開発で役に立つ小技を紹介します。
0. 開発者ツールへのペースト許可
ブラウザを開いて、F12や右クリックで開発者ツールを開きます。
その後、consoleに下記を入力。
allow pasting
これで開発者ツールのコンソールへのペーストが許可されます。
※一部のChromeバージョンでは allow pasting は不要
1. ログの保持
開発者ツールの設定を開く
“Preserve log upon navigation”（日本語: ナビゲーション間でログを保持）を有効にする。
これで、ページ遷移しても、遷移元ページで出力されたログが消えなくなります。
ちなみにNetworkの方も保持できます。
こちらはAPIリクエストなどが見れます。
ログファイルを保存
右クリック Save as... を選択すると、consoleの内容を.logファイルとして保存することができます。
2. URLやリクエストパラメータの解析
URLエンコードされた文字列をデコード
decodeURIComponent("https%3A%2F%2Fexample.com%2Fapi%3Fq%3Dtest%26lang%3Dja")
// => "https://example.com/api?q=test&lang=ja"
※ちなみにdecodeURI という関数もあるのですが、こちらは '/', '@' などの記号のデコードを行いません。
逆にURLエンコードしたいとき
encodeURIComponent('test=テスト&name=ほげ');
base64 デコード
atob('44GT44KT44Gr44Gh44Gv'); // デコード
base64 エンコード
btoa('こんにちは');
補足：
base64は画像データなどのインライン変換にも使われます。
data:image/png;base64,xxxx の形式に使われるあれです。
3. URL・Cookie・Storageをオブジェクト化
現在のURLパラメータをオブジェクト化
Object.fromEntries(new URLSearchParams(location.search));
例：
?user=jack&id=3 → { user: "jack", id: "3" }
Cookieをオブジェクト化
Object.fromEntries(document.cookie.split('; ').map(v => v.split('=')));
LocalStorageをオブジェクト化(JSON文字列がふくまれる場合はパース)
Object.fromEntries(
Object.entries(localStorage).map(([k, v]) => {
try {
return [k, JSON.parse(v)];
} catch {
return [k, v];
}
})
);
sessionStorageも同様
補足：
これらをcopy()で囲って使用すれば、そのままクリップボードにコピーできます。
4. DOM操作・UI確認
Elementsで選択中の要素を取得
$0 // ← Elementsパネルで選択中のDOM要素
例：
$0.style.border = '2px solid red';
特定クラスの要素を一覧取得
$$('.btn').forEach(el => console.log(el.textContent));
要素をクリップボードにコピー
copy($0.outerHTML);
※ 正直右クリックでやった方が早い
5. ページデザインを一時変更して確認
ページ全体をグレースケール化
document.body.style.filter = 'grayscale(100%)';
document.body.style. まで入力すると、指定できる属性をサジェストされるので、色々試してみてください。
(bodyだけでなく、ヘッダーとかをいじりたければ document.head)
背景色を変更
document.body.style.backgroundColor = "red";
特定のIDの要素のみ変更したい場合
このようにgetElementByIdでDOMを取得して指定する。
document.getElementById("input").style.backgroundColor = "red"
しかし、googleのようなシャドウDOM構造のページでは、この方法でDOMを取得できないため、項4で説明した方法を使い、書き換える。
$0.style.backgroundColor = 'red';
※Elementsパネルで直接書き換えることも可能
style変更を戻す
$0.style = '';
6. データ表示
配列をテーブル形式で確認
項3で紹介したものなどを確認する際に見やすくできる。
console.table([{ id: 1, name: 'A', num:100 }, { id: 2, name: 'B', num: 200 }]);
特定の列のみテーブル形式で出力
console.table(data, ['id', 'name']);
まとめ
| カテゴリ | 小技 | コマンド例 |
|---|---|---|
| ログ管理 | ページ遷移してもログを保持 | Preserve log upon navigation |
| 〃 | ログをファイル出力 | 右クリック → Save as... |
| URL解析 | URLエンコード／デコード |
decodeURIComponent() / encodeURIComponent()
|
| 〃 | base64エンコード／デコード |
btoa() / atob()
|
| データ整形 | クエリ文字列をオブジェクト化 | Object.fromEntries(new URLSearchParams(...)) |
| 〃 | Cookieをオブジェクト化 | Object.fromEntries(document.cookie.split('; ').map(...)) |
| 〃 | LocalStorageをオブジェクト化 | Object.fromEntries(Object.entries(localStorage)... ) |
| DOM操作 | Elementsで選択中要素を取得 | $0 |
| 〃 | 特定クラスの一覧出力 | $$('.btn').forEach(...) |
| 〃 | 要素のコピー | copy($0.outerHTML) |
| データ表示 | テーブル形式で出力 | console.table(data) |
さいごに
開発者ツールのコンソールは、単なる「ログ出力の場」ではなく、データ解析・デバッグ・UI調整 までこなせる万能ツールです。
開発者ツールを使いこなせるカッコいいエンジニアになりたいですね。