Is there a service to turn html into a concise visual tree with classes?

Question

HTML

Guys, tell me please. Are there plugins for text editors, browsers, or just services/programs with the following functionality. Here we have the layout of the site. It must be pulled on cms, let's say on Bitrix or Wordpress. It turns out that you need to select a header and a footer. And is there a service that, based on html, will build it in a tree form, with classes, so that you can see the structure itself clearly. And it is desirable to compare.
Let's say I took a site layout of 10 pages, uploaded it and built a short tree for each and I see where the headers and other blocks differ, especially if the service itself compares and highlights. Often the headers are the same, but they differ in a couple of classes, somewhere the page__inner--base class is added, somewhere page__inner--index. It turns out now it is necessary to look at it all. Especially if bootstrap is used with adaptive classes, like outwardly two identical blocks, and at the output they have such classes: "col-md-6 col-lg-12 mb-3 mb-md-0" and "col-md-6 col -lg-12 mt-lg-3".
As a result, you have to check the layout for each block for a long time to understand if there is a difference.
Or share your experience on how you pull the layout in such cases.

Answer 1

I have never met a service for a curved layout , the
workbench must know what it is doing the layout for, it must know the cms structure, and as for, for example, Bitrix, I have never seen a separate layout that would easily lay down on the site without jambs.
there is nothing better than a full-stack development, when you separate and do everything evenly, so that, in the same Bitrix, when you turn on the editing mode, nothing slips. so that there is no need to fence conditions, and that after changing the demo content there is no garbage in styles and events, and the content itself is displayed as it should be.

Answer 2

Is it some kind of overwhelming task to open the html file and find where the header ends? If the code is poorly formatted, there are a lot of beautifiers.
Anyway, there's a tree over there. But you can't copy elements from there. This is already rendered html, not source code