このチュートリアルは、WindowsまたはMacオペレーティングシステムでOperaブラウザを実行しているユーザーを対象としています。 他のブラウザでページソースを表示する必要がある場合は、「 すべてのブラウザでWebページのソースコードを表示する方法」のガイドをご覧ください 。
Webページのソースコードを見たいと思っている理由は、自分のサイトの問題をデバッグすることから、まさに平凡な好奇心に至るまで、さまざまな理由があります。 あなたの動機が何であれ、Operaブラウザはこのタスクを簡単に実行できます。 このソースをブラウザのタブ内で最も基本的な形式で表示するか、Operaの統合開発者ツールを使用して詳細を確認することができます 。 このチュートリアルでは、両方を行う方法を示します。 まず、Operaブラウザを開きます
Windowsユーザー
ブラウザウィンドウの左上隅にあるOperaメニューボタンをクリックします。 プルダウンメニューが表示されたら、[ その他のツール ]オプションにマウスカーソルを合わせます。 これで、サブメニューが表示されます。 このオプションの左側にチェックマークが表示されるように[ 開発者の表示]をクリックします。
Operaのメインメニューに戻ります。 これで、 Developerというラベルの付いたその他のツールのすぐ下に新しいオプションが表示されます。 サブメニューが表示されるまでマウスカーソルをこのオプションの上に移動します。 次に、 View page sourceをクリックします 。 アクティブなWebページのソースコードが新しいブラウザタブに表示されるようになりました。 次のキーボードショートカットを使用して、このポイントに到達することもできます： CTRL + U
アクティブなページとそれに対応するコードの詳細を表示するには、 開発者サブメニューから開発者ツールオプションを選択するか、次のキーボードショートカットを使用します。CTRL + SHIFT + I
Mac OS XおよびmacOS Sierraユーザー
画面の上部にあるOperaメニューの「表示」をクリックします。 プルダウンメニューが表示されたら、[ 開発者メニューを表示]を選択します 。 DeveloperというラベルのOperaメニューに新しいオプションが追加されるはずです。 次にこのオプションをクリックし、ドロップダウンメニューが表示されたら[ソースを表示 ]を選択します 。 次のキーボードショートカットを使用して、この操作を実行することもできます。Command + U
新しいタブが表示され、現在のページのソースコードが表示されます。 Operaの開発ツールセットでこの同じページを分析するには、まず画面の上部にあるブラウザメニューのDeveloperをクリックします。 ドロップダウンメニューが表示されたら、[ 開発ツール ]オプションを選択します。