Inspect Element（検証ツール）でできる7つの遊び心のあるテクニック

コーディングに不慣れな人が、うっかり「検証（Inspect Element）」を開いてしまうと、複雑なコードの羅列に戸惑ってしまいがちです。しかし、落ち着いてコードを眺めてみれば、使い方さえわかれば、実用的な操作から遊び心のあるものまで、さまざまなことができる強力なツールであることに気づくでしょう。

この記事では、ブラウザの開発者ツール（DevTools）とInspect Elementを使って楽しめる7つのことを紹介します。

Inspect Elementとは？

Inspect Elementは、ブラウザが提供する開発者ツールの一つで、任意のWebページのソースコードを表示し、一時的に変更できる機能です。開発者やデザイナーは、このツールを使ってあらゆるサイトのフロントエンドを確認・修正できます。

コードを変更すると、ブラウザはリアルタイムでページを更新します。ただし、変更はそのセッション中のみ有効で、自分のデバイス上でしか反映されません。ページを離れると、すべての変更は自動的に元に戻ります。

1. 画像や動画をダウンロードする

通常、Web上の画像は右クリックして保存すれば簡単にダウンロードできます。しかし、すべてのサイトでそれが許可されているわけではありません。そんなときに役立つのがInspect Elementです。

メディアファイルをダウンロードするには、対象のファイルを右クリックして「検証」を選択します。<div>タグを展開すると、src属性からファイルのソースURLを確認できます。そのリンクをコピーして新しいタブで開き、右クリックして「名前を付けて保存」を選べばダウンロード完了です。

2. 見出しやテキストを変更して友達を驚かせる

ゼロから偽物の画像を作る必要はありません。DevToolsを使えば、Webページ上のテキストを書き換えて、友達へのいたずらが簡単にできます。

偽のページを作るには、有名サイトのページを開き、タイトルを右クリックして「検証」を選択してパネルを開きます。ハイライトされたコードのその他（⋮）アイコンをクリックし、「HTMLとして編集」を選択します。あとはタイトルを自分の捏造見出しに置き換えるだけです。

同様に、抜粋文、日付、著者名など他のテキストも変更できます。画像を差し替える場合は、同じ手順で画像ソースを削除し、Googleで関連画像を探して、その画像アドレスをソースに貼り付けましょう。

これで手間をかけずに友達を驚かせられます。ただし、変更は一時的なものなので、リンクではなくDevToolsパネルを閉じた状態のスクリーンショットを送るようにしてください。

3. Webページの色やフォントを変更する

Inspect Elementのもう一つの便利な技は、任意のWebページの色やフォントを変更することです。色を変えたい要素を右クリックして「検証」を選択し、「スタイル」タブでcolorやbackground-colorを見つけて、16進数のカラーコードを入力します。同様に、フォントサイズやフォントの種類もスタイルタブから変更できます。

このテクニックを使えば、どんなサイトでも見た目を変えて読みやすくできます。たとえば、任意のサイトにダークモードを作ったり、フォントサイズを大きくして視認性を高めたり、邪魔な要素を削除して快適に閲覧したりすることが可能です。

4. 非表示になったパスワードを表示する

Webサイトでパスワードがアスタリスクで隠されている場合、ページのコードを少しいじって表示させることができます。隠されたパスワードを右クリックしてDevToolsを開き、inputタグ内のtype属性を「password」から「text」に変更して、画面の空白部分をクリックします。これでパスワードが表示されます。

この技は、パスワードを忘れてしまったけれどパスワードマネージャーに保存している場合に特に便利です。Webページから直接パスワードを確認して思い出すことができます。

5. サイトのモバイル版をPCで表示する

スマホでPC版サイトを表示する方法は広く知られていますが、Inspect Elementを使えば逆に、PCでモバイル版を表示することもできます。DevToolsを開き、「デバイスツールバーを切り替え」ボタン（右上から2番目）をクリックするだけです。

さらに、ユーザーエージェントを切り替えることで、さまざまな環境向けのサイト表示を確認できます。開発者ツールの左上にあるその他（⋮）アイコンをクリックし、「ネットワーク条件」を選択します。「User Agent」セクションの「ブラウザのデフォルトを使用」のチェックを外し、ドロップダウンメニューから別のユーザーエージェントを選びましょう。

6. Webサイトから色を抽出する

サードパーティ製のカラーピッカー拡張機能をインストールしなくても、Inspect Elementだけでお気に入りの色を抽出できます。ページから色を取得するには、Inspect Elementを開き、「スタイル」タブでcolorまたはbackgroundを探します。次に、色の横にある小さな四角いボックスをクリックすると、カラーピッカーが起動します。

あとはページ上の好きな場所をクリックして色を抽出し、「スタイル」タブからHEXコードをコピーします。RGBやHSLA形式のコードが必要な場合は、矢印ボタンで切り替えて確認できます。

将来デザインなどに使いたくなりそうな素敵な色をサイトで見つけたら、Inspect Elementでコードを控えておくと便利です。

7. 拡張機能なしでスクリーンショットを撮る

DevToolsは、余計なものが写り込まないクリーンで鮮明なスクリーンショットを撮ることもできます。撮影するには、DevToolsを開き、その他（⋮）アイコンをクリックして「コマンドを実行」を選択します。検索ボックスに「screenshot」と入力すると、4種類のスクリーンショット撮影オプションが表示されます。

範囲指定のスクリーンショットでは、ウィンドウ内の特定の領域をドラッグで選択でき、ブラウザがPNGファイルとして保存します。

フルサイズのスクリーンショットでは、画面に収まらない部分を含むページ全体の画像が保存されます。ノードのスクリーンショットは特定の要素だけをキャプチャします。そして通常のスクリーンショットは、画面に表示されている範囲をそのまま保存します。

まとめ：Inspect Elementの隠れた技をマスターしよう

ここで紹介したのは、Inspect Elementでできるほんの一部の技にすぎません。DevToolsには、他にも数え切れないほどの便利な機能が備わっています。

パワーユーザーになって友達を感心させたいなら、DevToolsのより深い隠し機能を学んでみるのがおすすめです。