如何可视化/美化打印 HTML DOM 树?

发布于 2024-12-29 14:55:15 字数 601 浏览 1 评论 0原文

现在我可以通过 WWW::Mechanize 浏览网页并通过 HTML::TreeBuilder::XPath 通过访问 id,我剩下使用Firebug 读取 DOM 以发现 HTML 树的布局。 Mechanize 捕获的内容是非结构化 HTML,不利于人眼。

使用 Firebug 来确定我的 id 是一种典型的方法吗?一旦我获得了 id,我就可以开始了,只是我有几个 id 和带有更多 id 的页面需要追踪,我希望获得(转储、打印等)DOM 的格式化布局为了让这个发现变得更容易。尽管这是理所当然的,Firebug 也让它变得相当简单。我只是想知道我是否缺少一种更简单的方法。

交叉发布于 PerlMonks。

Now that I can navigate a Web page via WWW::Mechanize and get information via HTML::TreeBuilder::XPath by accessing an id, I am left using Firebug to read the DOM in order to discover the layout of the HTML tree. The content that Mechanize captures is unstructured HTML, not good for human eyes.

Is using Firebug to ascertain the id I am after a typical approach? Once I get the id then I'm good to go, it's just that I've got several ids and pages with more ids to chase down and I was hoping to get (dump, print, etc.) a formatted layout of the DOM in order to make that discovery easier. Though granted, Firebug makes it pretty easy, too. I'm just wondering if I am missing an easier method.

Crossposted at PerlMonks.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

强者自强 2025-01-05 14:55:15

如果您需要文本,xmllint --html --format(附带libxml2) 做得不错。

如果您想要一棵树并对其进行处理并在 GUI 中测试各种表达式,那么 Xacobeo 是您的最佳选择朋友。

Xacobeo Screenshot

注意:由于这两个工具都依赖于 libxml,因此请替换 HTML::TreeBuilder::XPathHTML::TreeBuilder::LibXML 以实现兼容性。这样,评估 XPath 也会更快。


如果您了解 Javascript/JQuery,还可以安装 FireQuery。然后,您可以在 FireBug 中测试 CSS 表达式,并将它们与通过 CSS 表达式选择 HTML 的模块一起使用,例如 Web: :查询

FireQuery 屏幕截图

If you need text, xmllint --html --format (comes with libxml2) does a decent job.

If you want a tree and mess with it and test out various expressions in a GUI, then Xacobeo is your new best friend.

Xacobeo screenshot

Note: since both those tools rely on libxml, replace HTML::TreeBuilder::XPath with HTML::TreeBuilder::LibXML for compatibility. Evaluating XPath will be faster that way, too.


If you know Javascript/JQuery, then also install FireQuery. You can then test out CSS expressions in FireBug, and use them with modules that select HTML through CSS expressions, e.g. Web::Query.

FireQuery screenshot

凹づ凸ル 2025-01-05 14:55:15

我使用 Oxygen IDE 中的 XML Developer 进行最近的 XPath 开发:
http://www.oxygenxml.com/download.html
它是一个为期 30 天的试用型工具,但您也可以搜索 XPath 可视化工具,

据我所知,它不会为您可视化树(也许有一个面板可以做到这一点)。但它为您提供了一些智能的完整功能,可以帮助您随时了解哪些节点可用。它对于 XPath 来说相当大,因为很难知道解析器枢轴真正指向哪里。

I use XML Developer from Oxygen IDE for my recent development on XPath:
http://www.oxygenxml.com/download.html
It is a 30-day trial type of tool, but you can also search for XPath visualizer

It doesn't visualize a tree for you as far as I know (maybe there's a panel doing that). But it gives you some smart complete functionally that helps you to know what nodes you have available at any point. It is pretty big for XPath because it is hard to know where the parser pivot is really pointing at.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文