Chromeで要素を検査する：Proのように使用するための10のヒント

Chromeブラウザのこの強力な機能であるChrome開発ツールについて聞いたことがあるかもしれません���確かに、そのほとんどはWeb開発者にとっては便利ですが、平均的なインターネットユーザーにとっては便利な場合もあります。この記事では、Chromeデベロッパーツールで実行できる便利な機能に焦点を当てます。たとえば、Webサイトで設定された制限を回避する方法、表面に隠されているフォント、色、画像を見つけたり、パスワードを忘れたりする方法などです。

Chromeで開発者ツールを開く方法は？

Google ChromeでChromeデベロッパーツールを開くには、[Chromeのカスタマイズ]（⋮）> [ その他のツール]  -> [ デベロッパーツール]をクリックします。  編集するページを 右クリックして、[検査]を選択することもでき ます。Ctrl + Shift + I （Macの場合はCmd + Option + I）の短いキーボードを使用するのが好き です。

デフォルトでは、右に新しいウィンドウが開きますが、拡張する余地があるため、下部に保持することをお勧めします。ウィンドウを下に移動するには、右上にある3つの縦のドットボタン（⋮）をクリックしてから、下のドッキングオプションを選択します。設定からダークモードをオンにすることもでき  、目に優しいです。次回、要素の検査を開くと、変更が記憶されます。

また読む： グーグルクロームの背景を変更する方法

Chromeデベロッパーツールの10のヒント

1.Webページを編集します

さて、これは開発者ツールの最も基本的な使用法ですが、含める必要があります。ブラウザで任意のWebページ（ウィキペディアなど）を一時的に編集できます。これを行うには、Chromeで編集するWebページを開き、右クリックして[要素の検査]を選択します。[コンソール]タブ（上から2番目のオプションである必要があります）に移動し、次に次のコード行を貼り付けて、Enterキーを押します。

document.body.contentEditable = true

これにより、Webページ全体が他のWord文書と同じように編集可能になります。どこかをクリックして入力を開始するだけです。ただし、ページを更新するとすべての効果が失われることを覚えておいてください。したがって、ブラウザを閉じる前に、必ずページのスクリーンショットを撮ってください。

2.保存されたパスワードを明らかにする

携帯電話でInstagramにログインしたいが、パスワードを覚えていないとします。幸い、ブラウザに保存されています。これで、パスワードのリセットという骨の折れるプロセスを実行する代わりに、開発者ツールを使用して非表示のパスワードを明らかにすることができます。

パスワードフィールドを右クリックし、 「要素の検査 」を選択します。」これにより、ドキュメントインスペクターウィンドウが開き、パスワードタイプの 入力フィールドで「 password」という単語を「text」に 置き換えるだけです。そして、これはアスタリスクで隠されたパスワードを明らかにするはずです。

3.Webページのスクリーンショットを撮ります

追加のプラグインを使用せずに、Chome Dev Toolsを使用してWebページのスクリーンショットを撮ることができることをご存知ですか？この機能は非常にシンプルで、Webページの表示部分とWebページ全体の2つの設定のみを提供します。ウェブページのモバイルバージョンのスクリーンショットをキャプチャでき、上部のドロップダウンメニューからいくつかのモバイルレイアウトを選択できます。

スクリーンショットをキャプチャするには、Chromeデベロッパーツールを開きます。[コンソール]タブに移動し、  Ctrl + Shift + M（ウィンドウ）または cmd + opt + M（Mac）を押します。次に、Webページの右上にある3つのドットメニューを クリックし、[ スクリーンショットのキャプチャ]または[フルサイズのスクリーンショットのキャプチャ]を選択します 。以上で、スクリーンショットはダウンロードフォルダに保存されます。

また読む： あらゆるニーズに対応する7つの最高のChromeスクリーンショット拡張機能

