בודק בוררי CSS

איך פועל בודק בוררי ה-CSS

מה הכלי עושה

בודק בוררי ה-CSS מעריך בוררי CSS מול קלט HTML ומדגיש חזותית את כל האלמנטים שתואמים. מדביקים או מקלידים HTML בפאנל אחד, מזינים בורר CSS, ורואים מיד אילו אלמנטים תואמים יחד עם ספירה של סך ההתאמות. זה מספק משוב מיידי על ספציפיות הבורר והטווח שלו בלי צורך לפתוח את DevTools של הדפדפן או לשנות דף חי.

מקרי שימוש נפוצים למפתחים

מפתחי פרונטאנד משתמשים בכלי הזה כדי ליצור בוררים מדויקים לעיצוב, לבדוק בוררי סקרייפינג מול HTML לדוגמה לפני כתיבת קוד חילוץ, ולנפות באגים מדוע כלל CSS אינו מכוון לאלמנטים המיועדים. מהנדסי QA מאמתים בוררי Cypress או Playwright מול צילומי מצב של דפים. זה שימושי גם לכתיבת כללי חילוץ תוכן עבור קוראי RSS, מנתחי אימיילים או סקריפטים לאוטומציה של דפדפן ללא ממשק (headless).

פורמטי נתונים, טיפוסים או וריאנטים

הכלי תומך במלוא מפרט CSS Selectors Level 3, כולל בוררי סוג, בוררי class ו-ID, בוררי מאפיינים עם אופרטורים ([attr^=value], [attr$=value]), פסאודו-מחלקות (:nth-child, :not, :first-of-type), קומבינטורים (צאצא, ילד >, אח סמוך +, אח כללי ~), ופסאודו-אלמנטים (::before, ::after). בוררים מורכבים וביטויי בוררים (מופרדים בפסיקים) נתמכים במלואם.

מלכודות נפוצות ומקרי קצה

התאמת בוררי CSS תלויה במבנה ה-DOM כפי שהוא מפוענח, ולא בטקסט ה-HTML הגולמי — תגיות שלא נסגרו, אלמנטים משתמעים (tbody), ותיקון שגיאות של הדפדפן יכולים לגרום לכך שה-DOM בפועל יהיה שונה ממה שרואים במקור. פסאודו-אלמנטים (::before, ::after) אינם צמתי DOM אמיתיים ולא ניתן לבחור אותם באמצעות querySelector. קידומות namespace בתוכן XML/SVG דורשות טיפול מיוחד. בוררים ספציפיים מדי שעובדים על HTML לדוגמה עלולים להישבר בדפי פרודקשן עם סימון מעט שונה.

מתי להשתמש בכלי הזה לעומת קוד

השתמשו בכלי הדפדפן הזה לפיתוח אינטראקטיבי של בוררים ולאימות מהיר מול קטעי HTML. עבור סקרייפינג לפרודקשן או אוטומציית בדיקות, השתמשו בבדיקת הבוררים המובנית של המסגרת שלכם (Playwright's page.locator, Puppeteer's page.$) שרצה מול ה-DOM המרונדר בפועל עם הרצת JavaScript, תוכן דינמי, מעבר ב-shadow DOM, וטיפול ב-iframe — דברים שהתאמה ל-HTML סטטי אינה יכולה לשחזר.