LayoutShiftAttribution

Интерфейс LayoutShiftAttribution предоставляет отладочную информацию об элементах, которые сместились.

Экземпляры LayoutShiftAttribution возвращаются в массиве при вызове LayoutShift.sources.

LayoutShiftAttribution.node Только для чтения Экспериментально

Возвращает элемент, который сместился (null, если он был удален).

LayoutShiftAttribution.previousRect Только для чтения Экспериментально

Возвращает объект DOMRectReadOnly, представляющий положение элемента до смещения.

LayoutShiftAttribution.currentRect Только для чтения Экспериментально

Возвращает объект DOMRectReadOnly, представляющий положение элемента после смещения.

LayoutShiftAttribution.toJSON() Экспериментально

Возвращает JSON-представление объекта LayoutShiftAttribution.

Следующий пример находит элемент с наибольшим значением смещения макета и возвращает элемент в этом элементе с наибольшим размером перед смещением (previousRect). Более подробная информация об этом доступна на странице Отладка Web Vitals на месте.

function getCLSDebugTarget(entries) {
  const largestEntry = entries.reduce((a, b) =>
    a && a.value > b.value ? a : b,
  );
  if (largestEntry?.sources?.length) {
    const largestSource = largestEntry.sources.reduce((a, b) => {
      const area = (el) => el.previousRect.width * el.previousRect.height;
      return a.node && area(a) > area(b) ? a : b;
    });
    if (largestSource) {
      return largestSource.node;
    }
  }
}

• Отладка смещений макета
• Отладка Web Vitals на месте