Chromeでソースコードを表示する方法!AndroidスマホやPCでのやり方を解説!

気になるWebページはソースコードを調べてみたくなります。Google Chromeなら、PCでもAndroidスマホでも簡単な操作でソースコードを表示できます。この記事では、PCとAndroidスマホのChromeでソースコードを表示する方法を解説します。

Chromeでソースコードを表示する方法!AndroidスマホやPCでのやり方を解説!のイメージ

目次

  1. 1Google ChromeでWebページのソースコードを表示してみよう!
  2. 2PC版Chromeでソースコードを表示する方法
  3. ソースコードを表示するだけなら右クリックから
  4. 詳細にソースコードを調べたいのならデベロッパーツールで!
  5. 3スマホのAndroid版Chromeでソースコードを表示する方法
  6. 4Chromeでソースを表示するのは簡単!

Google ChromeでWebページのソースコードを表示してみよう!

Chromeなどのブラウザで閲覧できるWebページというのは、必ずHTMLで記述されて作成されています。ネットサーフィンをしていて、どのようなHTMLで記述されているのか気になるときには、Chromeなら簡単にソースを表示してHTMLなどのコードを確認できます。

この記事では、PCとAndroidスマホのGoogle Chromeを使って簡単にできるWebページのソースを表示する方法を解説します。

なお、iPhoneでもGoogle Chromeを利用できますが、iPhone版のGoogle ChromeはiPhoneの仕様になっているためにご紹介する方法ではソースコードの確認はできません。今回はPC版とAndroidスマホ版のChromeのみのご紹介となります。

Thumb「接続がリセットされました」Chromeで表示される原因と対処法を解説!
Chromeで突然「接続がリセットされました」と表示されて、今まで接続できていたサイトへ接続...

PC版Chromeでソースコードを表示する方法

PC版のChromeでソースコードを表示する方法をご紹介します。PC版Chromeの場合には、ただ単にソースコードを表示する方法と、ソースコードの詳細を確認出来る方法があります。

ソースコードを表示するだけなら右クリックから

ただ単にブラウザ上にソースコードを表示するだけなら、右クリックから簡単にソースコードを表示できますまずはソースコードを表示したいWebページをChromeで表示したら、コンテンツがなにもないところで右クリックします。

Chromeでソースを表示する方法

画面上に表示されたメニューの「ページのソースを表示」をクリックします。

Chromeでソースを表示する方法

するとChromeの画面上にそのページを構成しているHTMLのソースコードが表示されます。

詳細にソースコードを調べたいのならデベロッパーツールで!

ソースコードの詳細を確認したい場合には、Chromeのデベロッパーツールを使うと良いでしょう。 デベロッパーツールとは、開発者向けにChromeに搭載されているツールです。特別なソフトなどを利用しなくても、Chrome上でWebページのソースや表示スピード、通信状況などを確認できます。

開発者でやシステムエンジニアでなくても、Chromeユーザーであれば、誰でも簡単に利用できます。通常のソースの表示よりも、詳細を調べたいときにおすすめです。デベロッパーツールを使う方法は次の通りです。

Chromeでソースを表示する方法

まずはChromeの右上の「」をクリックして、「その他ツール」>「デベロッパーツール」と開きます。

Chromeでソースを表示する方法

するとChromeの画面の右側にデベロッパーツールが開きます。タブを切り替えると、ソースコードの内容が変わり、細かいWebサイトの構成などを調べることができます。

Thumb見たくないサイトをブロック!特定のURL/ドメインを制限するChrome拡張機能5選!
見たくないサイトを個別にブロックするには、Google Chromeの拡張機能を使うのがとて...

スマホのAndroid版Chromeでソースコードを表示する方法

AndroidスマホのChromeでもソースコードを表示することができます。AndroidスマホのChromeでソースコードを表示する場合には、ChromeのアドレスバーのURLの前に「view-source:」を追加するだけです。これだけで、そのページのソースコードが表示されます。

ただし、アドレスバーにURLが表示されている状態で、URLの先頭に「view-source:」を入力するのが少し大変です。表示されているURLの先頭に入力しようとタップすると、検索キーワードを入力する画面になってしまうためです。

この方法を使うためには、先にソースコードを表示したいURLをクリップボードにコピーしておく必要があります。

Chromeでソースを表示する方法

URLをクリップボードにコピーする方法は、Chromeの右上の「」をタップします。表示されたメニューの中の「共有」の右側の「コピペ」マークをタップします。するとそのWebページのURLをコピーできます。

Chromeでソースを表示する方法

アドレスバーに「view-source:」を入力したあとに長押しをして「貼り付け」を押します。すると、コピーしたURLを貼り付けられます。

Chromeでソースを表示する方法

そのままキーボードのEnterをタップすればそのWebページのソースコードがChrome上に表示されます。PCとスマホでは違うコードで記述されていることもあるので、スマホならではのコードの使い方を確認してみましょう。

Thumb「ネットワークの変更が検出されました」Chromeで表示された時の対処法を解説!
Google Chromeで「ネットワークの変更が検出されました」というエラーが表示されて、...

Chromeでソースを表示するのは簡単!

この記事では、Chromeでソースコードを表示する方法をお伝えしました。やり方を覚えれば、PCでもスマホでも簡単にソースコードを表示できます。ぜひ、気になるページのソースを確認したいときには、ご紹介した方法でソースコードを表示してみましょう。

関連するまとめ

Original
この記事のライター
K.C
皆様のお役に立てる情報をお届けするために日々精進していきます。どうぞよろしくお願いします。