Chrome on 大体動かないhttps://daitai.dev/tags/chrome/Recent content in Chrome on 大体動かないHugojaTue, 28 Apr 2026 10:56:29 +0000WSL の playwright-cli からホスト Windows の Chrome にアタッチするhttps://daitai.dev/posts/wsl-playwright-cli-host-chrome/Tue, 28 Apr 2026 19:54:14 +0900https://daitai.dev/posts/wsl-playwright-cli-host-chrome/<blockquote> <p><strong>TL;DR</strong> — WSL2 ミラーモードなら <code>--cdp=chrome</code> チャンネル名は使えないが、Chrome を <code>--remote-debugging-port=9222</code> で起動して <code>--cdp=http://localhost:9222</code> を使えばアタッチできる。Firewall ルールも不要。なお、<code>--remote-debugging-address</code> は非 headless Chrome では無視され、Chrome は常に <code>127.0.0.1</code> にバインドする。<code>localhost</code> で繋がるのはミラーモードが <code>127.0.0.1</code> を通してくれるおかげ。</p> </blockquote> <p>どっかで聞いたところによると…</p> <p>playwright-cli（<code>@playwright/cli</code>）には、起動済みの Chrome にアタッチしてそのセッションをそのまま操作できる機能があり、SAML/SSO 認証済みのページを操作したいときにサンドボックスの Chrome にログインし直す手間が省ける、とのことです。</p> <p>確かに便利そうなんだけど、この機能を WSL2 から使おうとしてハマったので記録しておきます。</p> <p>ほんと大体ハマってんな俺。</p> <h2 id="やりたいこと">やりたいこと</h2> <p>WSL 上の playwright-cli から、ホスト Windows で開いている Chrome（ログイン済み）にアタッチして操作する。</p> <h2 id="前提">前提</h2> <ul> <li>WSL2 ネットワークモード：ミラーモード（<code>networkingMode=mirrored</code>）</li> <li>playwright-cli：<code>0.1.9</code>（<code>mise use --global npm:@playwright/cli@latest</code> でインストール） <ul> <li><a href="https://daitai.dev/posts/mise-npm-cache/">前回</a>自宅でハマったので職場では間違えなかった</li> </ul> </li> </ul> <h2 id="チャンネル名--cdpchromeは-wsl-から使えない">チャンネル名（<code>--cdp=chrome</code>）は WSL から使えない</h2> <p>そもそもこれが駄目だった。</p> <p>以下は Claude さんの解説です。</p> <p>playwright-cli には <code>microsoft/playwright#40177</code>（2026年4月マージ）で、チャンネル名でアタッチできる機能が追加された。</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">playwright-cli attach --cdp<span class="o">=</span>chrome </span></span></code></pre></div><p>これは <code>DevToolsActivePort</code> ファイルを読んでポートを自動解決する仕組みなのだが、WSL では動かない。</p> <p>原因は <code>process.platform</code>。WSL 上では <code>linux</code> になるため、スクリプトは <code>~/.config/google-chrome/DevToolsActivePort</code>（Linux のパス）を探しに行く。ホスト Windows の Chrome が書き込むのは <code>%LOCALAPPDATA%\Google\Chrome\User Data\DevToolsActivePort</code> なので、当然見つからない。</p>