collect console.logs

Author: christian-bromann

packages/app/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@codemirror/lang-javascript": "^6.2.1",
     "@codemirror/theme-one-dark": "^6.1.2",
+    "@codemirror/view": "^6.22.0",
     "@devtools/hook": "workspace:^",
     "@iconify-json/mdi": "^1.1.54",
     "@lit/context": "^1.0.1",

packages/app/src/components/workbench.ts

@@ -13,6 +13,7 @@ import './tabs.js'
 import './workbench/source.js'
 import './workbench/actions.js'
 import './workbench/logs.js'
+import './workbench/console.js'
 import './workbench/metadata.js'
 import './browser/snapshot.js'
 
@@ -125,8 +126,8 @@ export class DevtoolsWorkbench extends Element {
         <wdio-devtools-tab label="Log">
           <wdio-devtools-logs></wdio-devtools-logs>
         </wdio-devtools-tab>
-        <wdio-devtools-tab label="Console">
-          Console tab not yet implemented!
+        <wdio-devtools-tab label="Console" active>
+          <wdio-devtools-console-logs></wdio-devtools-console-logs>
         </wdio-devtools-tab>
         <wdio-devtools-tab label="Network">
           Network tab not yet implemented!

packages/app/src/components/workbench/actions.ts

@@ -45,7 +45,7 @@ export class DevtoolsActions extends Element {
     return this.#entries.map((entry, i) => {
       if ('command' in entry) {
         return html`
-          <button>${entry.command}</button>
+          <button @click="${() => this.#highlightLine(entry.callSource)}">${entry.command}</button>
         `
       }
 
@@ -90,6 +90,13 @@ export class DevtoolsActions extends Element {
     `
   }
 
+  #highlightLine(callSource: string) {
+    const event = new CustomEvent('app-source-highlight', {
+      detail: callSource
+    })
+    window.dispatchEvent(event)
+  }
+
   #selectMutation(i: number) {
     this.#activeEntry = i
     const event = new CustomEvent('app-mutation-select', {

packages/app/src/components/workbench/console.ts

@@ -0,0 +1,52 @@
+import { Element } from '@core/element'
+import { html, css } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { consume } from '@lit/context'
+
+import { context, type TraceLog } from '../../context.js'
+
+import '~icons/mdi/chevron-right.js'
+
+const BG: Record<ConsoleLogs['type'], string> = {
+  'warn': 'editorOverviewRulerWarningForeground',
+  'info': 'editorOverviewRulerInfoForeground',
+  'error': 'editorOverviewRulerErrorForeground',
+  'log': 'panelBorder'
+}
+
+const SOURCE_COMPONENT = 'wdio-devtools-console-logs'
+@customElement(SOURCE_COMPONENT)
+export class DevtoolsConsoleLogs extends Element {
+  static styles = [...Element.styles, css`
+    :host {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      flex-direction: column;
+      padding: 5px;
+    }
+  `]
+
+  @consume({ context })
+  data: TraceLog = {} as TraceLog
+
+  render() {
+    return html`
+      ${Object.values(this.data.consoleLogs).map((log) => html`
+        <dl class="w-full flex grow-0">
+          <dt class="flex">
+            <icon-mdi-chevron-right class="text-base transition-transform block"></icon-mdi-chevron-right>
+            <span class="block bg-${BG[log.type]} rounded text-sm py-[1px] px-[5px] my-1">${log.type}</span>
+          </dt>
+          <dd class="flex justify-center items-center mx-2">${log.args}</dd>
+        </dl>
+      `)}
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [SOURCE_COMPONENT]: DevtoolsConsoleLogs
+  }
+}

packages/app/src/components/workbench/source.ts

@@ -1,14 +1,14 @@
 import { Element } from '@core/element'
 import { html, css } from 'lit'
 import { customElement } from 'lit/decorators.js'
+import { consume } from '@lit/context'
 
 import { EditorView, basicSetup } from 'codemirror'
+import type { EditorViewConfig } from '@codemirror/view'
 import { javascript } from '@codemirror/lang-javascript'
 import { oneDark } from '@codemirror/theme-one-dark'
 
-const doc = `function greet(who) {
-  return "Hello, " + who;
-}`
+import { context, type TraceLog } from '../../context.js'
 
 const SOURCE_COMPONENT = 'wdio-devtools-source'
 @customElement(SOURCE_COMPONENT)
@@ -29,20 +29,49 @@ export class DevtoolsSource extends Element {
     }
   `]
 
+  @consume({ context })
+  data: TraceLog = {} as TraceLog
+
   connectedCallback(): void {
     super.connectedCallback()
-    setTimeout(() => {
-      const container = this.shadowRoot?.querySelector('section')
-      if (!container) {
-        return
-      }
-      const editorView = new EditorView({
-        root: this.shadowRoot!,
-        extensions: [basicSetup, javascript(), oneDark],
-        doc
-      })
-      container.replaceWith(editorView.dom)
-    })
+    window.addEventListener('app-source-highlight', this.#highlightCallSource.bind(this))
+    setTimeout(() => this.#renderEditor(Object.keys(this.data.sources)[0]))
+  }
+
+  #renderEditor (filePath: string, highlightLine?: number) {
+    const source = this.data.sources[filePath]
+    if (!source) {
+      return
+    }
+
+    const container = this.shadowRoot?.querySelector('section') || this.shadowRoot?.querySelector('.cm-editor')
+    if (!container) {
+      return
+    }
+
+    const opts: EditorViewConfig = {
+      root: this.shadowRoot!,
+      extensions: [basicSetup, javascript(), oneDark],
+      doc: source,
+      selection: { anchor: 4 }
+    }
+    const editorView = new EditorView(opts)
+    container.replaceWith(editorView.dom)
+
+    /**
+     * highlight line of call source
+     */
+    const lines = [...(this.shadowRoot?.querySelectorAll('.cm-line') || [])]
+    if (highlightLine && lines.length && highlightLine < lines.length) {
+      setTimeout(() => {
+        lines[highlightLine].classList.add('cm-activeLine')
+      }, 100)
+    }
+  }
+
+  #highlightCallSource (ev: CustomEvent<string>) {
+    const [filePath, line] = ev.detail.split(':')
+    this.#renderEditor(filePath, parseInt(line, 10) + 1)
   }
 
   render() {

packages/app/src/vite-env.d.ts

@@ -2,6 +2,7 @@
 
 interface GlobalEventHandlersEventMap {
   'app-mutation-highlight': CustomEvent<TraceMutation>
+  'app-source-highlight': CustomEvent<string>
   // eslint-disable-next-line @typescript-eslint/consistent-type-imports
   'app-test-filter': CustomEvent<import('./components/sidebar/filter').DevtoolsSidebarFilter>
   'app-logs': CustomEvent<string>

packages/hook/src/index.ts

@@ -14,6 +14,12 @@ import { type CommandLog, type TraceLog, TraceType } from './types.js'
 
 let commandsLog: CommandLog[] = []
 let currentTraceId: string | undefined
+let sources = new Map<string, string>()
+
+function getBrowserObject (elem: WebdriverIO.Element | WebdriverIO.Browser): WebdriverIO.Browser {
+  const elemObject = elem as WebdriverIO.Element
+  return (elemObject as WebdriverIO.Element).parent ? getBrowserObject(elemObject.parent) : elem as WebdriverIO.Browser
+}
 
 export function setupForDevtools (opts: Options.WebdriverIO) {
   /**
@@ -39,16 +45,30 @@ export function setupForDevtools (opts: Options.WebdriverIO) {
      */
     if (command === 'deleteSession') {
       await this.pause(1000)
-      await captureTrace(this, command as keyof WebDriverCommands, [])
+      const browser = getBrowserObject(this)
+      await captureTrace(browser)
     }
   })
 
   opts.afterCommand = Array.isArray(opts.afterCommand)
     ? opts.afterCommand
     : opts.afterCommand ? [opts.afterCommand] : []
   opts.afterCommand.push(async function(this: WebdriverIO.Browser, command: keyof WebDriverCommands, args, result, error) {
+    const timestamp = Date.now()
+    const callSource = (new Error('')).stack?.split('\n').pop()?.split(' ').pop()!
+    const sourceFile = callSource.split(':').slice(0, -2).join(':')
+    const absPath = sourceFile.startsWith('file://')
+        ? url.fileURLToPath(sourceFile)
+        : sourceFile
+    if (sourceFile && !sources.has(sourceFile)) {
+      const sourceCode = await fs.readFile(absPath, 'utf-8')
+      sources.set(absPath, sourceCode.toString())
+    }
+    commandsLog.push({ command, args, result, error, timestamp, callSource: absPath })
+
     if (PAGE_TRANSITION_COMMANDS.includes(command)) {
-      await captureTrace(this, command as keyof WebDriverCommands, args, result, error)
+      const browser = getBrowserObject(this)
+      await captureTrace(browser)
     }
   })
 
@@ -75,39 +95,44 @@ async function injectScript (browser: WebdriverIO.Browser) {
   })
 }
 
-async function captureTrace (browser: WebdriverIO.Browser, command: (keyof WebDriverCommands), args: any, result?: any, error?: Error) {
-  const timestamp = Date.now()
-
+async function captureTrace (browser: WebdriverIO.Browser) {
   /**
    * only capture trace if script was injected and command is a page transition command
    */
   if (!isInjected) {
     return
   }
 
-  const [mutations, logs, pageMetadata] = await browser.execute(() => [
+  const [mutations, logs, pageMetadata, consoleLogs] = await browser.execute(() => [
     window.wdioDOMChanges,
     window.wdioTraceLogs,
-    window.wdioMetadata
+    window.wdioMetadata,
+    window.wdioConsoleLogs
   ])
 
+  if (!currentTraceId) {
+    currentTraceId = pageMetadata.id
+  }
+
   if (currentTraceId !== pageMetadata.id) {
     commandsLog = []
+    sources = new Map()
   }
 
-  commandsLog.push({ command, args, result, error, timestamp })
   const outputDir = browser.options.outputDir || process.cwd()
   const { capabilities, ...options } = browser.options as Options.WebdriverIO
   const traceLog: TraceLog = {
     mutations,
     logs,
+    consoleLogs,
     metadata: {
       type: TraceType.Standalone,
       ...pageMetadata,
       options,
       capabilities
     },
-    commands: commandsLog
+    commands: commandsLog,
+    sources: Object.fromEntries(sources)
   }
   await fs.writeFile(path.join(outputDir, `${pageMetadata.id}.json`), JSON.stringify(traceLog))
 }

packages/hook/src/types.ts

@@ -7,6 +7,7 @@ export interface CommandLog {
   result: any
   error?: Error
   timestamp: number
+  callSource: string
 }
 
 export enum TraceType {
@@ -17,6 +18,7 @@ export enum TraceType {
 export interface TraceLog {
   mutations: TraceMutation[]
   logs: string[]
+  consoleLogs: ConsoleLogs[]
   metadata: {
     type: TraceType
     id: string
@@ -25,5 +27,6 @@ export interface TraceLog {
     capabilities: Capabilities.RemoteCapability
     viewport: VisualViewport
   }
-  commands: CommandLog[]
+  commands: CommandLog[],
+  sources: Record<string, string>
 }

packages/script/src/index.ts

@@ -1,7 +1,8 @@
-import { waitForBody, parseFragment, parseDocument, log, getRef, assignRef } from './utils.js'
+import { waitForBody, parseFragment, parseDocument, log, getRef, assignRef, patchConsoleObject } from './utils.js'
 
 window.wdioCaptureErrors = []
 window.wdioDOMChanges = []
+window.wdioConsoleLogs = []
 window.wdioMetadata = {
   url: window.location.href,
   id: `wdio-trace-${Math.random().toString().slice(2)}`,
@@ -13,6 +14,8 @@ try {
   await waitForBody()
   log('body rendered')
 
+  patchConsoleObject()
+
   assignRef(document.documentElement)
   log('applied wdio ref ids')
 

packages/script/src/utils.ts

@@ -109,3 +109,18 @@ export function getRef (elem: Node) {
   }
   return (elem as Element).getAttribute('data-wdio-ref')
 }
+
+const consoleMethods = ['log', 'info', 'warn', 'error'] as const
+export function patchConsoleObject () {
+  consoleMethods.forEach((type: (typeof consoleMethods)[number]) => {
+    const orig = console[type]
+    console[type] = (...args) => {
+      window.wdioConsoleLogs.push({
+        timestamp: Date.now(),
+        type,
+        args
+      })
+      return orig(...args)
+    }
+  })
+}