MacでChromeのソースコードを表示する方法

MacでChromeのソースを見たいけど操作がわからず戸惑っていませんか。

この記事を読むと、ページ全体のソースを素早く表示する具体的な手順やキーボードショートカット、開発者ツールの便利な使い方がわかり、日常の作業がぐっと楽になります。

項目	内容
実践的な手順	画面上でのクリック操作やキー操作を順番に示し、初心者でも迷わず実行できます。
すぐ使えるショートカット集	ソース表示や開発者ツールを瞬時に開くキー操作を厳選して紹介します。
開発者向け応用テクニック	DOMの一部だけ見る方法やコンソールでの素早い確認など、エンジニア目線のコツを伝えます。

さっそく手を動かしてステップ通りに試せば、5分以内にソース表示をマスターできます。

MacのChromeでページ全体のソースを素早く表示する方法

Chromeでページのソースをパッと見たいときは心配しないでください。初心者でも簡単にできる方法を優しく手順で案内します。少しのコツで作業がグッと楽になります。

主要な方法は3つあります。右クリックでソースを開く方法、キーボードショートカットを使う方法、アドレスバーにview-source:を付ける方法です。場面に合わせて使い分けると効率が良くなります。

実用的なコツとして、ソースを開いたらCommand+Fで素早く検索してください。動的に生成される要素はソースに出ないことがあるので、そのときは開発者ツールのElementsタブで実際のDOMを確認してください。保存したいときはCommand+Sでファイルにできます。

MacのChromeで右クリックからページのソースを表示する方法

ページ上で右クリックして出るメニューからページのソースを表示を選ぶと、新しいタブでソースが開きます。ワンクリックで全体のHTMLが見られるので、どの部分がどの要素かを素早く確認できます。

空白部分や画像の近くなど、クリックできる場所を試してみてください。一部のサイトは右クリックを無効にしていることがあり、その場合はショートカットやアドレスバー方式を使うと回避できます。

Chromeで対象ページを開きページ上で右クリックしてメニューのページのソースを表示を選ぶと新しいタブでソースが開く

MacのChromeでキーボードショートカットでソースを表示する方法

キーボードショートカットは手を動かさずに直ぐ開けるので作業効率が上がります。MacではOption+Command+Uを押すだけで対象ページのソースが新しいタブで開きます。

ソースが開いたらCommand+Fで検索して該当箇所にジャンプできます。右クリックが制限されているページやマウス操作が面倒なときに特に便利です。

Chromeで対象ページを開きOption+Command+Uを押すとページのソースが新しいタブで開きそこでCommand+Fで検索できる

MacのChromeでアドレスバーにview-sourceを使ってソースを表示する方法

アドレスバーにview-source:を付ける方法は確実にソースそのものを表示したいときに重宝します。URLの先頭にview-source:を追加してEnterするとそのページのソースが表示されます。

この方法はリダイレクトや認証で直接アクセスできないときにも有効です。表示されたHTMLはそのままCommand+Sで保存できるので後から参照するときに便利です。

Chromeのアドレスバーにview-source:を先頭に付けてEnterするとそのページのソースが表示され保存はCommand+Sで行う

MacのChromeで開発者ツールを使ってHTMLや外部ファイルのソースを詳しく見る方法

Chromeの開発者ツールは、ページの中身を手軽に覗ける魔法の箱のようなツールです。細かく見たいときはElementsでDOMを扱い、外部のコードを見たいときはSourcesでファイルを開きます。初心者でも迷わないように、まずは使い分けを把握しましょう。

ここではMacのショートカットや基本の流れを押さえつつ、実際に手を動かして確認できるコツをお伝えします。最新のmacOSとChromeを前提に、画面を見ながら進めると理解が早くなります。

要素を選んで右クリックするとコピーやEdit as HTMLが出るので、ちょっとしたテスト変更やコードの取り出しがすぐできます。

MacのChromeでElementsパネルを使って個別要素のHTMLを確認する方法

ElementsパネルはページのDOM構造をツリーで見せてくれます。要素をクリックすると属性やスタイルが右側に表示され、どのCSSが効いているか一目でわかります。

表示されたHTMLはその場で編集できるので、見た目の調整や仮の修正をすぐ試せます。要素の上で右クリックしてコピーすることも多用すると作業が楽になります。

