feat(devtools): catch events

Author: Akryum

packages/runtime-core/src/componentEmits.ts

@@ -13,6 +13,7 @@ import { callWithAsyncErrorHandling, ErrorCodes } from './errorHandling'
 import { warn } from './warning'
 import { normalizePropsOptions } from './componentProps'
 import { UnionToIntersection } from './helpers/typeUtils'
+import { devtoolsComponentEmit } from './devtools'
 
 export type ObjectEmitsOptions = Record<
   string,
@@ -67,6 +68,10 @@ export function emit(
     }
   }
 
+  if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
+    devtoolsComponentEmit(instance, event, args)
+  }
+
   let handlerName = `on${capitalize(event)}`
   let handler = props[handlerName]
   // for v-model update:xxx events, also trigger kebab-case equivalent

packages/runtime-core/src/devtools.ts

@@ -14,7 +14,8 @@ const enum DevtoolsHooks {
   APP_UNMOUNT = 'app:unmount',
   COMPONENT_UPDATED = 'component:updated',
   COMPONENT_ADDED = 'component:added',
-  COMPONENT_REMOVED = 'component:removed'
+  COMPONENT_REMOVED = 'component:removed',
+  COMPONENT_EMIT = 'component:emit'
 }
 
 interface DevtoolsHook {
@@ -70,3 +71,18 @@ function createDevtoolsComponentHook(hook: DevtoolsHooks) {
     )
   }
 }
+
+export function devtoolsComponentEmit(
+  component: ComponentInternalInstance,
+  event: string,
+  params: any[]
+) {
+  if (!devtools) return
+  devtools.emit(
+    DevtoolsHooks.COMPONENT_EMIT,
+    component.appContext.app,
+    component.uid,
+    event,
+    params
+  )
+}