Hinahayaan ka ng DOM Path Finder na i-hover ang anumang element sa isang page para ipakita ang unique na CSS selector nito, maikling selector, XPath, at ready-to-paste na querySelector snippet. I-click para i-lock ang element, pagkatapos ay mag-navigate gamit ang mga button na Parent/Child/Sibling. Mahalaga para sa mga gumagamit ng Selenium, Puppeteer, Playwright, at Cypress.
Ang pagsusulat ng mga automation test, web scraper, o bookmarklet ay nangangahulugan ng pagsusulat ng mga selector — ngunit ang pag-alam sa isang stable at unique na selector para sa isang partikular na element ay nakakapagod. Bubuksan mo ang DevTools, mag-i-inspect, magra-right-click, mag-i-copy ng selector, at aasa na ang resulta ay talagang unique at stable. Ginagawa ito ng DOM Path Finder sa isang click lang. I-activate ang tool at i-hover ang anumang element sa page — magha-highlight ito ng kulay lila habang gumagalaw ka. I-click para i-lock ito, at ang panel ay mapupuno ng apat na format ng selector: isang unique na path-based CSS selector, isang maikling selector (tag + classes o id), isang absolute XPath, at isang pre-wrapped na document.querySelector('...') snippet na handa nang i-paste sa isang script. Kapag naka-lock na, maaari kang mag-navigate sa DOM tree gamit ang mga button na Parent / First Child / Prev Sibling / Next Sibling nang hindi nawawala ang focus. Ang mga data-testid attribute ay nade-detect at binibigyan ng prayoridad kapag naroon — mainam para sa Playwright/Cypress na gumagamit sa mga ito bilang anchor. Ipinapakita rin ng tool ang tag, id, mga class, bounding size, at display/position properties para sa mabilis na konteksto.
Igalaw ang iyong mouse sa page para makita ang mga element na nagha-highlight ng lila. I-click para i-lock — hindi na kailangan ng DevTools Inspector.
Unique na CSS path, maikling selector, absolute XPath, at wrapped na querySelector snippet. Piliin kung alin ang tugma sa iyong mga tool.
Kapag naka-lock na, gamitin ang mga button na Parent / First Child / Prev / Next para gumalaw sa DOM nang hindi na kailangang pumili uli.
Ang bawat selector ay may sariling Copy button. Kunin ang format na kailangan ng iyong script at i-paste nang direkta sa iyong test o scraper.
Ipinapakita ang tag, id, mga class, laki, display, at position — mabilis na overview nang hindi na muling nag-i-inspect.
Kung ang element ay may id, ang unique na CSS ay gagamit ng #id. Kung may data-testid, ito ay ipapakita para sa paggamit sa Playwright/Cypress.
Piliin ang element na ite-test, i-copy ang selector nito, at i-paste sa iyong test code — wala nang panghuhula sa mga unique na path.
Hanapin ang structural selector para sa mga list item sa isang scraping target. Gamitin ang maikli o path-based na selector depende sa pangangailangan sa stability.
I-lock ang isang element at i-copy ang path nito para imbestigahan kung bakit hindi gumagana ang CSS — ipinapakita ng unique selector ang buong lokasyon ng element sa tree.
I-copy ang pre-wrapped na document.querySelector(...) snippet nang direkta sa DevTools Console para sa mabilis na interactive debugging.
Kapag nag-o-audit ng accessibility, gamitin ang XPath para ilagay ang mga element sa axe-core o iba pang a11y tool na nangangailangan ng XPath references.
I-click ang icon ng Path Finder sa DevSuite Pro dock. Agad na mag-a-activate ang tool sa picking mode.
Igalaw ang iyong mouse sa page — ang bawat element ay nagha-highlight ng lila habang dumadaan ka rito. Mag-scroll kung kinakailangan para mahanap ang iyong target.
I-click ang element na gusto mo. Titigil ang picker at ang panel ay mapupuno ng mga format ng selector, konteksto, at mga copy button.
Gamitin ang mga button na Parent/Child/Sibling para pinuhin ang pagpili, o i-click ang Pick Element para magsimulang muli sa hover-picking.
I-click ang Copy sa tabi ng format na kailangan mo (CSS, XPath, o querySelector). I-paste nang direkta sa iyong test, scraper, o console.
I-install ang DevSuite Pro nang libre at i-unlock ang 64+ developer tools para sa iyong browser.