Chromeで対象ページを開きCommand+Option+IでDevToolsを開きElementsタブを選択して要素選択ツールでクリックしHTMLを展開して編集やコピーを行う

MacのChromeでSourcesパネルを使って外部JSやCSSを開いて整形する方法

Sourcesパネルではページに読み込まれた外部ファイルを一覧で見ることができます。左のファイルツリーから該当のJSやCSSを開くと、ブラウザに読み込まれた実際のコードが表示されます。

minifiedされたファイルは{}ボタンで整形して見やすくしましょう。Command+Pでファイル名検索すると大きなプロジェクトでも素早く目的のファイルに飛べます。

DevToolsのSourcesタブで左のファイルツリーから該当ファイルを選び{}ボタンで整形してCommand+Pで別ファイルを素早く開く

MacのChromeでソースを読みやすくして検索や保存を効率化する応用テクニック

ソースを読みやすくしておくと、探したいコードにたどり着く時間がぐっと短くなります。ここでは整形して全文検索する方法や、表示中のファイルをローカルに保存するやり方をやさしく紹介します。飲み込みやすい手順で進めるので気楽に試してください。

エンジニア視点のちょっとしたコツを交えると、まずは整形して検索で目的のブロックを特定し、そのあと必要なファイルだけ保存すると効率が良くなります。小さな工夫で作業の手間が減るので、楽しみながら覚えていきましょう。

MacのChromeでソースを整形して全文検索で目的箇所を探す方法

まずはDevToolsを開いてSourcesタブに移動します。表示されているHTMLやJSを選んで、画面右下の波かっこボタン{}を押すと整形して見やすくなります。これだけで読むスピードがかなり上がります。

整形した状態でCommand+Shift+Fを押すと、開いているすべてのソースを横断検索できます。正規表現や大文字小文字の切り替えも使えるので、広い範囲から目的の箇所を素早く見つけられます。

DevToolsでファイルを開いて{}で整形しCommand+Shift+Fで全ファイルを横断検索して該当箇所を開く

MacのChromeで表示中のソースや外部ファイルをローカルに保存する方法

表示中のソースをローカルに保存するには主に2つの方法があります。手早く保存したいときはview-sourceタブを使い、もう少しきれいに保存したいときはSourcesパネル経由でファイルを開いて保存すると良いです。

外部ファイルやライブラリはSourcesで開くと元のパスやエンコーディングが分かりやすくなります。頻繁に編集する場合はWorkspaceにマッピングしてローカルで扱えるようにしておくと便利です。

view-sourceタブでCommand+Sで保存するかSourcesでファイルを開き新しいタブで開いてから保存する

よくある質問

ページ全体のソースをすぐに表示するには

Chromeで素早く見るならOption+Command+Uを押すとページソースが開きます。右クリック→ページのソースを表示でも同じで、これは読み込まれた元のHTMLを表示します。

特定の要素だけのソースを見たいときは

見たい要素の上で右クリックして検証を選ぶとElementsパネルでその要素のHTMLが見られます。そこからコピー→outerHTMLで要素だけを取り出せます。

JavaScriptで追加された内容も見たい場合はどうするか

動的に生成された内容はView Page Sourceでは反映されないのでElementsパネルでリアルタイムのDOMを確認してください。生成後のHTMLを保存したければ、Elementsでコピーしてテキストに貼ると扱いやすくなります。

文字化けやエンコーディングの問題が起きたら

開発者ツールのNetworkでDocumentを選び、Responseヘッダーのcharsetを確認すると原因が分かることが多いです。必要ならページを保存してテキストエディタで開き、エンコーディングを指定して確認すると改善しやすくなります。

まとめ

Chromeでページの中身を確認する方法はわかりやすく複数ありますので安心してください。ページ全体の生のHTMLをすばやく見るならCommand+Option+Uがいちばん手っ取り早いです。特定の要素や動的に変わる部分を見たいときはCommand+Option+IでDevToolsを開き要素を調べる機能を使うと便利です。

右クリックからページのソースを表示する方法も直感的で覚えやすいです。DevToolsはライブのDOMや実行中のJavaScriptが見られるので画面で変わる表示やデバッグにはこちらを使うと効率が上がります。ソースを保存してからエディタで整形して読むと読みやすくなります。