wellm scope是一个CSS分析工具,它采用创新的方法来揭示如何将网页组合在一起。它允许您只需单击网页的元素并显示底层代码,就可以交互式地浏览和分析(x)HTML和CSS。更重要的是,它基于WebKit框架,safari使用的渲染引擎相同。当然,您可以使用Firefox WebDeveloper扩展或Safari的Web检查器来探索和调试(x)HTML和CSS。但它们是一种不同的、不太令人满意的体验,即使他们是自由的。

用户界面由三个主要区域组成:

  • Web视图–像浏览器一样显示网页,,
  • HTML视图–概述网页的结构和(x)HTML标记
  • CSS视图–显示CSS规则和层叠。

视图截图

使用“选择模式”菜单项(从“视图”菜单)在浏览器模式和选择模式之间切换。虽然浏览器模式很方便,你将把大部分时间花在选择模式上。这就是为什么二甲苯示波器是一个如此强大的检查员。在选择模式下,在Web视图中单击一个Web页面元素,将用格式框以视觉方式突出显示该元素,并在其他视图中仅显示相应的(x)HTML标记和适用的CSS规则。此格式框显示应用于元素的边距和填充规则。

格式框的屏幕抓取

在HTML视图中,您可以导航文档的(x)HTML树结构,就像在显示为列的查找器窗口中导航一样。在层次结构中选择一个元素只显示与该元素对应的(x)HTML标记,并在Web视图中突出显示该元素,使您能够专注于一段特定的代码。代码可以以多种样式显示,包括块过滤样式,突出显示页面结构,而不让细节分散注意力。

块过滤样式突出显示的屏幕抓取

在CSS视图中,即使对于CSS规则可能来自多个文件和/或风格元素或属性。它处理得很优雅@进口样式表和突出显示著名的过滤黑客。

层叠菜单的屏幕抓取

二甲苯范围聚集了所有的规则并决定了级联,就像一个浏览器。适用的CSS规则按特定性顺序显示,重写的CSS属性变暗以提高清晰度。你不再需要在你的头脑中解析和可视化级联。您甚至可以在CSS视图中调整现有的CSS值并查看其影响。

CSS视图的屏幕抓取

但是等一下,还有更多

如果基础还不够,木质部的范围还有一些,隐藏的不太明显的特征:

  • 在怪物的网页上工作?使用选择器列表中的选择器匹配或智能组来筛选(x)HTML和CSS。选择器匹配显示与该选择器匹配的所有(x)HTML元素的路径。智能组将CSS规则过滤为预定义的分组,如布局或版式。
  • 想从浏览器快速跳转到二甲苯范围吗?创建一个方便的书签,将URL直接发送到二甲苯范围。
  • 不喜欢显示(x)HTML或CSS的默认格式?直接编辑格式化模板,因为CSS被烘焙到二甲苯作用域的核心并用于格式化。
  • 想拦截(x)个HTML或CSS片段吗?使用HTML窗格中的“复制”菜单项或控件单击CSS窗格以获取您正在查看的内容。
  • 对老鼠不耐烦?使用键盘从HTML视图中的(x)HTML树驱动二甲苯范围。
  • 有新的英特尔Mac吗?运行本机。二甲苯范围是一个普遍的应用。

可以改进吗??

尽管您可以轻松地更改CSS值并立即在Web视图中看到效果,二甲苯范围不是CSS编辑器。不能直接添加或删除选择器或规则。当它与您选择的(x)HTML和CSS编辑器集成时,添加一个集成的特性或提供一个配套的应用程序来实现这一点,对于已经很可靠的应用程序来说是一个极好的改进。

你在等什么??

不管你对(x)HTML和CSS的掌握程度如何,二甲苯范围是一个宝石,应该在每个网站开发人员的工具包。如果你仍然怀疑,那就下载10天免费试用版,自己试驾吧。但是在我们的试驾之后,我们认为Mell Scope可以让您成为一个更快乐、更高效的Web开发人员。

评级