Как скопировать объект из инспектора Chrome в код JavaScript

Быстрый ответ

Чтобы клонировать объект с использованием инструментов разработки Chrome, воспользуйтесь функцией copy():

1. Откройте консоль разработчика, нажав клавишу F12.
2. Переходите на вкладку "Консоль".
3. Выполните команду copy(myObject).
4. Вставьте скопированный фрагмент туда, где это необходимо.

Пример:

const data = { user: "Coder", score: 100 }; 
copy(data);

Управление циклическими ссылками

Для работы с объектами, имеющими циклические ссылки, что вызывает проблемы при использовании JSON.stringify(), вы можете использовать функцию замены.

Пример:

function replacer(key, value) {
  if (value === window) return "window";
  return value;
}

const data = { user: "Coder", score: 100 };
data.self = data; 

copy(JSON.stringify(data, replacer));

Тонкости с глобальной переменной

Чтобы упростить доступ к объекту, его можно сохранить в качестве глобальной переменной в инструментах разработки:

1. Найдите объект на вкладке "Элементы" или "Консоль".
2. Кликните по нему правой кнопкой мыши и выберите "Сохранить как глобальную переменную".
3. Теперь объект доступен под автоматически присвоенным именем, например temp1.

Визуализация

Преобразуем выбранный объект в код:

1. Выберите объект.
2. Кликните правой кнопкой мыши и выберите "Копировать" → "Копировать как JS".
3. Объект теперь доступен в буфере обмена для повторного использования в формате кода.

Пример преобразования:

Исходный объект:

{
  name: "Инспектор Гаджет",
  gadgets: ["вертолетная шляпа", "пружинистые ботинки", "выдвижные руки"]
}

После использования "Копировать как JS":

const gadgetObj = {
  name: "Инспектор Гаджет",
  gadgets: ["вертолетная шляпа", "пружинистые ботинки", "выдвижные руки"]
};

Вкладка Сеть: Ответы AJAX и API

Процесс копирования данных из AJAX или API выглядит следующим образом:

1. Перейдите на вкладку "Сеть" в инструментах разработчика.
2. Затем инициируйте сетевой запрос.
3. Найдите и выберите соответствующий запрос, затем перейдите на вкладку "Ответ" или "Предпросмотр".
4. Кликните правой кнопкой мыши и выберите "Скопировать" → "Скопировать ответ".

Пример:

copy(response);

Chrome 89+: Команда "Скопировать объект"

С версии Chrome 89 возможно использовать команду "Скопировать объект" для копирования объекта в формате JS.

Вставка данных

Чтобы использовать скопированный объект, просто вставьте его в ваши редактор кода или консоль через CTRL+V/CMD+V.

Полезные материалы

1. Руководство Stack Overflow о клонировании объектов в JavaScript.
2. Официальная документация Chrome DevTools о работе с консолью.
3. API справочник объекта console на сайте MDN Web Docs.
4. Введение в Chrome DevTools и их API для работы с командными интерфейсами.
5. Использование точек останова для отладки JavaScript в Chrome DevTools.
6. Обзор нововведений консоли в инструментах разработки Chrome 59 на видеоресурсе.