Microsoft EdgeでWebサイトのソースコードを表示する方法は？

公開: 2021-09-20

Windows 11では、Microsoftはついに悪名高い象徴的なInternetExplorerブラウザを廃止しました。 GoogleのChromiumコードベースに基づくEdgeのみがあります。したがって、Edgeブラウザは多くの点でGoogleChromeに似ていると感じるでしょう。 Webページのソースコードを分析する場合は、ChromeやFirefoxを探すことなくEdgeで簡単に分析できます。この記事では、Microsoft EdgeブラウザーでHTML、CSS、JavaScriptなどのWebサイトのソースコードを表示する方法について説明します。

Chromeでソースを表示

Safariでソースを表示

ウェブサイトのソースコード

通常、ウェブページはHTMLで記述され、CSS、JavaScript、画像、動画などのさまざまな種類のファイルを使用します。Edgeなどのブラウザは、これらのHTML / CSS / JavaScriptを処理し、読み取り可能なテキストとメディアコンテンツのみを読者に表示します。ただし、多くの場合、詳細を取得するためにソースコードを分析する必要があります。

あなたは開発者またはブロガーであり、トラブルシューティングの目的でソースコードを確認したいと考えています。
表示しているWebページは魅力的であり、ページで使用されている色とフォントを見つけたいと考えていました。
元のコードを実際に変更せずに、ソースを編集してライブブラウザで結果をテストする必要があります。たとえば、見出しに異なる色を適用したり、フォントサイズを確認したりします。
ページのモバイル応答性をテストするか、ページに読み込まれている要素を見つけます。

場合によっては、ソースコードを調べることで、サイトで使用されているテーマとプラグインを見つけることもできます。理由が何であれ、2つの方法でソースコードを分析できます。

完全なソースコードを直接表示する
Microsoft EdgeDevToolsで要素の検査オプションを使用する

両方の方法を詳しく説明しましょう。

完全なソースコードの表示

たとえば、ページで使用されているCSSファイルとJSファイルを検索するとします。完全なソースコードを表示することで、これを簡単に行うことができます。 Edgeでページを開き、空の領域を右クリックして、コンテキストメニューから[ページソースの表示]を選択します。

これにより、以下のように表示しているページの完全なソースコードを示す新しいページが開きます。

各要素のHTMLコード、<head>セクションと</ head>セクションの間のリンクされたCSSファイル、メタタグ、bodyタグを閉じる前のリンクされたスクリプト</ body>を見つけることができます。これは多くの状況で役立ちますが、ページ上のどのHTML要素にどのCSSスタイルが適用されているかについての詳細はわかりません。たとえば、完全なソースコードを見ても、タイトル要素のフォントファミリを見つけることはできません。 .cssまたは.min.cssファイルのリンクをクリックし、そのファイルを検索して、見出しに使用されているスタイルを見つける必要があります。タイトルがH1からH6までのどのHTML見出しタグに属しているかわからないため、これは難しい作業です。さらに、CSSを個別に調べても見つけることができない、タイトルタグに適用されるカスタムCSSクラスが存在する可能性があります。

現在、多くのWebサイトは、すべてのCSSファイルを組み合わせて、HTTPリクエストの数を減らし、キャッシュを改善しています。したがって、ページのCSSファイルが単一のファイルとして結合されている場合、完全なソースコードを表示することは役に立ちません。解決策は、要素のHTMLとCSSを一緒に表示して、その特定の要素の全体像を把握することです。

Edgeの要素オプションを検査する

このオプションを使用して、Webページ上の任意の要素を分析し、そのHTMLとCSSを取得できます。これを使用するには、Edgeブラウザーを起動し、分析するWebページを開きます。 Webページ上の要素の分析を開始するには、Microsoft Edge DevTools（またはEdge Developer Tools）を開く必要があります。 EdgeDevToolsを開くには複数の方法があります。

空の領域を右クリックして、コンテキストメニューから[検査]を選択するだけです。
ほとんどのデスクトップおよびラップトップモデルで機能するWindowsでF11を押すことができます。または、「Control + Shift + I」キーを押して、Edge開発ツールセクションを開きます。
「Alt + F」を押してメニューを開き、「その他のツール>開発者ツール」に移動します。

デフォルトでは、Edgeは以下に示すようにブラウザの下部に開発ツールセクションを開きます。

高さを調整するには、開発者ツールのメニューバーにある3つのドットの水平アイコンをドラッグしてクリックし、位置を上/下に変更するか、新しいウィンドウで開きます。

DevToolsには多くのメニュー項目がありますが、EdgeでWebサイトのソースコードを分析するために使用する必要があるのはそのうちのいくつかだけです。 DevToolsを最初に開いたときに「ようこそ」タブが表示され、それを閉じるだけで済みます。

ソースHTMLおよびCSSコードの表示

