Element Inspector のトリック: 知っておくべき 8 つのハック! 🛠️

ブラウザの要素インスペクタは開発者専用のツールのように思えるかもしれませんが、プログラミングについて何も知らなくても、実際にはかなりクールな機能を実現できます。 🚀

1 . 画像をダウンロード

おそらく、Web サイトから画像をダウンロードする必要があるでしょう。右クリックして「画像を保存」しようとすると、オプションがグレー表示になっているか、「画像を保存」ボタンが表示されません。場合によっては、ファイル全体ではなく、画像のサムネイルのみをダウンロードできることがあります。 🤔 どうしたの？

開発者は、この「画像を保存」ボタンを意図的に無効にしたり、この方法で画像をダウンロードできない Web フレームワークを使用したりすることが多々あります。しかし、要素インスペクタには便利な解決策があります。 3 つの簡単な手順で、Web サイトからあらゆる画像リソースをフルサイズで取得できます。 📸

ステップ1

しますか 右クリック ページ上の任意の場所をクリックし、「要素を検査」または「検査」を選択します。ブラウザ内のインスペクタに特定のキーボード ショートカットを使用することもできます。 F12 ほとんどのブラウザで動作します およびオペレーティング システム。このデモでは Firefox を使用していますが、手順は同じです。 🖱️

ステップ2

要素インスペクター ウィンドウ内で、「ネットワーク」タブをクリックします。ネットワーク タブには、サブメニューの 1 つとして「画像」があります。 「画像」をクリックします。 🖼️

次にページを再読み込みすると、すべての画像リソースが「画像」タブに表示されます。使用 アドレスバーの横にある更新ボタン ブラウザから、または Ctrl+R を押します。 🔄

ステップ3

これで完了です。画像ライブラリ全体がリストに読み込まれます。リストは動的に更新されるため、Web サイトにアップロードされる画像が増えると、ここにも表示されます。 🖼️✨

ファイルの上にマウスを置くと、プレビューと寸法が表示されます。ダブルクリックすると新しいタブでファイルが開き、右クリック メニューを使用して保存できます。 💾

2 . ビデオをダウンロード

画像アセットと同様に、ウェブサイトによっては許可されない場合もあります 放電 ビデオを直接再生します。ただし、要素インスペクター内で読み込むことでダウンロードできます。インスペクターに読み込まれたら、ファイル名をダブルクリックして新しいタブで開きます。 🎥

ステップ1

Abre la ventana del inspector de elementos presionando el atajo de teclado F12 (debería funcionar en la mayoría de los sistemas). Alternativamente, podés hacer clic derecho en cualquier parte de la página web y seleccionar “Inspeccionar.” La ventana del inspector de elementos debería aparecer. 🖱️

ステップ2

「ネットワーク」タブをクリックし、次に「メディア」をクリックして、ビデオ ファイル以外のすべてをフィルターします。ページを再読み込みしてください。ブラウザの更新ボタンをクリックするか、Ctrl + R を押します。 🔄

ステップ3

ビデオ ファイルがリストに読み込まれます。即時プレビューはできませんが、ファイルをダブルクリックして新しいタブで開くことができます。そこで右クリックしてダウンロードできます。 🎬

3 . 全ページのスクリーンショットをキャプチャする

Web ページ全体を保存したい場合は、PDF または HTML ファイルとして簡単にダウンロードできます。しかし、ページ全体の通常のスクリーンショットを撮りたい場合はどうすればよいでしょうか?ここ やり方を説明します。 📸

Firefoxにはコンテキストメニューに専用のスクリーンショットツールがあるので、その使い方を紹介します。 グーグルクローム およびその他のブラウザ。 🌐

ページ上の任意の場所を右クリックするか、F12 キーを押して、インスペクタ ツールを開きます。

Ctrl+Shift+P を押して実行ウィンドウを開きます。私が書いた キャプチャキャプチャ フルサイズスクリーン このウィンドウで。それをクリックしてください。 📄

「名前を付けて保存」ウィンドウがすぐに表示され、ページ全体のスクリーンショットを JPG 形式で保存できるようになります。 💾

4 . 電話をしているふりをする

