Google ChromeのMacでのページソースの表示ショートカット

1. Google Chromeを開き、表示したいウェブページを開きます。

2. ページソースを表示するためには、デベロッパーツールを使用します。以下のいずれかの方法でデベロッパーツールを起動します:

   • メニューバーの「表示」から「開発」→「デベロッパーツール」を選択します。
   • キーボードショートカット「Option + Command + I」を押します。

3. デベロッパーツールが表示されたら、タブの中から「Elements」を選択します。

4. 「Elements」タブには、ページのHTMLコードが表示されます。ここでページの構造を確認したり、特定の要素を編集したりすることができます。

5. ページソースの全体を表示するには、HTMLコードの上部にある「」要素を右クリックし、「Copy」→「Copy outerHTML」を選択します。これにより、HTMLコード全体がクリップボードにコピーされます。

コード例: 以下は、JavaScriptを使用してページソースを取得する例です。

// ページソースを取得する関数
function getPageSource() {
  var source = document.documentElement.outerHTML;
  return source;
}
// ページソースをコンソールに表示する
console.log(getPageSource());

上記のコードは、現在表示されているページのソースコードを取得し、コンソールに表示します。

以上が、Google ChromeのMacでページソースを表示する方法と、コード例の説明です。これを参考にして、ブログ投稿を作成してください。