Сбор полного пути иерархии до элемента в Chrome DevTools

Сбор полного пути иерархии до элемента в Chrome DevTools

В Chrome DevTools есть несколько способов получить полный путь иерархии до элемента с классами:

1. Использование консоли JavaScript

Введите следующую команду:

Выберите элемент в DevTools (через Inspector)

Перейдите на вкладку Console

function getElementHierarchy(el) {
  let path = [];
  while (el && el !== document.body) {
    let selector = el.tagName.toLowerCase();
    if (el.id) {
      selector += `#${el.id}`;
    }
    if (el.className && typeof el.className === 'string') {
      selector += `.${el.className.split(' ').join('.')}`;
    }
    path.unshift(selector);
    el = el.parentNode;
  }
  return path.join(' > ');
}

// Для текущего выделенного элемента
getElementHierarchy($0);Code language: JavaScript (javascript)

2. Копирование CSS-селектора

1. Правой кнопкой на элементе в Inspector
2. Выберите «Copy» → «Copy selector»
3. Получите что-то вроде: body > div.container > div.row > div.col-md-8 > h1

3. Расширенный путь с классами

Для более детального пути с классами:
function getDetailedElementPath(el) {
  let path = [];
  while (el && el.nodeType === Node.ELEMENT_NODE) {
    let entry = el.tagName.toLowerCase();
    if (el.id) entry += `#${el.id}`;
    if (el.className && typeof el.className === 'string') {
      entry += `.${el.className.trim().replace(/\s+/g, '.')}`;
    }
    path.unshift(entry);
    el = el.parentNode;
  }
  return path.join(' > ');
}

// Использование для выделенного элемента
getDetailedElementPath($0);Code language: JavaScript (javascript)

4. Использование расширения для Chrome

Можно установить расширение, например «XPath Helper» или «SelectorsHub», которые предоставляют дополнительные возможности для построения путей к элементам.

Пример вывода

Результат может выглядеть так:

html > body#home.page-template > div#page.site > div#content.site-content > main#main.site-main > article#post-123.post > div.entry-content > div.wp-block-columns > div.wp-block-column > h2.has-text-colorCode language: CSS (css)

Этот путь показывает полную иерархию от html до целевого элемента с указанием тегов, ID и классов.

В консоли Chrome длинные пути могут обрезаться. Вот несколько способов получить полный путь без обрезки:

1. Использование console.dir или console.table

function getFullElementPath(el) {
  let path = [];
  while (el && el.nodeType === Node.ELEMENT_NODE) {
    let entry = {
      tag: el.tagName.toLowerCase(),
      id: el.id || null,
      classes: el.className && typeof el.className === 'string' 
        ? el.className.trim().split(/\s+/) 
        : []
    };
    path.unshift(entry);
    el = el.parentNode;
  }
  return path;
}

// Вывод в консоль без обрезки
console.table(getFullElementPath($0));Code language: JavaScript (javascript)

2. Вывод с переносами строк

javascript

function getElementPathMultiline(el) {
  let path = [];
  while (el && el.nodeType === Node.ELEMENT_NODE) {
    let selector = el.tagName.toLowerCase();
    if (el.id) selector += `#${el.id}`;
    if (el.className && typeof el.className === 'string') {
      selector += `.${el.className.trim().replace(/\s+/g, '.')}`;
    }
    path.unshift(selector);
    el = el.parentNode;
  }
  return path.join(' >\n ');
}

console.log(getElementPathMultiline($0));Code language: JavaScript (javascript)

3. Копирование в буфер обмена

javascript

function copyElementPathToClipboard(el) {
  let path = [];
  while (el && el.nodeType === Node.ELEMENT_NODE) {
    let selector = el.tagName.toLowerCase();
    if (el.id) selector += `#${el.id}`;
    if (el.className && typeof el.className === 'string') {
      selector += `.${el.className.trim().replace(/\s+/g, '.')}`;
    }
    path.unshift(selector);
    el = el.parentNode;
  }
  const fullPath = path.join(' > ');
  navigator.clipboard.writeText(fullPath).then(() => {
    console.log('Путь скопирован в буфер обмена:\n', fullPath);
  });
}

copyElementPathToClipboard($0);Code language: JavaScript (javascript)

4. Альтернативный вывод (без обрезки)

javascript

function printFullElementPath(el) {
  let path = [];
  while (el && el.nodeType === Node.ELEMENT_NODE) {
    let selector = el.tagName.toLowerCase();
    if (el.id) selector += `#${el.id}`;
    if (el.className && typeof el.className === 'string') {
      selector += `.${el.className.trim().replace(/\s+/g, '.')}`;
    }
    path.unshift(selector);
    el = el.parentNode;
  }
  
  // Вывод по частям
  const chunkSize = 5;
  for (let i = 0; i < path.length; i += chunkSize) {
    const chunk = path.slice(i, i + chunkSize);
    console.log(chunk.join(' > ') + (i + chunkSize < path.length ? ' >' : ''));
  }
}

printFullElementPath($0);Code language: JavaScript (javascript)

Эти методы помогут вам увидеть полный путь без обрезки:

1. console.table выводит структурированные данные
2. Переносы строк делают путь читаемым
3. Копирование в буфер позволяет вставить куда нужно
4. Постепенный вывод частями гарантирует, что ничего не обрежется

Вот модифицированная версия функции, которая выводит все элементы в иерархии, включая те, у которых нет классов или ID:

function printFullElementPath(el) {
  let path = [];
  while (el && el.nodeType === Node.ELEMENT_NODE) {
    let selector = el.tagName.toLowerCase();
    if (el.id) {
      selector += `#${el.id}`;
    }
    if (el.className && typeof el.className === 'string' && el.className.trim() !== '') {
      selector += `.${el.className.trim().replace(/\s+/g, '.')}`;
    }
    path.unshift(selector);
    el = el.parentNode;
  }

  console.log(path.join(' > '));
}

printFullElementPath($0);Code language: JavaScript (javascript)

Ключевые изменения:

1. Теперь выводятся все элементы цепочки, даже если у них нет классов или ID
2. Для элементов без классов добавляется только имя тега
3. Для элементов с ID добавляется #id
4. Для элементов с классами добавляются все классы через точку

Пример вывода:

html > body > div#main.container > div.row > div > section > h1.titleCode language: CSS (css)

Где:

• html, body, div, section — элементы без классов/ID
• div#main.container — элемент с ID и классами
• h1.title — элемент с классом, но без ID

Альтернативный вариант с более подробным выводом:

function printFullElementPathDetailed(el) {
  let path = [];
  while (el && el.nodeType === Node.ELEMENT_NODE) {
    let info = {
      tag: el.tagName.toLowerCase(),
      id: el.id || null,
      classes: el.className && typeof el.className === 'string' 
               ? el.className.trim().split(/\s+/).filter(c => c) 
               : []
    };
    path.unshift(info);
    el = el.parentNode;
  }

  path.forEach(item => {
    let output = item.tag;
    if (item.id) output += `#${item.id}`;
    if (item.classes.length) output += `.${item.classes.join('.')}`;
    console.log(output);
  });
}

printFullElementPathDetailed($0);Code language: JavaScript (javascript)

Этот вариант выводит каждый элемент цепочки на отдельной строке с явным указанием наличия/отсутствия атрибутов.