ローカルアプリをプレビュー

組み込みブラウザの最も一般的な使い方は、ローカルで実行中のアプリをプレビューすることです。ここでは、何もない状態からワークスペース内で実行中のアプリを表示するまでの手順を説明します。

ステップバイステップの設定

ステップ1：ターミナルでdevサーバーを起動。

1DevToolでターミナルを開き、開発サーバーを起動します。コマンドは技術スタックによって異なります：

• React / Next.js / Vite: npm run dev
• Django: python manage.py runserver
• Rails: rails server
• Rust（ウェブフレームワーク使用）: cargo run
• Go: go run main.go

サーバーがローカルURLを出力するのを待ちます — 通常はhttp://localhost:3000、http://localhost:8000、またはhttp://localhost:8080のようなものです。

ステップ2：ブラウザパネルを開く。

パネルツールバーでブラウザアイコンをクリックするか、パネルを追加メニューから開きます。ブラウザパネルが空のアドレスバーとともに表示されます。

ステップ3：ローカルURLに移動。

アドレスバーをクリックし、devサーバーが実行されているURL（例：http://localhost:3000）を入力してEnterを押します。アプリがパネルに読み込まれます。

ステップ4：必要に応じてリフレッシュ。

Cmd+R（macOS）またはCtrl+R（Windows/Linux）を押してページをリロードします。devサーバーがhot module replacement（HMR）をサポートしている場合（ViteやNext.jsなど）、ファイルが変更されるとページは自動的に更新され、手動リフレッシュは不要です。

ステップ5：リサイズしてレイアウトをテスト。

パネルの仕切りをドラッグして、ブラウザパネルを狭くしたり広くしたりします。別のレスポンシブテストツールを設定せずに、アプリが異なる幅でどのように見えるかを確認する簡単な方法です。

レスポンシブレイアウトをテスト

パネルの仕切りをドラッグしてブラウザを狭くし、モバイルレイアウトを確認します。より正確なレスポンシブテストのために、1DevToolにはモバイルシミュレーターが含まれています：ブラウザパネルのヘッダーにある電話アイコンをクリックして、標準的なモバイルブレークポイント（iPhone用375px、タブレット用768pxなど）でアプリをプレビューします。

モバイルシミュレーターでは、デバイスの向きをポートレートとランドスケープの間で切り替えることもできるため、物理デバイスなしで両方のモードでレイアウトが機能することを確認できます。

AIエージェントと併用

組み込みブラウザは、AIエージェントと並行して作業するときに真価を発揮します。コンテキストスイッチをほぼすべて排除するワークフローは次のとおりです：

1. Claude Codeターミナルを開き、タスクを与えます：「メールとパスワードフィールドを検証するフォーム付きログインページを作成してください。」
2. Claudeがコードを書く様子をターミナルで確認します。
3. Claudeが完了を報告したら、ブラウザパネルでCmd+Rを押してリロードします。
4. ログインページがパネルに表示されます。何かおかしい場合は、アプリを切り替えずにClaudeに説明します：「送信ボタンがパスワードフィールドに近すぎます。余白を追加してください。」
5. Claudeが修正します。リロード。繰り返し。

このループ — ターミナルでコード、ブラウザで確認、修正を説明 — は、ターミナルウィンドウ、コードエディタ、ブラウザタブの間を切り替えるよりもはるかに高速です。

ヒント： ブラウザパネルとターミナルを並べて配置し、エージェントの作業を見ながら結果を一目で確認できるようにしましょう。ホットリロードに対応したプロジェクトでは、リフレッシュを押す必要さえありません。