files/ja/tools/remote_debugging/chrome_desktop/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

---
title: デスクトップ版 Chrome のリモートデバッグ
slug: Tools/Remote_Debugging/Chrome_Desktop
translation_of: Tools/Remote_Debugging/Chrome_Desktop
---
<div>{{ToolsSidebar}}</div><p>デスクトップ環境で実行している <a href="/ja/docs/Glossary/Google_Chrome">Google Chrome</a> に <a href="/ja/docs/Tools">Firefox 開発ツール</a>を接続する方法を説明します。</p>

<div class="note">
<p>本機能のサポート状況は、Firefox のデバッグプロトコルと Chrome のデバッグプロトコルの橋渡しを行う Valence アドオンに依存します。Valence のサポート状況は、まだ初期段階です。</p>
</div>

<p>本ガイドは 2 つのパートに分けています: パート 1 "事前準備" では 1 回だけ必要な作業を、パート 2 "接続" ではデバイスへ接続するたびに必要な作業を扱います。</p>

<h2 id="Prerequisites" name="Prerequisites">事前準備</h2>

<p>以下のものが必要です:</p>

<ul>
 <li><a href="/ja/docs/Tools/Valence">Valence</a> アドオン (旧 Firefox ツールアダプタ) をインストールした、Firefox 35 以降。<a href="/ja/Firefox/Developer_Edition">Firefox Developer Edition</a> を使用している場合は、Valence はインストール済みです。他のエディションでは、<a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxdt-adapters/">最新バージョンの Valence をダウンロード</a>して、XPI ファイルを Firefox で開いてインストールしてください。</li>
 <li>Chrome バージョン 37 以降。</li>
</ul>

<h2 id="Connecting" name="Connecting">接続</h2>

<p>{{EmbedYouTube("g5p9__OiaMY")}}</p>

<h3 id="Running_Chrome" name="Running_Chrome">Chrome を実行する</h3>

<p>デスクトップ版 を以下の特別なフラグ付きで起動して、リモートデバッグを有効にします。重要なフラグは <code>--remote-debugging-port=9222</code> です。<a class="external external-icon" href="http://www.chromium.org/developers/how-tos/run-chromium-with-flags">これらのフラグ付きで Chrome プロセスを実行する方法</a>のガイドをご覧ください。</p>

<p>他にもいくつか便利かもしれないフラグがあります。<code>--no-first-run</code>、<code>--no-default-browser-check</code>、<code>--user-data-dir</code> 付きで実行すれば、他の Chrome プロファイルと同時に実行できます。</p>

<p>例えば OS X では以下のコマンドを実行すると、他のインスタンスとは分離されたかたちで、デバッグ可能な Chrome を起動できます:</p>

<pre class="language-html"><code class="language-html">/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --no-first-run --no-default-browser-check --user-data-dir=$(mktemp -d -t 'chrome-remote_data_dir')</code></pre>

<h3 id="Connecting_using_WebIDE" name="Connecting_using_WebIDE">WebIDE を使用して接続する</h3>

<p>Firefox で <a href="/ja/docs/Tools/WebIDE#Opening_WebIDE">WebIDE</a>を開きます。WebIDE で "ランタイムを選択" をクリックして、ドロップダウンメニューから "Chrome Desktop" を選択してください。</p>

<p>そして、WebIDE で "アプリを開く" をクリックしてください。ここに、デバイスで開いているすべてのタブを表示します。タブ名をクリックすると、そのタブに開発ツールを接続します。ほとんどの Firefox 開発ツールを使用できます。ただし、以下のツールは未サポートです:</p>

<ul>
 <li><a href="/ja/docs/Tools/Performance">パフォーマンス</a></li>
 <li>タイムライン</li>
 <li><a href="/ja/docs/Tools/Network_Monitor">ネットワーク</a></li>
 <li><a href="/ja/docs/Tools/Storage_Inspector">ストレージ</a></li>
</ul>