Web開発のデバッグに。AIブラウザのデベロッパーツールの使い方

ChromeやEdge、Firefox、Safariなどの主要ブラウザが提供する従来のWeb体験に加え、CometやGenspark、ChatGPT AtlusといったAI機能を搭載したWebブラウザが続々と登場しています。

生成AI時代のこれからは、AIブラウザの利用者は増加すると予想されます。
AIブラウザはブラウジングの体験を根本から変える可能性を秘めており、市場は急速に成長する見込みです。特にAI機能を重視する層や、新しいブラウジング体験を求める層はAIブラウザへ移行するでしょう。

GoogleもGeminiをChromeに統合し、AI機能（要約、コードアシストなど）を強化しているので、Google Chromeの圧倒的な市場シェアの優位性がすぐに崩れるかは未知数ですが、CometやGenspark、ChatGPT AtlusなどのAIブラウザ市場は、今後数年間で大幅に拡大すると予想されます。
そのため、Web制作・開発でも表示や動作の確認を含め、デベロッパーツールを使ったデバッグが引き続き必要になるでしょう。

ここでは、続々と登場したCometやGenspark、ChatGPT Atlusなど、AIブラウザ環境下でのデベロッパーツールの使い方について簡単にご紹介します。

Cometのデベロッパーツール

まずは、Cometのデベロッパーツールの利用方法から見ていきましょう。

ウィンドウ右上のユーザーアイコンの左の矢印からオプションを表示して、「More Tools（その他のツール）」の項目から「Developer Tools（デベロッパーツール）」を選択します。

デベロッパーツールは、ショートカットキーを利用しても手軽に表示できます。
Windowsでは「F12」または「Ctrl + Shift + I」、Macでは「Command + Option + I」になります。

デベロッパーツールは、デフォルトでウィンドウ右の固定して表示されますが、デベロッパーツールの表示位置は、三点アイコンから設定のオプションから、Dock side（固定サイド）の項目で、別ウィンドウ、左、下、右と変更が可能です。
サンプルでは、下に固定しています。

Web制作などでの基本操作としては、要素の情報を確認したり、要素またはスタイルを一時的に変更・確認、そしてデバッグ（不具合の修正）を行なっていきます。

デベロッパーツールのウィンドウ左上の選択アイコンを選択して、Webページの要素を選択することで、デベロッパーツール上でHTML構造と要素の情報が確認でき、ウィンドウ右のスタイルの情報から、選択した要素に適用されているスタイルが確認できます。
適用されているスタイルのチェックを外したりなどして表示を確認したり、選択した要素に対してプラスボタンから新たにセレクタを追加することも手軽にできます。

また、hover、focus、activeなどCSSで実装するスタイルを動的に変更する機能も、擬似クラスのボタンからチェックを入れて確認できます。

CSSで実装するスタイルを動的に変更する機能（hover、focus、active）などの確認

レスポンシブWebデザインの表示確認は、デベロッパーツールのデバイスツールバーのアイコンから、様々なデバイスの環境を想定した設定で確認が行えます。ウィンドウも可変幅での確認が行えるため、ブレイクポイントでの表示切り替えの確認も容易です。

Dimensions Responsiveの設定では、様々なデバイス幅で確認ができます。
目的のデバイスが表示されていない場合は、「Edit」からデベロッパーツールのデバイス設定に進み、対称のデバイスを選択して追加します。カスタムなども可能です。

このように基本的な操作を見てみると、従来のブラウザ（ChromeやEdgeなど）をほとんど変わりはありません。
これまで利用したことがある方は、特に問題なく使いこなせるでしょう。

Gensparkのデベロッパーツール

GensparkのWebブラウザもCometと同様、ウィンドウ右上の三本線アイコンからオプションを表示して、「More Tools（その他のツール）」の項目から「Developer Tools（デベロッパーツール）」を選択します。

デベロッパーツールのショートカットキーでの起動は、Cometと同様、Windowsでは「F12」または「Ctrl + Shift + I」、Macでは「Command + Option + I」になります。

デベロッパーツールの表示位置は、デフォルトでウィンドウ右の固定して表示されますが、こちらもCometと同様、三点アイコンから設定のオプションから、Dock side（固定サイド）の項目で、別ウィンドウ、左、下、右と変更が可能です。

Gensparkもデベロッパーツールの利用の流れやツール自体の操作も、Cometや従来のブラウザを変わりありません。

ChatGPT Atlasのデベロッパーツール

ChatGPT Atlasでは、ツールバーの「View」から「Developer」と進み、「Developer Tools」を選択してデベロッパーツールを起動します。

ChatGPT Atlasのデベロッパーツールは、別ウィンドウで表示されます。あくまでChatGPTがメインで利用するような仕様となっているからでしょう。
ショートカットキーでのデベロッパーツールの起動は、CometやGensparkと同様、Windowsでは「F12」または「Ctrl + Shift + I」、Macでは「Command + Option + I」となります。