スクリーンショットを撮る方法は他にもあり、いつでもスクリーンショット拡張機能をインストールするか、コンピューターのネイティブスクリーンショットショートカットであるprtsc（windows）とcmd + shift + 4（MacOS）を使用できますが、この方法でも同様に機能します。

4.カラーピッカーを使用します

私は最小限の色に夢中です。多くの場合、Googleで最小限の画像をスクロールして、機能の画像やサムネイルのインスピレーションを得ています。または、特定のWebサイトの配色が目を引くものであり、それらが使用している色を知りたい場合は、いつでもカラーピッカー拡張機能をインストールできます。しかし、それを行うためのより速い方法があります。

Chrome開発ツールを起動し、左側の[ スタイル ]タブをクリックして、色の横にある小さなボックスをクリックします。これにより、 カラーピッカーツールが表示されます。次に、Webページの任意の場所をクリックします。その色を確認すると、カラーピッカーから16進コードが表示されます。16進コードをコピーしてPhotoshopに貼り付けるだけです。

5.Webサイトをモバイルレイアウトに変更します

Webサイトを開くたびに、IPアドレス、正確な日時、URL、出身地、ユーザーエージェントなど、多くのデータが内部で送信されます。

ユーザーエージェントは、Webサイトがブラウザを識別するのに役立ちます。また、場合によっては、ユーザーエージェントを変更すると役立ちます。たとえば、Webサイトがレスポンシブであるかどうかを確認する場合です。しかし、私のお気に入りは、別のバージョンのWebサイトにアクセスすることです。たとえば、インドの一部の政府のWebサイトはInternet Explorerでのみ開いています。グローバルな例として、Instagramを見てみましょう。ご存知のように、コンピューター上のInstagramに写真をアップロードすることはできませんが、モバイルWebサイトからアップロードすることはできます。では、デスクトップブラウザをモバイルブラウザに見せかけませんか？

これを行うには、Chrome開発ツールを起動し、 縦に3つ並んだ点をクリックし、[その他の ツール]で[ネットワーク条件] を選択します 。[ユーザーエージェント]というチェックボックスをオフにして、自動的に選択し 、 ポップアップ  ボックスから[ モバイルブラウザ]を選択します。政府のWebサイトにアクセスしようとしている場合は、互換性のある別のブラウザを選択してください。次に、ウィンドウを閉じてページを更新します。ご覧のとおり、完全に機能するアップロードボタンがあり、コンピューターからInstagramに写真をアップロードするために使用できます。

6.何でも検索

正確に特定するのが難しいもう1つの便利な機能は検索です。「検索」タブでは、特定のコンテンツまたはHTML要素をWebページで検索できます。

たとえば、Webサイトで使用されているフォントを知りたい場合は、  3つのドットを クリック してから、[検索]をクリック してフォントを入力するか、正確に使用するには font-familyを 使用する必要があります。その情報は、行にあります。コードの。

または、別の例を見てみましょう。バックグラウンドでビデオを使用しているWebサイトに出くわし、どのビデオが正確であるかを知りたいのですが、ページの保存は機能しません。代わりに、Chrome開発ツールを使用して、  「ビデオ」 を検索し、結果をスクロールして、URLを取得するかどうかを確認します。その場合は常識を働かせてください。ビデオファイルの場合は、ほとんどの場合、  mp4の拡張子が付いているよう です。試してみてください。これで、mp4でいくつかの結果が得られました。そのうちの1つはビデオファイルであるはずです。それをクリックしてURLを表示します。そのURLをコピーしてブラウザに貼り付けると、すぐに使用できます。

7.ポップアップを削除します

iのもう1つの便利な機能は、Webサイトからポップアップを削除することです。たとえば、メンバーだけにコンテンツを提供する人気のある質問回答WebサイトであるQuoraを見てみましょう。Googleからこのサイトにアクセスして複数のページを読み込もうとすると、サインアップを求めるポップアップが表示されます。これを削除する方法は次のとおりです。ページを右クリックして、検査要素を表示します。  ポップアップウィンドウ（コンテンツをカバー）が強調表示されるまで、カーソルをコード行に移動します。完了 したら、そのコード行を削除します。ページの本文に別の透明なレイヤーがあり、リンクが応答しなくなることがあります。それも削除します。

