ChroPath

ChroPath是一款功能强大的浏览器插件，专为前端开发者设计，用于生成和验证XPath和CSS选择器。这款插件能够轻松嵌入Chrome和Firefox等主流浏览器，为开发者提供了一种高效的方式来定位网页元素。通过ChroPath，用户可以直接在浏览器界面上右键点击目标元素，快速生成精确的选择器，无需手动编写，大大提高了开发效率。

软件教程

怎么使用

1. 右键单击​​网页，然后单击检查。

2. 在元素选项卡的右侧，单击 ChroPath 选项卡。请参考附件截图。

3. 生成选择器，检查元素或点击任意DOM节点，会生成唯一的相对XPath/绝对XPath/CSS选择器/linkText/partialLinkText。

4. 要评估 XPath/CSS，请键入 XPath/CSS 查询并按 pss 回车键。

当您输入时，它将在 DOM 中查询相关元素/节点。您可以按顺序出现查看匹配的节点和节点值。周围出现绿色轮廓以突出显示第一个匹配元素，并在网页中以蓝色显示。

5. 如果您将鼠标悬停在 ChroPath 选项卡中的任何匹配节点上，绿色/蓝色虚线轮廓将转换为点状橙红色以突出显示网页中的相应元素。

6. 如果找到的元素不在网页的可见区域中，则鼠标悬停在 ChroPath 面板中的已找到节点上将在可见区域中滚动该元素，并带有橙色红色虚线轮廓。

7. 如果找到的元素未突出显示但可见，则将鼠标悬停在 ChroPath 选项卡上的匹配节点上，它将突出显示带有橙色红色虚线轮廓的元素。

8. 单击复制图标复制定位器。

9. 如果要编辑任何定位器，请单击编辑图标。

更改日志

新特性：

1. 所有可能的定位符，如 id、className、name、xpath 等以及出现次数。

2. SVG 元素和 SVG 子元素的唯一相对和绝对 XPath。

3. iframe xpath 和元素 xpath。

4. ChroPath 将建议用户选择器的相对 xpath，即当用户将在 CP 中验证选择器时，CP 将为第一个匹配节点建议唯一的相对 xpath。

5. 带有标签的自动化命令。编辑命令不再浪费时间。

6. 动态 id/class 警报、有意义的错误消息等等。

7.重置按钮设置所有默认配置。

8. ChroPath 会将用户属性和pdefined 命令保存在本地配置中，以便用户下次打开CP 时，用户无需浪费时间，可以自动获取上次设置的配置。

9. 从 ChroPath 选项卡本身复制所有记录的选择器/步骤，无需下载 xls。

10. 生成带和不带文本的 XPath 的选项。

11. ChroPath 工作室。

12.智能维护。

软件特色

用户界面功能-

1.现在ChroPath给出了彩色的相对xpath。

2. Delete选项代替一一删除。

iframe功能-

*仅支持那些具有相同src的iframe。

1.如果元素在iframe中，则它将以橙色虚线轮廓突出显示第一个匹配的元素。

2.还将在ChroPath选项卡的输入框中添加一个 if ..”图标，以明确表示该元素位于iframe中。

3.如果要验证iframe内的选择器，请首先检查该iframe内的任何元素，以获取iframe的DOM，然后验证选择器。

4.同样，如果您要验证iframe外部元素的任何选择器，请首先检查iframe外部的任何元素，以便它获得顶级DOM，然后验证选择器。

动态ID支持-

1.要生成不带id的相对xpath，请取消选中相对xpath行中的复选框。

2.要生成具有ID的相对xpath，请选中该复选框。

开/关按钮-

1.如果您不想生成选择器，请关闭 ChroPath”选项卡中的可用按钮。

2.打开按钮以再次启用ChroPath。

黑暗主题

1.要使用深色主题，请转到devtools设置。

2.将主题从浅色更改为深色。