Debugger

import { getCDPSessionForPage, Debugger } from 'playwriter'
import type { ICDPSession } from 'playwriter'

const cdp: ICDPSession = await getCDPSessionForPage({ page })
const dbg = new Debugger({ cdp })

// Enable the debugger (called automatically by other methods)
await dbg.enable()

await dbg.enable()

const breakpointId: string = await dbg.setBreakpoint({
  file: 'https://example.com/app.js',
  line: 42
})

// Conditional breakpoint - only pause when expression is true
await dbg.setBreakpoint({
  file: 'https://example.com/app.js',
  line: 42,
  condition: 'userId === 123'
})

await dbg.deleteBreakpoint({ breakpointId: 'bp-123' })

import type { BreakpointInfo } from 'playwriter'

const breakpoints: BreakpointInfo[] = dbg.listBreakpoints()
// [{ id: 'bp-123', file: 'https://example.com/app.js', line: 42 }]

export interface BreakpointInfo {
  id: string       // Breakpoint ID
  file: string     // Script URL
  line: number     // Line number (1-based)
}

import type { ScriptInfo } from 'playwriter'

// List all scripts
const scripts: ScriptInfo[] = await dbg.listScripts()

// Search for specific files
const handlers = await dbg.listScripts({ search: 'handler' })

export interface ScriptInfo {
  scriptId: string  // CDP script ID
  url: string       // Script URL
}

if (dbg.isPaused()) {
  const vars = await dbg.inspectLocalVariables()
}

import type { LocationInfo } from 'playwriter'

const location: LocationInfo = await dbg.getLocation()

console.log(location.url)          // 'https://example.com/app.js'
console.log(location.lineNumber)   // 42
console.log(location.callstack)    // [{ functionName: 'handleRequest', ... }]
console.log(location.sourceContext)
// '  40: function handleRequest(req) {
//   41:   const data = req.body
// > 42:   processData(data)
//   43: }'

export interface LocationInfo {
  url: string
  lineNumber: number
  columnNumber: number
  callstack: Array<{
    functionName: string
    url: string
    lineNumber: number
    columnNumber: number
  }>
  sourceContext: string  // Surrounding source code with current line marked
}

const vars: Record<string, unknown> = await dbg.inspectLocalVariables()
// { myVar: 'hello', count: 42, user: { id: 123, name: 'Alice' } }

const globals: string[] = await dbg.inspectGlobalVariables()
// ['myGlobal', 'CONFIG', 'API_KEY']

import type { EvaluateResult } from 'playwriter'

// When paused, can access local variables
const result: EvaluateResult = await dbg.evaluate({
  expression: 'localVar + 1'
})
console.log(result.value)

// Read a large string that would be truncated in inspectLocalVariables
const full = await dbg.evaluate({ expression: 'largeStringVar' })

export interface EvaluateResult {
  value: unknown
}

// Step over to next line (don't enter function calls)
await dbg.stepOver()

// Step into function call
await dbg.stepInto()

// Step out of current function
await dbg.stepOut()

await dbg.resume()

// Pause only on uncaught exceptions
await dbg.setPauseOnExceptions({ state: 'uncaught' })

// Pause on all exceptions (caught and uncaught)
await dbg.setPauseOnExceptions({ state: 'all' })

// Never pause on exceptions
await dbg.setPauseOnExceptions({ state: 'none' })

// Skip all node_modules
await dbg.setBlackboxPatterns({
  patterns: ['node_modules']
})

// Skip React and other frameworks
await dbg.setBlackboxPatterns({
  patterns: [
    'node_modules/react',
    'node_modules/react-dom',
    'node_modules/next',
    'webpack://',
  ]
})

// Add a single pattern
await dbg.addBlackboxPattern({ pattern: 'node_modules/lodash' })

// Remove a pattern
await dbg.removeBlackboxPattern({ pattern: 'node_modules/lodash' })

// List current patterns
const patterns: string[] = dbg.listBlackboxPatterns()

import { chromium } from 'playwright-core'
import { startPlayWriterCDPRelayServer, getCdpUrl, getCDPSessionForPage, Debugger } from 'playwriter'

const server = await startPlayWriterCDPRelayServer()
const browser = await chromium.connectOverCDP(getCdpUrl())
const page = browser.contexts()[0].pages()[0]

await page.goto('https://example.com')

const cdp = await getCDPSessionForPage({ page })
const dbg = new Debugger({ cdp })

// List available scripts
const scripts = await dbg.listScripts({ search: 'app' })
console.log('Scripts:', scripts.map(s => s.url))

// Set a breakpoint
const bpId = await dbg.setBreakpoint({
  file: scripts[0].url,
  line: 42,
  condition: 'userId > 0'
})

// Trigger the code path (e.g., click a button)
await page.click('button')

// Wait for breakpoint to hit
await page.waitForTimeout(1000)

if (dbg.isPaused()) {
  // Inspect current location
  const location = await dbg.getLocation()
  console.log('Paused at:', location.url, location.lineNumber)
  console.log('Call stack:', location.callstack)
  console.log('Source:\n', location.sourceContext)

  // Inspect variables
  const vars = await dbg.inspectLocalVariables()
  console.log('Local variables:', vars)

  // Evaluate expression
  const result = await dbg.evaluate({ expression: 'userId * 2' })
  console.log('Evaluated:', result.value)

  // Resume execution
  await dbg.resume()
}

// Remove breakpoint
await dbg.deleteBreakpoint({ breakpointId: bpId })

server.close()

// Break on any XHR/fetch to /api/users
await dbg.setXHRBreakpoint({ url: '/api/users' })

// Remove XHR breakpoint
await dbg.removeXHRBreakpoint({ url: '/api/users' })

// List all XHR breakpoints
const xhrBps: string[] = dbg.listXHRBreakpoints()