Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Remote Webview Devtools/移动端webview调试New to Visual Studio Code? Get it now.
Remote Webview Devtools/移动端webview调试

Remote Webview Devtools/移动端webview调试

jackiotyu

|
435 installs
| (0) | Free
快速调试移动端webview
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

移动端webview调试

使用最新的 chrome devtools 调试移动端 webview

devtools-preview


微信h5调试方法

  1. 配置adb可执行文件路径
    • 打开配置,设置RemoteWebviewDevtools.adbPath为指定路径, 微信开发者工具上有内置的adb,windows上路径为 C:\Program Files (x86)\Tencent\微信web开发者工具\bin\adb-win\adb.exe
    • 已配置adb到全局变量可以忽略这一步
  2. 打开微信内置调试
    • 用微信访问 http://debugxweb.qq.com/?inspector=true, 可以通过插件面板的二维码工具快速扫描访问
  3. 连接安卓手机
    • 使用USB数据线连接,打开开发者模式,启用USB调试模式
    • 或者使用远程连接,参考文档
  4. 查找可调试的连接
    • 使用微信访问链接,可以通过插件面板的二维码工具生成二维码再扫描访问
    • 在插件面板上ADB连接WEBVIEW列表上刷新(可配置自动刷新)
    • 在需要调试的链接上点击,会自动开启调试面板

配置

{
    // 自动刷新列表间隔(单位:毫秒), 设置为0时禁用自动刷新, 默认为0
    "RemoteWebviewDevtools.refresh": 0,
    // adb可执行文件路径
    "RemoteWebviewDevtools.adbPath": "",
    // adb执行参数
    "RemoteWebviewDevtools.adbArgs": [],
    // 设置搜索debug页面连接的端口, 默认9222
    "RemoteWebviewDevtools.port": 9222,
    // puppeteer启动时添加参数 args https://pptr.nodejs.cn/api/puppeteer.browserlaunchargumentoptions#args
    "RemoteWebviewDevtools.puppeteer.args": [],
    // puppeteer启动时忽略参数 ignoreDefaultArgs https://pptr.nodejs.cn/api/puppeteer.launchoptions#ignoredefaultargs
    "RemoteWebviewDevtools.puppeteer.ignoreDefaultArgs": [],
}

其他功能

  • 自定义端口搜索可用连接,例如调试电脑上的chrome页面
  • 自定义拦截流程,修改devtools的各种通信数据
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft