jerrychan7 · Nov 2, 2026 · Nov 2, 2026 · Nov 2, 2026
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,10 @@ All packages share one version and are released together (see DEV.md, "Releasing
 
 ## Unreleased
 
+## 0.2.0
+
+Based on Chrome 156 (156.0.8078.80).
+
 - From jsDelivr or unpkg, the probe needs no other attribute: it loads the frontend of its own version from there, and shell mode works (without the Service Worker). Shell configs from such a CDN are trusted only in the probe's package and the frontend's at that version, no longer anywhere on the CDN. `data-no-panel` goes without the panel: a page from such a CDN only debugged remotely (`data-remote`) needs it, or it now gets a panel too.
 - The docked panel is resized with a grip on the middle of its inner edge, on the page's side, in place of the bar across its whole edge: it covers neither DevTools nor more of the page than it shows, and looks the same in and out of shell mode. The undocked window keeps its bar, which moves it.
 - Device mode in shell mode, as in Chrome: DevTools lays out the page and itself, the toolbar's device button sizes the page as a device (scaled to fit) and its menu takes screenshots, docked or undocked. It sets the page's size only, not its pixel ratio, user agent or touch input. A grip against the middle of DevTools' edge, on the page's side, resizes them without covering DevTools, larger on touch screens. Outside shell mode the button is still the screencast's.

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -4,6 +4,10 @@
 
 ## Unreleased
 
+## 0.2.0
+
+基于 Chrome 156（156.0.8078.80）。
+
 - 探针来自 jsDelivr 或 unpkg 时，不用再写其他属性：它会从同一个 CDN 加载同版本的前端，外壳模式也能用（没有 Service Worker）。来自这类 CDN 时，外壳配置只信任探针所在的包和同版本的前端包，不再信任整个 CDN。新增 `data-no-panel`，不挂载面板：从这类 CDN 引入、只做远程调试（`data-remote`）的页面需要加上它，否则现在也会出现面板。
 - 停靠的面板改用内侧边缘正中、靠页面一侧的抓手调整大小，取代原来贯穿整条边的横条：它不遮挡 DevTools，也只占页面上它看得见的那一小块，外壳模式内外样式一致。浮动窗口仍保留用来移动的横条。
 - 外壳模式下新增设备模式，和 Chrome 一样：由 DevTools 排布页面和自己，工具栏上的设备按钮按设备尺寸设置页面（缩放到适合窗口），它的菜单可以截图，停靠和取消停靠时都能用。它只设置页面的尺寸，不改变像素比、UA 和触摸输入。DevTools 面板边缘正中、靠页面一侧有一个抓手，用来调整大小，不遮挡 DevTools，触屏上更大。非外壳模式下，这个按钮仍然是投屏。

diff --git a/packages/devtools-anywhere/package.json b/packages/devtools-anywhere/package.json
@@ -1,6 +1,6 @@
 {
   "name": "devtools-anywhere",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Real Chrome DevTools inside any web page, with early capture",
   "keywords": [
     "cdp",

diff --git a/packages/devtools-frontend-locales/package.json b/packages/devtools-frontend-locales/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devtools-anywhere/devtools-frontend-locales",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "UI translations of @devtools-anywhere/devtools-frontend beyond English and Chinese",
   "keywords": [
     "chrome-devtools",

diff --git a/packages/devtools-frontend/package.json b/packages/devtools-frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devtools-anywhere/devtools-frontend",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Chrome DevTools frontend built from the official sources for devtools-anywhere",
   "keywords": [
     "chrome-devtools",

diff --git a/packages/relay-core/package.json b/packages/relay-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devtools-anywhere/relay-core",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "description": "Internal: the relay logic shared by shell mode and the remote server, bundled into both",
   "license": "MIT",

diff --git a/packages/remote-server/package.json b/packages/remote-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devtools-anywhere/remote-server",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Relay that lets Chrome DevTools on one machine inspect a page running on another device",
   "keywords": [
     "cdp",

diff --git a/packages/vite-plugin/package.json b/packages/vite-plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devtools-anywhere/vite-plugin",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Vite plugin that injects devtools-anywhere in development",
   "keywords": [
     "chrome-devtools",

diff --git a/tests/e2e/real-frontend.test.ts b/tests/e2e/real-frontend.test.ts
@@ -243,9 +243,17 @@ test('the Sources panel shows source and Watch, without breakpoints or pausing c
     // asElement() is typed as a handle to any Node; the page function returns an Element or null.
     (await query('[aria-label="Add watch expression"]')).asElement() as ElementHandle<Element> | null;
   await (await waitFor(async () => laidOut(await addWatch()))).click();
+  // As in Chrome, adding a watch expression starts editing it: its prompt takes the focus. That
+  // prompt is clicked (other prompts may be in the DOM), which also gives the frontend's frame the keys.
   const prompt = async () =>
     // asElement() is typed as a handle to any Node; the page function returns an Element or null.
-    (await query('.text-prompt[contenteditable]')).asElement() as ElementHandle<Element> | null;
+    (
+      await frontend.evaluateHandle(() => {
+        let active = document.activeElement;
+        while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
+        return active?.matches('.text-prompt[contenteditable]') ? active : null;
+      })
+    ).asElement() as ElementHandle<Element> | null;
   await (await waitFor(async () => laidOut(await prompt()))).click();
   await frontend.page().keyboard.type('document.title');
   await frontend.page().keyboard.press('Enter');