Html 如何生成现有网页的布局？

我最近开始研究一些wordpress主题

我通常不得不为我的客户改变主题。大多数时候，我需要先分析主题。我知道我可以在Google Chrome中使用检查功能，但我需要一个设计工具（最好是一个Chrome扩展）来绘制我正在处理的主题的布局（由主分区）

我需要图表上主要div的名称及其类（或id）

---

有人能帮我吗？

尝试使用mozila firefox开发者版。这是分析项目的最佳方法

如果在推荐任何东西时，您能解释该工具如何满足问题中的要求，那就太好了。