ほとんどの Web サイトは、デバイスの種類や画面サイズによって読み込みが異なります。何らかの理由で別のデバイスを使用しているとサイトに思わせたい場合は、インスペクター ツールを使用して簡単に行うことができます。 📱

Chrome では、右クリック メニューまたは F12 キーを押して要素インスペクター ウィンドウを開きます。次に、左上隅にある小さなラップトップと電話のアイコンをクリックします。 Firefox には、レスポンシブ デザイン モード (Ctrl+Shift+M) と呼ばれる同様のボタンがあります。 🖥️

エミュレートできるデバイスのリストが表示され、手動でサイズを調整することもできます。 画面。モバイル デバイスを選択すると、ブラウザーでもタッチ ジェスチャがシミュレートされることがわかります。 📱✨

5 . ソースを特定する

このヒントはクリエイティブな人向けですが、Web サイトのフォントに興味のある人なら誰でもこのトリックを使用できます。あなたは 識別するための検査ツール 場合によってはフォントをダウンロードすることもあります。 🖋️

まず、要素インスペクター ツールを開きます。次に、「ネットワーク」タブ（オーバーフローメニューに隠れている場合があります）をクリックし、「ソース」を選択します。

次にCtrl+Rを押します。レンダリングされたフォントは、おそらく WOFF 形式でリストに読み込まれます。フォント名をダブルクリックすると直接ダウンロードできます。たとえば、How-To Geek ではデフォルトのフォントとして Roboto を使用しています。 🔤

フォントに関するより詳細な情報が必要な場合は、「要素」タブに移動して「スタイル」を選択します。フォント ファミリ プロパティまで下にスクロールしてクリックします。対応するテキストがウェブサイト上で点灯します。この方法でソースを正確に識別できます。 🎨

6 . ページ上のテキストを編集する（一時的）

インスペクタを使用して、Web ページ上のほぼすべてを一時的に編集できることをご存知ですか?このツールを使用すると、Web サイトを構成するコードを編集できるため、ある程度のコードを知っていれば、ページの外観を自由に変更できます (ページをリロードするまで、自分のマシン上でのみ)。 🛠️

コーディングの知識がなくても、どの Web ページでも基本的なテキストを編集できます。友達にちょっとした面白いいたずらをすることもできます。 😉

編集したいページ上のテキストを強調表示し、右クリックします。次に、「検査」または「要素の検査」を選択します。

関連するテキスト スニペットが [要素] タブに表示されます。ダブルクリックするだけで、テキストを任意のものに置き換えることができます。 ✏️

要素インスペクタを閉じれば完了です。ページをリロードすると変更が元に戻ってしまうので注意してください。 🔄

7 . アイテムを削除

テキストを編集するのと同じように、Web ページから特定の要素を削除することもできます。繰り返しますが、変更はページをリロードするまでのみ有効です。 ❌

削除したい項目を右クリックし、「検査」または「要素の検査」を選択します。

「

要素全体がハイライトされるまで、「」をクリックします。次に、Delete キーを押すだけです。 🔚

あっという間に消えてしまいました！ 🕵️‍♂️

8 . 色の値を識別する

クリエイティブな人のためのもう一つのヒント：RGBとHEX値はどこからでも取得できます ウェブページの色 要素インスペクタにあるスポイトツールを使用します。 🎨

ページ上の任意の場所を右クリックして、インスペクターを開きます。デフォルトでは、ルール ウィンドウはインスペクター タブ内で開きます。下にスクロールして、「color」というラベルの付いたプロパティを見つけます。

色プロパティの横には、色付きの円または四角形が表示されます。それをクリックしてカラーピッカーを開き、その横にあるスポイトアイコンを押します。 🖌️

このスポイトをページ上の任意の場所にドラッグして、色の値を見つけることができます。スポイトをクリックすると、選択した色の値がプロパティに自動的に入力されます。ここから簡単にコピーできます。 📋

---

これら ヒントはほとんど表面を傷つける 要素インスペクタを使用して実際に実行できるものよりも優れています。 Web 開発をさらに深く学びたい場合は、こちらのガイドを参考にしてください。 💻