הוסף את התוסף ל-Chrome
- פתח את חנות האינטרנט של Chrome וחפש את תוסף "DevSuite Pro".
- לחץ על "הוסף ל-Chrome" ואז אשר בלחיצה על "הוסף תוסף" בחלון הקופץ.
64+ כלים חזקים לבדיקה, מדידה, לכידה, ניתוח ועיצוב דפי אינטרנט ישירות בדפדפן שלך.
ההתחלה פשוטה. התקן את התוסף, פתח כל דף אינטרנט וגש ל-64+ כלי פיתוח מהחלון הקופץ או מהדוק הצף. אין צורך בהגדרות.
DevSuite Pro מציע 64+ כלי פיתוח לבדיקה, מדידה, עיצוב וניתוח דפי אינטרנט. שפר את תהליך העבודה שלך עם תכונות חזקות הבנויות ישירות בדפדפן שלך.
רחף מעל כל אלמנט כדי לצפות ולערוך את סגנונות ה-CSS שלו בזמן אמת, מה שמקל על איתור באגים וכוונון עיצובים.
למידע נוסף →לחץ על כל אלמנט כדי לבדוק את המאפיינים, המידות, הריווח, הגופנים והצבעים שלו. הבן את מבנה הדף מיד ללא פתיחת כלי הפיתוח של הדפדפן.
למידע נוסף →מדוד מרחקים, בדוק יישור והוסף סרגלים ומדריכים מדויקים בפיקסלים על כל דף אינטרנט כדי להבטיח שהעיצובים שלך מיושרים בצורה מושלמת.
למידע נוסף →צלם צילומי מסך של דף שלם או אזור נראה של כל דף אינטרנט והורד אותם מיד, מושלם לשיתוף עיצובים ודיווח על באגים.
למידע נוסף →צפה בתצוגה מקדימה של כל דף אינטרנט בגדלי מסך ורזולוציות מכשיר שונים כדי לבדוק עיצוב רספונסיבי מבלי לעזוב את הדפדפן.
למידע נוסף →בדוק וערוך סגנונות CSS בזמן אמת
CSS Inspector הוא כלי פיתוח רב עוצמה המאפשר לך לצפות במאפייני ה-CSS המלאים של כל אלמנט פשוט על ידי העברת העכבר מעליו…
בדיקה ושליטה ב-CSS Animations בזמן אמת
Animation Inspector מעניק לך שליטה מלאה על כל CSS animation ו-transition הפועלים בכל דף אינטרנט.
המר CSS של כל אלמנט ל-Tailwind Utility Classes
Copy as Tailwind גושר על הפער בין עיצוב ויזואלי לקוד Tailwind CSS.
הצג את מבנה ה-layout המלא של כל דף
מצב outline בלבד מוסיף מסגרות outline עם קידוד צבעים לכל רכיב HTML בדף אינטרנט, ומעניק לך מבט X-ray מיידי על מבנ�…
קבל classes של Tailwind מקוטלגות לכל רכיב
Tailwind Helper בודק כל רכיב בדף אינטרנט ומייצר פירוט מקיף ומקוטלג של classes של Tailwind CSS utility תואמות. בשונ�…
תצוגת עץ HTML ויזואלית על כל דף אינטרנט
Page Outliner מציג את מבנה ה-DOM המלא של כל דף אינטרנט כשכבת עץ ויזואלית — ישירות על הדף עצמו. כל אלמנט HTML מקבל תווית…
זהה רכיבי React, Vue, Angular ו-Svelte בכל אתר
Component Detector מזהה אוטומטית איזה framework frontend אתר משתמש בו וחושף את עץ הרכיבים המלא שלו. ראה שמות רכיבי…
Drag & Drop למיקום מחדש של כל אלמנט בדף
הזזת אלמנט מאפשרת לך ללחוץ על כל אלמנט בדף אינטרנט ולגרור אותו פיזית למיקום חדש. בדוק חלופות layout, צור prototype…
הסר או החלף נראות של כל אלמנט
מחיקה/הסתרת אלמנט מאפשרת לך להסיר או להסתיר זמנית כל אלמנט בדף אינטרנט בלחיצה אחת. נקה דפים לצילומי מסך, הסר פרסומות…
ייצא כל אלמנט כ-HTML, CSS, או JSON
ייצוא אלמנט מאפשר לך ללחוץ על כל אלמנט בדף אינטרנט ולייצא את המבנה המלא שלו בשלושה פורמטים: תגיות HTML גולמיות עם כל…
צור רכיבי React, Vue ו-Svelte מכל אלמנט
העתקת קוד רכיב הופכת כל אלמנט בדף אינטרנט לקובץ רכיב נקי ומוכן לייצור עבור הפריימוורק שלך. לחץ על אלמנט וקבל רכיב React…
צלם את האזור הגלוי או את הדף המלא
צילום מסך לוכד תמונות באיכות גבוהה של כל דף אינטרנט בשני מצבים: אזור גלוי (בדיוק מה שאתה רואה בחלון הדפדפן) או דף מלא…
הצג, בחר והורד את כל התמונות מכל דף אינטרנט
חילוץ תמונות סורק כל דף אינטרנט ומציג כל תמונה בגלריה שניתן לעיין בה.
מצא, תצוגה מקדימה והורד כל SVG בכל דף
SVG Grabber מאתר כל SVG בדף אינטרנט — אלמנטי SVG מוטבעים, הפניות לקבצי .svg חיצוניים, SVG sprites (תבניות use/symbol)…
החלף כל תמונה בדף עם תמונה משלך
Image Replacer מאפשר לך ללחוץ על כל תמונה בדף אינטרנט ולהחליפה בשלך — על ידי העלאת קובץ מקומי או הדבקת URL של תמונ�…
צור QR Code לכל URL או טקסט באופן מיידי
מחולל QR Code יוצר אוטומטית QR code סריק עבור ה-URL של הדף הנוכחי — או עבור כל URL או טקסט מותאם אישית שתזין. בחר את…
סרגלים, קווי מנחה ומדידות מדויקות לפיקסל על כל דף
סרגל דף מוסיף סרגלים בסגנון Photoshop וקווי מנחה גררים לכל דף אינטרנט.
תצוגה מקדימה של מספר viewport מכשירים בו-זמנית
Responsive Viewer מציג את דף האינטרנט הנוכחי מרונדר במספר גדלי viewport של מכשירים זה לצד זה — הכל על מסך אחד. ראה כיצד…
מדוד מרחקים מדויקים ב-pixel בין כל שני אלמנטים
Measure Distance מאפשר ללחוץ על כל שני אלמנטים בדף אינטרנט ולראות מיידית את מרחק ה-pixel המדויק ביניהם — אופקית (X)…
הדמיית כל stacking context ושכבת z-index
בודק ה-Z-Index חושף את סדר הערימה המלא של כל אלמנט בדף האינטרנט.
בחינת פריסות CSS Grid ו-Flexbox עם שכבות-על ויזואליות
ויזואליזר Grid/Flex מזהה כל מיכל CSS Grid ו-Flexbox בדף האינטרנט ומרנדר את מבנה הפריסה שלהם כשכבות-על צבעוניות ישירות…
סימולציית נקודות חמות של תשומת לב משתמשים בכל דף
Heatmap Simulator מייצר heatmap חזוי של תשומת לב לכל דף אינטרנט, על בסיס דפוסי מחקר UX מבוססים — התנהגות קריא�…
ניקוי סלקטיבי של cache, cookies, localStorage ו-sessionStorage
Clear Browsing Data מעניק למפתחים דרך מהירה וסלקטיבית לנקות סוגים ספציפיים של נתוני גלישה עבור האתר הנוכחי — cache…
זיהוי כל טכנולוגיה מאחורי כל אתר
Site Stack סורק כל אתר ומזהה את מחסנית הטכנולוגיה המלאה שלו — frameworks צד לקוח (React, Vue, Angular, Svelte)…
ביקורת SEO מקיפה: meta tags, כותרות, OpenGraph ועוד
SEO Inspector מספק ביקורת SEO מיידית ומקיפה של כל דף אינטרנט.
ביקורת WCAG אוטומטית: ניגודיות, alt text, ARIA ועוד
בודק הנגישות מבצע בדיקות WCAG 2.1 Level AA אוטומטיות על כל דף אינטרנט ומפיק דוח מסווג של בעיות נגישות. זהה יחסי…
לחץ על כל טקסט בכל דף כדי לערוך אותו מיידית
עורך הטקסט החי הופך כל אלמנט טקסט בדף אינטרנט לעריך בלחיצה אחת.
החלף כל גופן בצורה גלובלית או לפי אלמנט מתוך Google Fonts
Fonts Changer מאפשר להחליף כל גופן בדף אינטרנט בגופן אחר מספריית Google Fonts — באופן גלובלי (כל הטקסט בדף) או לפי…
גלה כל גופן בשימוש בכל דף אינטרנט
List All Fonts סורק כל דף אינטרנט ומציג מלאי מלא של כל משפחת גופנים בשימוש — גופני אינטרנט הנטענים מ-CDNs, גופנים…
eyedropper מדויק לערכי צבע HEX, RGB ו-HSL
Color Picker מספק כלי eyedropper מדויק ברמת ה-pixel לדגימת צבעים מכל אלמנט בדף אינטרנט — טקסט, רקעים, תמונות…
חלץ את ה-Color Palette המלא מכל דף אינטרנט
Color Palette סורק כל אלמנט בדף אינטרנט וחולץ את מערכת הצבעים המלאה בשימוש — מטקסט ורקעים ועד גבולות, צלליות ומבטאים…
החל dark mode על כל אתר באופן מיידי
כפיית dark mode מיישמת color scheme כהה על כל אתר שאינו מציע כזה — או עוקפת ערכת נושא בהירה של אתר. הכלי הופך בצור�…
הפעל או כבה JavaScript לפי טאב באופן מיידי
Toggle JavaScript משבית או מפעיל מחדש את הרצת JavaScript עבור טאב הדפדפן הנוכחי בלחיצה אחת.
צפה, ערוך, הוסף ומחק Cookies לכל domain
Cookie Editor מציג את כל ה-cookies עבור ה-domain הנוכחי בטבלה נקייה וניתנת למיון.
צפה בפלט ה-console בפאנל צף — ללא DevTools
Console Logger לוכד את כל פלט ה-console (console.log, console.warn, console.error, console.info) ומציג אותו בפאנל צף…
נטר את כל בקשות הרשת בזמן אמת
Network Monitor לוכד ומציג כל בקשת רשת שהדף הנוכחי מבצע — קריאות XHR/Fetch API, טעינת סקריפטים, קבצי CSS, הורדת תמונות…
צפה, ערוך, הוסף ומחק ערכי localStorage ו-sessionStorage
Local Storage Editor מספק ממשק טבלה נקי לניהול ערכי localStorage ו-sessionStorage עבור האתר הנוכחי.
סרוק כל קישור בדף ואתר את הקישורים השבורים
בודק קישורים שבורים סורק כל קישור בדף הנוכחי — קישורי עוגן (href), מקורות תמונות, מקורות סקריפטים והפניות לגיליונות…
לוח ביצועים מיידי: זמן טעינה, נתוני DOM ומשאבים
ביצועי דף מספק סקירת ביצועים מיידית של כל דף אינטרנט — מדדי תזמון טעינה (FCP, DOMContentLoaded, טעינה מלאה, TTI), נתוני…
עיצוב, כיווץ ואימות JSON בקליק אחד
מעצב JSON מעצב באופן קריא (pretty-prints), מכווץ (minifies) ומאמת JSON ישירות בדפדפן שלך.
קודד מחרוזות אל Base64 ומ-Base64 באופן מיידי
מקודד/פורק Base64 מרה מחרוזות ל-Base64 ו-Base64 חזרה לטקסט ישירות בדפדפן שלך.
קודד & פענוח מחרוזות URL בלחיצה אחת
מקודד/פורק URL מומיר מחרוזות URL מ וחזרה לצורה המקודדת באחוז שלהם.
קודד & פענוח ישויות HTML באופן מיידי
מקודד ישות HTML מומיר תווים מיוחדים (< > & " ') לשקולים ישות HTML שלהם (< > & " ') ובחזרה. חיוני…
בריחה & ביטול בריחה של מחרוזות לקוד
בריחת קו נטוי/ביטול בריחה מומיר מחרוזות מ וחזרה לצורה נברחת שלהם (\n \t \r \" \' \\ ובריחות Unicode). חיוני בעת הטבעת…
המר תמונות אל Base64 Data URIs ומ-
תמונה ↔ Base64 מומיר קבצי תמונה (PNG, JPG, SVG, WebP, GIF) ל-Base64 קידוד נתונים URIs והחזרה.
פענוח אסימוני Web JSON באופן מיידי
מנפה JWT מפענח ובוחן אסימוני Web JSON — ניתוח כותרת, עומס וחתימה, הצגת תביעות וסימון סטטוס תוקף. מושלם לניפוי שגיאות של…
צור מזהי UUID v4 בתפזורת
מייצר UUID מייצר מזהי UUID v4 חזקים מבחינה קריפטוגרפית באמצעות API קריפטו של הדפדפן.
חישוב MD5, SHA-1, SHA-256, SHA-384, SHA-512 Hashes
מייצר Hash מחשב גיבולים קריפטוגרפיים (MD5, SHA-1, SHA-256, SHA-384, SHA-512) של כל קלט טקסט.
צור סיסמאות חזקות קריפטוגרפית
מייצר סיסמה מייצר סיסמאות חזקות ואקראיות באמצעות ממשק API של אקראיות קריפטוגרפית של הדפדפן. קונפיגורציה אורך (8-128)…
בדוק ביטויים קבועים בחיים עם הדגשת התאמה
בוחן Regex מעריך ביטויים קבועים מול טקסט בדיקה בזמן אמת.
המר Unix, ISO וניתוח קריא בדוקי
ממיר חותמת זמן מתרגם בין חותמות זמן Unix (שניות, אלפיות שניה, מיקרו שניות, ננו שניות), ISO 8601, RFC 2822 ופורמטים…
השוואת שני גושי טקסט שורה אחר שורה
כלי ההשוואה בודק שני גושי טקסט ומדגיש שורות שנוספו, הוסרו וללא שינוי, עם פלט מקודד בצבע. מציע תצוגה מאוחדת (בסגנון Git)…
בדוק יחס ניגודיות WCAG של כל שני צבעים
בודק הניגודיות מחשב את יחס הניגודיות לפי תקן WCAG 2.1 בין שני צבעים ומדרג אותם מול ספי AA/AAA עבור טקסט רגיל וגדול…
המרת צבעי HEX, RGB, HSL, HSV ו-OKLCH באופן מיידי
ממיר פורמט צבעים מתרגם כל צבע בין HEX, RGB, HSL, HSV ו-OKLCH.
חילוץ הפלטה הדומיננטית מכל תמונה
מחלץ צבעים מתמונה מנתח כל קובץ תמונה (בגרירה, הדבקה או לחיצה לטעינה) ומחזיר עד 16 צבעים דומיננטיים עם משקלים באחוזים…
קבל בוררי CSS ו-XPath לכל אלמנט
מוצא נתיבי DOM (DOM Path Finder) מאפשר לך לרחף מעל כל אלמנט בדף כדי לחשוף את בורר ה-CSS הייחודי שלו, בורר קצר, XPath…
בדיקת בקשות Cross-Origin ובדיקת כותרות CORS
בודק CORS בודק אם בקשת cross-origin מהאתר שלך תאושר על ידי שרת היעד.
לכידת פריימים (Frames) של WebSocket בזמן אמת
מפקח WebSocket לוכד כל פריים של WebSocket - נשלח והתקבל - בכל החיבורים בדף.
סרוק את הדף לאיתור תמונות שבורות באופן מיידי
מאתר התמונות השבורות סורק כל <img> ותמונת רקע CSS (background-image) בדף, מזהה טעינות שנכשלו (שגיאות 404, תקלות CORS…
מילוי אוטומטי של טפסים עם נתוני בדיקה מציאותיים
ממלא הטפסים (Form Filler) מאכלס כל שדה טופס גלוי בדף בנתוני בדיקה מציאותיים - שם, אימייל, טלפון, כתובת, סיסמה וכו'…
המר בין CSV ו-JSON לכל כיוון
ממיר ה-CSV ↔ JSON מטפל במחזור ההמרה המלא בין שני הפורמטים הטבלאיים הנפוצים ביותר.
עיצוב, אימות והצגת XML עם הדגשת תחביר
מעצב ה-XML (XML Formatter) מעצב יפה (pretty-prints), מצמצם (minifies) ומאמת XML בתוך הדפדפן.
עיצוב וסידור שאילתות SQL יפות
מעצב ה-SQL (SQL Formatter) הופך SQL מצומצם או מבולגן לשאילתות קריאות ומוזחות.
שמירת דפי אינטרנט כ-PDFים נקיים
המרה ל-PDF שומרת את דף האינטרנט הנוכחי כ-PDF דרך תיבת הדפוס של הדפדפן, עם סגנונות מודפסים המופעלים תחילה. מסתיר�…
בחר את התוכנית שמתאימה לתהליך העבודה שלך. התחל בחינם, שדרג בכל עת.
שאלות נפוצות על תכונות ושימוש בתוסף DevSuite Pro. אם יש לך שאלה, ייתכן שהתשובה כבר מופיעה למטה.
בקר בחנות האינטרנט של Chrome, חפש "DevSuite Pro", לחץ על "הוסף ל-Chrome" ואשר בבחירת "הוסף תוסף". לאחר ההתקנה, סמל התוסף יופיע בסרגל הכלים של הדפדפן. לחץ עליו כדי לגשת מיד ל-64+ כלי פיתוח.
כלים חינמיים (43+) זמינים לכולם ללא צורך ברישיון. כלי Pro מסומנים בתג PRO זהב ודורשים רישיון Pro פעיל לשימוש. ניתן לראות אילו כלים חינמיים או Pro מהחלון הקופץ — לכלים חינמיים אין סמל מנעול, בעוד שכלי Pro מופיעים מעט עמומים עד שתפעיל את הרישיון שלך.
לחלק מהאתרים יש מדיניות אבטחת תוכן (CSP) מחמירה שחוסמת פעולות מסוימות של תוספי דפדפן. זה נפוץ במיוחד באתרי בנקים ואתרים ממשלתיים. בנוסף, דפים פנימיים של Chrome (chrome://) אינם מאפשרים לתוספים להריץ סקריפטי תוכן.
לא. כל השינויים שנעשו על ידי כלים כמו הזז אלמנט, עורך טקסט חי, מחק/הסתר אלמנט ו-CSS Inspector הם זמניים. הם משפיעים רק על מה שאתה רואה בדפדפן שלך כרגע. רענון הדף ישחזר הכל למצבו המקורי.
פתח את החלון הקופץ של DevSuite Pro, לחץ על סמל ההגדרות בפינה הימנית העליונה. גלול למטה לחלק הרישיון, הדבק את מפתח הרישיון שלך בשדה הקלט ולחץ על הפעל. אם המפתח תקף, התג ישתנה מ-FREE ל-PRO וכל כלי ה-Pro ייפתחו מיד.
ניתן להזיז את הדוק על ידי כניסה להגדרות ובחירת מיקום סרגל צד אחר — עליון, תחתון, שמאלי או ימני. ניתן גם להסתיר את הדוק לחלוטין על ידי כיבוי "הצג דוק בדפים" בהגדרות, או לחיצה על Ctrl+Shift+X בכל עת.
לא. DevSuite Pro אינו אוסף, עוקב או משדר את נתוני הגלישה שלך. כל ההגדרות מאוחסנות מקומית בדפדפן שלך. הבקשה החיצונית היחידה שנעשית היא בעת הפעלת מפתח הרישיון לאימות המפתח שלך מול השרת שלנו.
כן! DevSuite Pro זמין גם בחנות האינטרנט של Chrome וגם בתוספי Firefox. הוא עובד על Chrome, Edge, Brave ודפדפנים אחרים מבוססי Chromium, וכן על Firefox.