Access localized strings in the DevTools frontend using the following localization calls.

i18nString

The basic API to make a string (with or without placeholder) localizable. The first argument is the string reference in UIStrings The second argument is an object for placeholders (if any)

// at the top of example.js file, after import statements

const UIStrings = {
  /**
    * @description This is an example description for my new string with placeholder
    * @example {example for placeholder} PH1
    * @example {example 2 for placeholder 2} PH2
    */
  addAnotherString: 'Another new string I want to add, with {PH1} and {PH2}',
};

message = i18nString(UIStrings.addAnotherString, {PH1: 'a placeholder', PH2: 'another placeholder'});

i18nLazyString

The i18nString function returns the translated string, with placeholders resolved. To do this, it needs access to the translated strings for the user's locale, which are not available until after DevTools has finished starting up.

Calls to i18nString in the module scope will therefore fail when the module is imported.

// Fails because i18nString runs at module-import time.
Common.Settings.registerSettingExtension({
  category: Common.Settings.SettingCategory.CONSOLE,
  title: i18nString(UIStrings.groupSimilarMessagesInConsole),
...

function notTopLevel() {
  console.log(extension.title);
}

i18nLazyString fixes this problem by providing the same API, but returning a closure that returns a LocalizedString. It can be used in top-level calls; just make sure use-sites know it's a function now.

// Works because i18nLazyString defers the loading of the translated string until later.
Common.Settings.registerSettingExtension({
  category: Common.Settings.SettingCategory.CONSOLE,
  title: i18nLazyString(UIStrings.groupSimilarMessagesInConsole),
...

// Note we need to call title() now.
function notTopLevel() {
  console.log(extension.title());
}

i18n.i18n.getFormatLocalizedString

This call returns a span element, not a string. It is used when you want to construct a DOM element with a localizable string, or localizable content that contains some other DOM element.

// Create the string in UIString
/**
*@description Message in Coverage View of the Coverage tab
*@example {reload button icon} PH1
*@example {record button icon} PH2
*/
clickTheRecordButtonSToStart: 'Click the reload button {PH1} to reload or record button {PH2} start capturing coverage.',

// Element with localizable content containing two DOM elements that are buttons
const reloadButton = UI.createInlineButton(UI.Toolbar.createActionButtonForId('coverage.start-with-reload'));
const recordButton = UI.createInlineButton(UI.Toolbar.createActionButton(this._toggleRecordAction));
message = i18n.i18n.getFormatLocalizedString(str_, UIStrings.clickTheReloadButtonSToReloadAnd, {PH1: reloadButton, PH2:recordButton });

i18n.i18n.lockedString

This call is a named cast. Use it in places where a localized string is expected but the term you want to use does not require translation. Instead of locking the whole phrase or using a placeholder-only phrase, use lockedString.

someFunctionRequiringALocalizedString(i18n.i18n.lockedString('HTTP'));