WeChat Embedded Browser Page Debugging

This is a simple workaround of utilizing existing debugging protocol to debug web pages of WeChat Embedded Browser.

Background

Debugging a miniapp using this tool is actually debugging a tab of the embedded browser. You can verify all targets via Protocol Monitor, and the miniapp tab (AppIndex) is already attached:

Workaround

Step 1. Follow all steps in README.md. You need to initialize one debug session via launching a miniapp. A minimal miniapp is recommended (e.g., WeChat official miniapp demo).

Step 2. In DevTools, open Protocol Monitor panel and toggle the CDP command editor:

Step 3. In CDP command editor, type in Target.getTargets, hit Send:

Step 4. In Protocol Monitor panel, find the sent CDP command, inspect the response on the right panel. Locate the browser tab you want to debug. Copy the targetId of the tab.

Step 5. In CDP command editor, type in Target.attachToTarget, type in the targetId parameter, hit Send:

All done. After these steps you have successfully attached to the tab. Please note that the Element tab will not update so you cannot use that panel to inspect the DOM tree. Also, you cannot close the miniapp since it will stop the debug session.

In addition, for miniapps that using webview tag, you can also use the same method above to attach to the WebView tab and inspect.