מאמרים קשורים. 6 כלים Coolest לנסות

מהדורת מפתחים של Firefox הוא הדפדפן היחיד היום המיועד במיוחד למפתחים. כלי הפיתוח של המהדורה הסטנדרטית מופיעים תחילה במהדורת היזם ויש כלים במהדורת מפתח שאינם ולא זמינים במהדורה הסטנדרטית. היום אנחנו הולכים להעיף מבט על כמה כלים כי כרגע ניתן למצוא רק במהדורת היזם.

אם אתה מישהו שמעולם לא השתמש או לא מכיר כלי מפתח אפילו אלה במהדורה הסטנדרטית, לבדוק את זה מגניב "DevTools Challenger" על ידי Mozilla הראשון. כאן אתה יכול להתאמן עם כמה כלים המוזכרים להלן בדפדפן Firefox Edition. הדוגמאות הן מהנות וקלות, ההוראות פשוטות, ואם אתה לא יכול להתעדכן, פשוט בצע את הדרכה וידאו במקום.

1. אנימציה כלי מפקח

אנימציות CSS הופכות יותר ויותר נפוצות, וכלי האנימציה של CSS שסופקו על ידי המהדורה למפתחים של Firefox מקל על מעקב ובדיקה בכל שלב של האנימציה שנוצרה. אתה יכול להשהות, לשחק ולהפוך כל הנפשה; אתה יכול גם לראות את זה קורה מסגרת ידי מסגרת באמצעות קרצוף.

כדי לגשת לכלי, פתח את מפקח כלי על ידי לחיצה ימנית על אלמנט animating ובחירה "לבדוק אלמנט", ולאחר מכן בצד ימין של חלון כלי dev, לחץ על "אנימציות".

2. אנימציה תזמון עורך פונקציה

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

אם אתה כבר לא מכיר את פונקציה אנימציה Bezier מעוקב, אני ממליץ על הודעה זו כדי ללמוד עוד על זה.

3. בחירת צבע עבור CSS מאפיינים

יש כבר בוחר צבע זמין המהדורה הסטנדרטית של פיירפוקס (לקרוא עוד על זה בפוסט הזה), אשר בוחר צבע מהדף ומעתיק אותו ללוח. בוחר הצבע אני מזכיר עכשיו עם זאת ספציפי לערכי צבע CSS של המאפיינים.

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

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

4. כלי מדידה

כלי זה מאפשר לך לראות את המיקום XY של הסמן, ואת גובה, רוחב ומדידה אלכסונית בפיקסלים של חלק נבחר. כדי להשתמש בכלי, תחילה עליך להפעיל אותו במפתח אפשרויות ארגז הכלים, על ידי סימון תיבת הסימון בשם "למדוד חלק של הדף" תחת "זמין לחצני ארגז הכלים".

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

5. CSS עורך מסנן

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

כדי להסיר מסנן, לחץ על סימן × בקצה הימני של שם המסנן. כדי להוסיף מסנן, לחץ על תיבת הסינון בתחתית ובחר את הקובץ שברצונך להוסיף ולחץ על הלחצן + סימן. ניתן גם לסדר מחדש את המסננים בכל סדר על ידי גרירה של כל פריט.

6. כלי זיכרון

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

כדי להשתמש בכלי, יהיה עליך להפעיל אותו תחילה אפשרויות ארגז הכלים על ידי סימון תיבת הסימון בשם "זיכרון" תחת "ברירת המחדל של Firefox כלי פיתוח". לאחר מסומנת, תראה את "זיכרון" בסעיף בחלק העליון של חלון כלי dev מיד לאחר "ביצועים". בחר באפשרות זו.

כדי להשתמש בכלי, לחץ על "צלם תמונה" או על לחצן המצלמה. תראה רשימה של פריטים, כגון אובייקטים וסקריפטים המנטלים זיכרון .