Google Chromeで表示したページのHTMLソースをダウンロードする方法

Google Chromeで表示したページのHTMLソースをダウンロードする方法

Posted at March 5,2015 12:55 AM
Tag:[GoogleChrome]

Google Chromeで表示したページのHTMLソースをダウンロードする方法を紹介します。

1.問題点

前置きが長くなりますが、Firefoxとの動作の比較からChromeでの問題点を説明します。

まず、次のHTMLマークアップのページがあるとします。

<!doctype html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>テスト</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="container">
    <h1>test</h1>
    <div id="content">
      <h2><a href="http://user-domain/test.html">テスト</a></h2>
      <p>本文です本文です本文です本文です本文です</p>
    </div>
  </div>
</body>
</html>

このページは、ブラウザで下のように表示されます。

ブラウザでの表示

FirefoxでこのページのHTMLソースをダウンロードするには、ページ上を右クリックして「ページのソースを表示」を選択。

ページのソースを表示

これでHTMLソースが表示されます。

HTMLソース

あとは、「ファイル」→「名前をつけてページを保存」を選択すればHTMLソースを保存できます。

名前をつけてページを保存

下記は保存したファイルをエディタで開いたところです。

保存したファイルをエディタで開いたところ

これと同じ操作をChromeで実施してみます。

表示されたページ上で右クリックして「ページのソースを表示」を選択。

名前をつけてページを保存

表示されたソース上を右クリックして「名前をつけて保存」を選択すればHTMLソースを保存できるようにみえます。

名前をつけて保存

が、保存したファイルをエディタで開くと、次のように余分なタグが付与され、かつ圧縮された状態でしか保存できません。

(クリックで拡大)
保存したファイルを開いたところ

できればFirefoxのように元のままのソースをダウンロードしたいです。

ここまで読まれた方は、「ページ上で右クリックして『名前をつけて保存』を選択すればいいんじゃないの?」と思われるかもしれません(下)。

保存したファイルを開いたところ

その方法は認識していますが、画像など余分な資材をダウンロードしたくないときもありますし、HTMLも一部変更されてしまうなど、この方法を避けたいケースがあります。

また、表示されたソースコードを全選択してエディタに貼り付ける案もありますが、文字コードや改行コードが反映されません。

そういうわけで、この作業は普段Firefoxで行っています。

が、Chromeでも同様の作業が行えないか調べてみたところ、方法がみつかりました。

ということで、Chromeで表示したサイトのHTMLソースをダウンロードする方法を紹介します。

2.Chromeで表示したサイトのHTMLソースをダウンロードする

ページ上で右クリックして「要素を検証」をクリック。

要素を検証

「Sources」タブをクリック。

Sources

このような感じでソースが表示されます。もしソースが表示されていない場合は、右側のツリーから該当のファイル名をクリックしてください。

(クリックで拡大)
ソースが表示

ソースが表示されているエリアを右クリックして「Save as...」を選択し、任意のファイル名をつけて保存します。

保存

これで元のソースコードがそのまま(文字コード・改行コード含め)保存されます。

元のソースコードがそのまま保存

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)