How to add UMA metrics in DevTools frontend

Decide on the metric (an enumerated histogram or an action to be logged to generic DevTools.ActionTaken histogram)

  1. For enumerated histogram (We use this when there are multiple related states that should be analyzed jointly. For example, we might want to know the source of an action like where it is performed from)
    1. Choose a name for the new histogram prefixed with DevTools, for example, DevTools.ColorPickerOpenedFrom.
    2. Decide on the values for the different enums you want to log, for example, StylesPane and SourcesPanel for DevTools.ColorPickerOpenedFrom histogram.
  2. For actions
    1. Decide on the name of the action, for example, DeviceModeEnabled.

Tracking an enumerated histogram

  1. Implement metric collection in devtools-frontend and create a CL. (Example CL)
    1. Add the new histogram name to the EnumeratedHistogram enum.
    2. Add the same histogram name to the EnumeratedHistogram object in devtools_compatibility.js file.
    3. Create a new function in UserMetrics.ts with an enum parameter that corresponds to the possible values like colorPickerOpenedFrom(type: ColorPickerOpenedFrom): void that calls InspectorFrontendHostInstance.recordEnumeratedHistogram.
    4. Call the new function from Host.userMetrics in the places that you want to log the event.
    5. Create the CL.
  2. Update histograms.xml and enums.xml in the Chromium codebase.
    1. Add a new enum in enums.xml with values corresponding to the values in the frontend with name DevTools<HISTOGRAM_NAME> and make sure that enum values 1-1 map to the values you’ve defined in the frontend.
    2. Add the new histogram definition in histograms.xml and set enum name to be the enum you‘ve defined in the 1st step. Make sure that histogram name is the same with the name you’ve used in the frontend change.
    3. Create the CL.

Tracking an action

  1. Implement metric collection in devtools-frontend and create a CL. (Example CL)
    1. Add the action you want to track to the Action enum in UserMetrics.ts.
    2. Call Host.userMetrics.actionTaken(Action.YOUR_ACTION) in the places you want to the event.
    3. Create the CL.
  2. Update enums in the Chromium side in tools/metrics/histograms/enums.xml.
    1. Add the new action to the DevToolsAction enum.
    2. Create the CL.

Metrics Dashboard

After the both CLs are landed we expect your histogram or action data to be available in UMA. For seeing them:

  • Select the channel you want to dive into.
  • Select the platforms you are interested in (for us, it is Linux, MacOS, Windows, ChromeOS and Lacros)
  • Add the metric you want to see: either the histogram name you’ve newly added DevTools.ColorPickerOpenedFrom or the generic histogram for action tracking, DevTools.ActionTaken.