WebView2 CDP Demo - Chrome DevTools Protocol Async and Sync Calls

Overview

Demonstrates cWebView2Host's Chrome DevTools Protocol (CDP) calling capabilities, showing both asynchronous and synchronous calling modes. Uses a menu bar to trigger different CDP method calls.

Project Structure

Download Source [ Note: Re-register the DLL file in the bin directory ]

Source code is available in the VBMAN2 project's demos/webview2/cdp directory.

cdp/
  ├── Form1.frm              # Main form, containing menu and CDP call logic
  ├── vbman2_webview2.vbp    # VB6 project file
  └── vbman2_webview2.vbw    # VB6 workspace file

Core Code Walkthrough

1. Declaration and Initialization (Form1.frm)

Dim WithEvents wv As cWebView2Host

Private Sub Form_Load()
    Set wv = New cWebView2Host
    wv.Initialize Me.hWnd, "https://vb6.pro"
End Sub

Uses WithEvents to receive the DevToolsProtocolResponse async response event.

2. Synchronous CDP Calls

Private Sub MenuSyncTitle_Click()
    Dim sTitle As String
    sTitle = wv.CallDevToolsProtocolMethodSync( _
        "Runtime.evaluate", _
        "{""expression"":""document.title""}")
    MsgBox "Sync Title -> " & sTitle, vbInformation
End Sub

Private Sub MenuSyncCookies_Click()
    Dim sCookies As String
    sCookies = wv.CallDevToolsProtocolMethodSync( _
        "Network.getCookies", _
        "{}")
    Debug.Print sCookies
End Sub

Synchronous calls return results directly without event handling — suitable for simple query operations.

3. Asynchronous CDP Calls

Private Sub MenuAsyncScreen_Click()
    wv.CallDevToolsProtocolMethod _
        "Page.captureScreenshot", _
        "{}", _
        "screenShot"
End Sub

Private Sub MenuAsyncDom_Click()
    wv.CallDevToolsProtocolMethod _
        "DOM.getDocument", _
        "{}", _
        "domDoc"
End Sub

The third parameter of async calls is a custom event ID, used to distinguish different calls in the response event.

4. Async Response Handling

Private Sub wv_DevToolsProtocolResponse(ByVal CustomEventId As Variant, ByVal JsonResponse As String)
    Select Case CustomEventId
        Case "screenShot"
            Debug.Print "[Async] Screenshot received"
        Case "domDoc"
            Debug.Print "[Async] DOM: " & Left(JsonResponse, 200)
        Case "pageUrl"
            Debug.Print "[Async] URL: " & JsonResponse
    End Select
End Sub

Feature Description

1. Synchronous CDP Calls

   • CallDevToolsProtocolMethodSync blocks waiting for results
   • Directly use function return value to get response
   • Suitable for fast operations like Runtime.evaluate, Network.getCookies

2. Asynchronous CDP Calls

   • CallDevToolsProtocolMethod returns immediately; results obtained via events
   • Use CustomEventId to distinguish responses from different calls
   • Suitable for time-consuming operations like Page.captureScreenshot

3. CDP Methods Demonstrated

   • Runtime.evaluate: Execute JS expressions
   • Network.getCookies: Get cookies
   • Page.captureScreenshot: Page screenshot
   • DOM.getDocument: Get DOM document
   • Browser.getVersion: Get browser version

Technical Notes

1. Synchronous calls use Sleep + DoEvents, which does not freeze the VB6 form message loop
2. Async calls require WithEvents declaration to receive the DevToolsProtocolResponse event
3. CustomEventId is of Variant type, can be a string or number, used to match requests and responses
4. CDP parameters must be valid JSON strings; empty parameters pass `"{}"

Use Cases

1. Page screenshot and save
2. Get HttpOnly cookies
3. Deep DOM operations (bypassing JS layer)
4. Network request interception and modification
5. Browser performance analysis

Extension Suggestions

1. Combine CDP screenshots with a timer for automated inspection screenshots
2. Use Network.setExtraHTTPHeaders to inject custom request headers
3. Use DOM.querySelector + DOM.setAttributeValue for deep DOM attribute modifications