読む： ウェブサイトでブロックされたコンテンツを表示する方法

8.ブラウザのGPS位置を変更します

現在、2つの方法があります。どのWebサイトでも、閲覧元の場所を見つけることができます。IPアドレスとブラウザの場所です。VPNとスマートDNSを使用すると、IPアドレスを簡単に変更できますが、ブラウザの場所を変更するのは簡単ではありません。

たとえば、先日、VPNでCBSを閲覧していましたが、すべて正常に機能していました。しかし、CBSでローカルチャンネルを視聴することにしたとき、ブラウザの場所を尋ねるポップアップが表示されました。次に、[許可]をクリックすると、コンテンツが私の場所では利用できないと表示されます。

これを修正する には、画面を右クリックして開発者コンソールを開きます。パネルの下部にある  右上の3つのドットのボタンを押してから、[その他]の[センサー]オプションを クリックします。開発者ツールウィンドウの下半分に新しいウィンドウが開きます 。[ジオロケーション]で、[カスタムロケーション]を選択します。」ここで、緯度と経度に基づいて現在地を入力します。これらの値がわからない場合は、いつでもGoogleマップを使用できます。または、カリフォルニアのような都市の名前を選択するだけ です。次に、ページをリロードし、ポップアップウィンドウで位置データを許可します。そして今、ページを更新し、[場所を許可]をクリックすると、ご覧のとおり、ローカルステーションをストリーミングできるようになりました。

9.定規を使用する

カラーピッカーツールと同様に、GoogleChromeデベロッパーツールにもルーラーが含まれています。これは、ページの高さと幅全体のピクセルを測定する場合に役立ちます。

ルーラーを表示するには、ルーラーを使用するページを右クリックして、[要素の検査]をクリックします。次に、初めて有効にする必要があります。右上の3つの縦のドットと [設定]をクリックします。 新しいウィンドウが開き、  [要素] セクションで[ ルーラーの表示 ]オプションを選択します。

10.Chromeでのダウンロード速度を制限する

ダウンロード速度を制限したい場合は、ChromeDevツールを使用して制限できます。実際のパッケージのダウンロード速度を制限するだけでなく、ストリーミングも制限します。基本的に、タブを分離して、設定した速度に応じてタブをロードすることができます。映画を見ながらブラウザの帯域幅を制限したい場合、それは魅力のように機能します。

タブの速度を設定するには、開発者向けオプションに移動し、監査の横にあるオプションボタンをクリックして設定を選択するか、F1キーを直接押して設定を開きます。[スロットル]タブに移動し、 [カスタムプロファイルの追加]をクリックします。プロファイルに名前を付け、ダウンロードとアップロードの速度を設定できます。図を追加したら、[追加]をクリックして完了です。

このプロファイルは現在開いているタブでのみ機能し、開発者向けオプションウィンドウをアクティブにしておく必要があります。そうしないと、スロットリングが機能しません。プロファイルをアクティブ化するには、開発者ツールの[ネットワーク]タブに移動し、[オフライン]の横にあるドロップダウンメニューをクリックします。カスタムプロファイルを選択すると、ページが調整されます。このページからダウンロードされたものはすべて、設定された制限に制限されます。要素の検査ウィンドウを閉じたり、ページを更新したりしないように注意してください。

Chromeデベロッパーツールをどのように使用しますか？

全体として、開発者ツールには、お気に入りのWebサイトをいじくり回すよりも多くのユースケースがあります。つまり、ウェブサイトがサーバー側で行っていないことはすべて、Chromeデベロッパーツールを使用して変更できます。または、  Web Developer 拡張機能を使用して、すべての機能などにワンクリックでアクセスできます。