谷歌调试

斗战胜猴 · 发表于 2026-7-15 06:58:15

本帖最后由斗战胜猴于 2026-7-15 07:25 编辑

随手写的一个谷歌调试工具

桌面至少有谷歌快捷方式方可启动浏览器。

启动浏览器，如果端口已启动就是连接浏览器

如果切换标签，需要重新点击启动浏览器进行连接。

鼠标拖动鼠标捕获到浏览器即可获取selector路径和绘制元素。

元素取JSON_table 这个功能需要表格table路径的父路径才能取到，及把网页表格转json

取坐标路径是根据ai给的js脚本代码进行取的

包含功能如下

取selector路径

取xpath路径

元素_取位置和大小

元素_绘制

JS_取坐标处selector路径

var element = document.elementFromPoint(%d, %d);<br />
function getCssSelector(el) {<br />
    if (!el || el.nodeType !== Node.ELEMENT_NODE) return '';<br />
    // 顶层有id直接返回<br />
    if (el.id) return '#' + CSS.escape(el.id);<br />
<br />
    var path = [];<br />
    while (el && el.nodeType === Node.ELEMENT_NODE && el.tagName.toLowerCase() !== 'html') {<br />
        // 遇到带id的祖先，作为路径起点并终止向上遍历<br />
        if (el.id) {<br />
            path.unshift('#' + CSS.escape(el.id));<br />
            break;<br />
        }<br />
<br />
        var tagName = el.tagName.toLowerCase();<br />
        var selector = tagName;<br />
        var needNthChild = false;<br />
<br />
        // 检查是否存在同名标签兄弟<br />
        var parent = el.parentNode;<br />
        if (parent) {<br />
            var siblings = parent.children;<br />
            var hasSameTagSibling = false;<br />
            for (var i = 0; i < siblings.length; i++) {<br />
                if (siblings<i> !== el && siblings<i>.tagName.toLowerCase() === tagName) {<br />
                    hasSameTagSibling = true;<br />
                    break;<br />
                }<br />
            }<br />
<br />
            if (hasSameTagSibling) {<br />
                // 尝试用类名区分<br />
                var classSelector = '';<br />
                if (el.className && typeof el.className === 'string') {<br />
                    var classes = el.className.trim().split(/\s+/).filter(function(c) { return c !== ''; });<br />
                    if (classes.length > 0) {<br />
                        // 验证该类名组合在同名兄弟中是否唯一<br />
                        var candidate = tagName + '.' + classes.map(function(c) { return CSS.escape(c); }).join('.');<br />
                        var isUnique = true;<br />
                        for (var j = 0; j < siblings.length; j++) {<br />
                            if (siblings[j] !== el && siblings[j].tagName.toLowerCase() === tagName) {<br />
                                // 简单检查：候选选择器能否匹配该兄弟<br />
                                try {<br />
                                    if (siblings[j].matches(candidate)) {<br />
                                        isUnique = false;<br />
                                        break;<br />
                                    }<br />
                                } catch(e) { isUnique = false; break; }<br />
                            }<br />
                        }<br />
                        if (isUnique) {<br />
                            classSelector = '.' + classes.map(function(c) { return CSS.escape(c); }).join('.');<br />
                        }<br />
                    }<br />
                }<br />
<br />
                if (classSelector) {<br />
                    selector += classSelector;<br />
                } else {<br />
                    // 类名无法唯一区分，使用 :nth-child（基于childNodes的真实位置）<br />
                    needNthChild = true;<br />
                }<br />
            }<br />
        }<br />
<br />
        if (needNthChild) {<br />
            // 关键修复：用 childNodes 计算真实 nth-child 位置<br />
            var childNodes = parent ? parent.childNodes : [];<br />
            var nthIndex = 0;<br />
            for (var k = 0; k < childNodes.length; k++) {<br />
                if (childNodes[k].nodeType === Node.ELEMENT_NODE) {<br />
                    nthIndex++;<br />
                }<br />
                if (childNodes[k] === el) break;<br />
            }<br />
            selector += ':nth-child(' + nthIndex + ')';<br />
        }<br />
<br />
        path.unshift(selector);<br />
        el = el.parentNode;<br />
    }<br />
<br />
    return path.length > 0 ? path.join(' > ') : '';<br />
}<br />
if (element) { getCssSelector(element); } else { ''; }

JS_取坐标处xpath全路径