前述のように、Webページの各要素には、CSSスタイルのソースHTMLコードが含まれています。ソースHTMLとCSSを表示するには、要素を選択する必要があります。

DevToolsメニューの最初のアイコンは、要素選択ツールです。
アイコンをクリックして、ソースHTMLを検索する要素にカーソルを合わせます。たとえば、「プレミアムサービス」という見出しの詳細を見つけましょう。

その見出し要素にカーソルを合わせると、Edgeは必要な詳細のほとんどを含むフローティングポップアップを表示します。見出しはh3、フォントサイズは26px、フォントファミリはMuseo500Regular、色は＃0875c9です。 [要素]タブの下に表示されている要素をクリックして、右ペインの[スタイル]セクションで同様のCSSの詳細を表示することもできます。要素選択ツールを使用すると、任意の要素のHTMLとCSSの完全な詳細を取得できます。

「スタイル」セクションの下に、各スタイルのCSSファイルリンクが表示されます。ファイルのリンクをクリックして、以下のセクションで説明する「ソース」タブの下で開くことができます。

Webページコンテンツのライブ編集

ここで、見出しにいくつかの変更を適用して、ライブサイトでどのように表示されるかを確認します。これを行うには、Webサイトの管理者パネルにログインして、ソースコンテンツを更新する必要があります。ただし、さまざまな色やフォントサイズで要素を視覚化するなどの問題が発生します。簡単な方法は、「要素」セクションの下のソースHTMLまたは「スタイル」セクションの下のCSSスタイルを編集することです。

HTMLを編集するには、まず[要素]タブで要素を選択し、右クリックします。または、選択した要素の左端に表示されている3つのドットアイコンをクリックすることもできます。コンテキストメニューからそのオプションを選択することで、要素を削除または非表示にすることができます。編集する場合は、「HTMLとして編集」オプションを選択します。

これによりテキスト編集が開き、エディターでHTMLタグを変更したり、要素にCSSクラスを追加したりできます。編集後、DevToolsの空の領域をクリックして、編集を終了します。エディターはタグを自動的に検証して修正します。たとえば、開始タグを<h4>に変更し、終了タグを変更するのを忘れて</ h3>のままにすると、元の<h3>…</ h3>タグに自動的に戻ります。

同様に、「スタイル」タブでCSSスタイルを変更できます。たとえば、h3見出しのフォントを40pxに増やし、色を＃c94608に変更します。

ページにインスタントプレビューが表示され、変更されたCSSとHTMLでどのように表示されるかがわかります。ただし、変更は一時的なものであり、ページを更新または再読み込みすると元のコンテンツが復元されます。バックエンドで変更を行って、Webページに永続的に適用することができます。

Webページエラーのトラブルシューティング

DevToolsの主な目的の1つは、ページが正しく表示されない原因となるブラウザーの問題を見つけることです。上のスクリーンショットでわかるように、EdgeはDevToolsメニューバーに2つの数字（34と33）を表示します。

最初の数字のアイコンは、「コンソール」タブの下に表示されるブラウザコンソールのエラーと警告を示しています。
2番目の番号は、個別に閉じることができるDevTools内の別のウィンドウに未解決の問題がある場合はそれを示します。

エラー、警告、およびヒントは、問題を理解するのに役立つラベルとともに表示されます。各項目をクリックして、ページ上の問題と影響を受けるリソースの詳細を確認してください。コードを変更して再テストし、エラーが修正されたかどうかを確認する必要があります。

ソースファイルを個別に表示

Edge DevToolsの[ソース]タブは、完全なソースコードの表示に似ています。ただし、ドメインの各部分と外部ドメインから個別にロードされたリソースが構造内に表示されます。 DevTools内で任意のファイルを選択し、コンテンツをプレビューできます。

縮小ファイルを選択すると、Edgeは「この縮小ファイルをきれいに印刷しますか？」という質問を表示します。縮小すると、ファイル内のすべてのスペースと改行が削除され、ユーザーが読み取れなくなります。きれいな印刷を使用して、縮小されたファイルを改行とスペースを含む読み取り可能なモードに変換できます。「Pretty-print」ボタンをクリックするか、ステータスバーに表示されている{}をクリックしてください。

ネットワーク、パフォーマンスなどの他のすべての項目は、ページの読み込み時間の高度な分析、HTTPヘッダーのチェック、セキュリティの問題の検出、およびSEOパフォーマンススコアのテストに役立ちます。分析が完了したら、DevToolsを閉じることができます。

最後の言葉

最新のEdgeChromiumバージョンは、他のどのブラウザーよりも強力です。 Microsoft Edge DevToolsを使用して、トラブルシューティングと設計の目的でWebページのソースコードを表示できます。ページで使用されているファイルを表示して、完全なソースコードを取得することもできます。