InspectElementでできる7つの遊び心のあること
コーディングに不慣れな人にとっては、誤ってInspectElementを開いた後に怖がるのは簡単です。ただし、複雑なコードを表示した後も落ち着いている場合は、Inspect Elementを使用すると、その方法を知っていれば、便利な（そしてあまり役に立たない）ことをたくさん実行できます。
ここでは、ブラウザの開発者ツールとInspectElementを使用して実行できる7つの楽しいことを見ていきます。
Inspect Elementとは何ですか？
Inspect Elementは、任意のWebページのソースコードを表示および一時的に変更するためにブラウザが提供する開発者ツールです。このツールを使用することで、開発者とデザイナーは任意のWebサイトのフロントエンドを確認および変更できます。
コードを変更すると、ブラウザはリアルタイムでWebページを更新し続けます。この変更は、Webサイトでのセッションの間のみ継続し、1つのデバイスでのみ表示されます。ウェブページを離れるとすぐにすべての変更が削除されます。
1.画像と動画をダウンロード
通常、写真を右クリックして保存することで、Webから写真を簡単にダウンロードできます。ただし、すべてのWebサイトでそれを行うことはできません。この場合、要素の検査機能が役立ちます。
メディアファイルをダウンロードするには、メディアファイルを右クリックして、[検査]を選択します。 。
2.ヘッダーとテキストをいたずら友達に変更します
偽の画像を最初から作成する代わりに、DevToolsを使用して、Webページのテキストを変更したり、友達にいたずらをしたりすることができます。
偽のWebページを作成するには、評判の高いWebサイトのページを開き、そのタイトルを右クリックします。次に、検査をクリックします ペインを開きます。 その他をクリックします ハイライトされたコードのアイコンを選択し、HTMLとして編集を選択します 。次に、タイトルを独自の偽の見出しに置き換えます。
同様に、抜粋、日付、作成者名などの他の本文を変更できます。画像を変更するには、同じ手順で画像ソースを削除します。次に、Googleから関連する画像を見つけ、その画像アドレスをコピーして、ソースに貼り付けます。
このように、あなたは多くの問題なしであなたの友人にいたずらを引っ張ることができます。ただし、変更は一時的なものであるため、リンクではなくDevToolsペインを非表示にしてスクリーンショットを送信してください。
3.Webページの色とフォントを変更します
Inspect Elementを使用して実行できるもう1つの卑劣なことは、Webページの色とフォントを変更することです。色を変更するオブジェクトを右クリックして、検査を選択します 。次に、スタイル タブで、色または背景色を見つけて、16進コードを入力します。同様に、[スタイル]タブからフォントのサイズとスタイルを変更できます。
このトリックを使用して、任意のWebサイトの外観を変更し、読みやすくすることができます。たとえば、任意のWebサイトのダークモードを作成し、フォントサイズを大きくして読みやすくし、邪魔な要素を削除して削除することができます。
4.非表示のパスワードを表示する
いずれかのWebサイトでパスワードがアスタリスクで非表示になっている場合は、Webページのコードを微調整して表示できます。 DevToolsに移動します 非表示のパスワードを右クリックします。次に、入力タグ内で、タイプをパスワードからテキストに変更し、空白の画面をクリックします。これで、パスワードが表示されます。
このトリックは、パスワードを忘れたが、パスワードマネージャーに保存しておく場合に便利です。そのため、ウェブページから直接パスワードを表示して覚えておくことができます。
5.モバイル版のウェブサイトを表示する
私たちは皆、携帯電話でデスクトップサイトを表示する方法を知っています。ただし、Inspect Elementを使用して、デスクトップにモバイルバージョンを表示することもできます。これを行うには、 DevToolsを開きます デバイスツールバーの切り替えをクリックします ボタン（右上から2番目のボタン）。
同様に、ユーザーエージェントを切り替えて、さまざまなバージョンのWebサイトを表示できます。開発ツールで、その他をクリックします 左上隅のアイコンをクリックして、ネットワーク条件を選択します。 デフォルトのブラウザを使用のチェックを外します ユーザーエージェントのボックス セクションをクリックし、下のドロップダウンメニューから他のユーザーエージェントを選択します。
6.ウェブサイトから色を選ぶ
サードパーティのカラーピッカー拡張機能をインストールする代わりに、InspectElementを使用してお気に入りの色を選択できるようになりました。 Webページから任意の色を選択するには、要素の検査に移動します 。次に、スタイルに移動します タブをクリックして、色または背景を見つけます。次に、色の後にある小さなボックスをクリックして、カラーピッカーを表示します。
これで、ページの任意の場所をクリックして色を選択し、スタイルから16進コードをコピーできます。 タブ。 RGBまたはHSLAコードが必要な場合は、矢印を使用して表示できます。 ボタン。
したがって、将来使用する可能性のあるWebサイトですばらしい色を見つけた場合は、Inspect Elementを使用して、参照用にコードを保存してください。
7.拡張機能なしでスクリーンショットを撮る
DevToolsを使用すると、クリーンでクリアなスクリーンショットを撮ることもできます。スクリーンショットを撮るには、 DevToolsを開きます 、その他をクリックします アイコンをクリックし、コマンドの実行を選択します 。検索ボックスに「screenshot」と入力します。 4種類のスクリーンショットキャプチャオプションが表示されます。
エリアのスクリーンショットを選択すると、ウィンドウ上の特定のエリアを強調表示でき、ブラウザはそれをPNGファイルとして保存します。
フルサイズのスクリーンショットをキャプチャすると、画面に表示されていないものも含め、ウェブページ全体の画像が保存されます。ノードのスクリーンショットは、特定の要素の画像のみをキャプチャします。最後に、スクリーンショットのキャプチャオプションは、画面に表示されているすべての画像を保存します。
検査要素の隠されたトリックを学ぶ
これらは、InspectElementを使用して実行できるいくつかのトリックです。 DevToolsを使用して実行できる便利なことは他にもたくさんあります。
したがって、パワーユーザーになり、友達に感動を与えたい場合は、DevToolsのより隠された機能を学ぶことをお勧めします。
-
知らないうちにメールでできること
私たちは皆、非常に長い間メール サービスを使用してきました。しかし、電子メールの用途は何ですか? 電子メールが最初に登場したとき、その唯一の目的は 2 人の個人間でメッセージを交換することでした。しかし、時代が変わるにつれて、電子メールはより一般的になり、メッセージをブロードキャストできるようになりました。長年にわたって適用および削除された機能の数。そして今日、電子メールは、情報を交換し、職業生活を維持するための最も一般的なプラットフォームです。しかし、そのメールには、あなたが気付いていない他の機能もあるのをご存知ですか? 今日はこの記事で、いざという時や緊急時に使えるメールの特徴を見てい
-
VPN で追跡できますか
Virtual Private Network アプリは、PC やスマートフォンに必須のアプリです。しかし、このアプリは、宣伝して約束するセキュリティとプライバシーを提供しますか? VPN ユーザーはデジタル的に匿名ですか?私の ISP と政府サービスは、私のオンライン活動を把握できますか?これらの質問に答えるために、「VPN で追跡できますか?」という切実な質問に答える特定の事実と情報をまとめました。 それはすべて、VPN が提供する品質とサービスに依存します。さまざまな仮想プライベート ネットワーク サービス プロバイダーが、類似しているさまざまな機能を提供しています。このブログでは、V