組み込みブラウザ — 概要

組み込みブラウザは、1DevToolにドッキング可能なパネルとして組み込まれた完全なChromiumウェブビューです。ターミナルで開発サーバーを実行し、ブラウザパネルでアプリを確認 — 両方が同じウィンドウ内で同時に表示されます。ターミナルとChromeの間でAlt-TabやCmd-Tabをする必要はもうありません。

なぜ重要なのか

組み込みブラウザなしの典型的な開発ループは次のようになります：コードを編集、ターミナルに切り替え、サーバーを実行、Chromeに切り替え、ページをリロード、壊れている部分を確認、ターミナルに戻り、繰り返し。コンテキストスイッチのたびに時間がかかり、集中力が途切れます。

組み込みブラウザパネルがあれば、ループは次のようになります：コードを編集、ターミナルを確認、ブラウザパネルに目をやる。すべてが一度に見えます。AIエージェントが機能を作成している間、ターミナルでコードを書く様子を確認し、キーボードに触れることなくブラウザパネルで結果を確認できます。

組み込みブラウザのサポート内容

ブラウザパネルは実際のChromiumエンジンを使用しているため、Chromeとまったく同じように動作します：

• JavaScript — モダンなES2020+の機能を含む、完全に実行
• ローカルストレージとCookie — ページ読み込み間で永続化されるため、ログインセッションと設定が機能
• WebSocket — ViteやNext.jsなどのdevサーバーで、ライブリロードとhot module replacement（HMR）が期待どおりに動作
• CSSとアニメーション — ブラウザとまったく同じようにレンダリング

これは簡略化されたプレビューエンジンではありません。Chromeで動作するアプリは、組み込みブラウザパネルでも動作します。

ブラウザパネルを開く方法

任意のパネルエリアの上部にあるパネルツールバーでブラウザアイコンをクリックします。ブラウザパネルが開き、上部にアドレスバーが表示されます。URLを入力してEnterを押して移動します。

または、パネルを追加メニューを使用して、ワークスペースレイアウトの任意のエリアにブラウザを追加します。

レイアウトでの配置

ブラウザパネルはワークスペースのどこにでも配置できます。一般的なレイアウト：

• ターミナルと並べて — 左にターミナル、右にブラウザ。AIエージェントがUIをリアルタイムで構築する様子を見るのに最適。
• 下部パネル — ターミナルの下にブラウザ。エディタとターミナルにより多くの垂直スペースを与えつつ、ブラウザもアクセス可能に。
• フローティングパネル — ブラウザパネルをドラッグして、ワークスペース上に別のオーバーレイとしてフロートさせる。

パネル間の仕切りをドラッグして、どのパネルのサイズも変更できます。読み取り用にブラウザを広くしたり、レスポンシブ動作を素早く確認するために狭くしたりできます。