DWTools עימות קצה של F12 לעומת פיירפוקס לעומת Chrome

כלי הפיתוח של Microsoft Edge, דפדפן ברירת המחדל החדש של Windows 10 קיבל עיצוב מודרני וכמה תכונות חדשות בהשוואה לקודמו, כלי הפיתוח F12 של Internet Explorer 11.

השאלה אם כלי הפיתוח של Microsoft Edge נמדדים עד למתחרים הפופולריים שלהם - כלי הפיתוח של דפדפנים מודרניים אחרים כגון Mozilla Firefox ו- Google Chrome - מתעוררים באופן טבעי במוחם של מפתחים רבים.

במאמר זה אנו מנסים לענות על שאלה זו, להבין אם F12 של Edge כלים Dev הם באמת שווה להשתמש. נשווה את התכונות שלה לאלה של כלי הפיתוח של Firefox ושל DevTools של Google Chrome.

פתח את כלי הפיתוח

לחיצה על F12 פותחת את כלי הפיתוח בכל שלושת המקרים: כלי פיתוח ב- Firefox, DevTools ב- Chrome ו- F12 Dev Tools ב- Microsoft Edge. זהו קיצור המקשים שבו השם הרשמי של כלי פיתוח F12 של Edge בא מ.

כאשר אתה פותח את כלי הפיתוח של אדג 'אתה יכול לחוות באחת החסרונות הידועים ביותר שלה: כרגע זה בלתי אפשרי להצמיד את הכלים לחלון קיים. בעוד שאתה יכול לעקוב אחר מה שקורה על המסך ב- Firefox Developer Tools ו- Chrome DevTools על ידי הצמדת חלון הכלים dev לתחתית המסך, אתה (כרגע) לא יכול לעשות את אותו הדבר עם אדג '.

היזמים של מיקרוסופט טוענים שהם יתקנו בעיה זו בעדכון עתידי.

בדוק את DOM

ה DOM Explorer (קיצור הדרך: CTRL + 1) הוא הכרטיסייה הראשונה של כלי הפיתוח F12 של Microsoft Edge. הפריסה שלה ואת העיצוב הכולל הוא די דומה אלמנט הכרטיסייה של Chrome ואת מפקח הכרטיסייה ב- Firefox, עם זאת היכולות נראות שונות.

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

אתה יכול ניסוי עם כללי CSS על ידי מחיקת אלה הנוכחי והוספת חדשים, ואתה יכול לראות את שינויים מסוכמים על הכרטיסייה נפרדת בשם “שינויים” (הוא ממוקם בצד שמאל). תכונה זו היא תכונה שאינה מובנית ב- Firefox Developer ולא ב- Chrome DevTools. זה יכול לתת סיכום מהיר למשתמש, אז זה באמת אפשרות שימושית.

יש כמה תכונות ב- Firefox Developer Tools, שאף Edge או Google Chrome אינם מספקים, אך יכולים לסייע באופן משמעותי לחייו של מעצב: גופן ואת האנימציה כלי Analyzer.

ב אדג 'יש מגניב צבע בורר אם כי אולי קצת לפצות את המשתמש על זה.

אינטראקציה עם

ה מסוף (קיצור הדרך: CTRL + 2) ב- Microsoft Edge מאפשר לך לקיים אינטראקציה עם JavaScript של האתר שלך, בדיוק כמו ב- Firefox וב- Chrome Dev Tools. כל השלושה מאפשרים לך לעקוב אחר שגיאות JavaScript בזמן אמת ואתה יכול גם לנתח אותם על ידי הזנת קלט משלך.

כלי המסוף של Edge F12 Dev כלים יש נחמד תכונת השלמה אוטומטית זה עוזר לך עם פקודות, אבל זה נראה פחות ידע בהשוואה לזו שב- Firefox וב- Chrome Dev Tools.

אדג ' מפריד שגיאות, אזהרות והודעות וזה עוזר גדול, אם כי לא משהו כי שני כלים אחרים אין.

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

להבין מה הקוד שלך עושה

ה מאתר הבאגים כלי (קיצור דרך: CTRL + 3) עוזר לך להבין מה קורה לקוד שלך בעת מציאת באגים פוטנציאליים. באפשרותך להגדיר שעונים ונקודות עצירה, ולהציג ערימות שיחה.

חלונית השעונים מציגה ערכים משתנים, מצב Callstack מציג את שרשרת הקריאות הפונקציונליות שהובילו למצב הנוכחי, ומצב Breakpoints מציג רשימה של נקודות המעבר שהגדרת.

Edge של F12 כלים Dev לאפשר לך השהה את הקוד שלך באמצע ההוצאה להורג, ועוברים דרכה בשורה. יש לך גם את האפשרות לשפר את הקריאות של קובץ JavaScript המורכב או ממוזערים, ואתה יכול 12 formal משאבים שונים (JavaScript, הרחבות, וכו ') אחד אחד.

Firefox ו- Chrome DevTools מספקים את כל הפונקציות הללו, כך ש- Edge אינה מציעה חוויית איתור באגים יוצאת דופן, אך היא מספקת למשתמש כלי מוצק ואמין, אשר תואם את המתחרים שלו.

תסתכל על דפדפן שרת תקשורת

ה רשת הכלי (קיצור הדרך: CTRL + 4) עוצב מחדש לחלוטין עבור Microsoft Edge מאז Internet Explorer 11. בעזרת כלי זה נוח אתה יכול בצע את התקשורת בין השרת לבין הדפדפן, ולבדוק את הבקשות הפרטניות.

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

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

הכרטיסייה 'רשת' של Chrome Chrome אינה כוללת חלונית כזו, אך אם תלחץ על הבקשות אחת-לאחת, תוכל לראות את אותו מידע. אבל זה פתרון פחות אינטואיטיבי.

עקוב אחר דפים איטיים

ה ביצועים (קיצור הדרך: CTRL + 5) מסייע לך להבין את הסיבות מאחורי דף אינטרנט איטי. עם כלי הביצועים מיקרוסופט לקחה קפיצה ענק קדימה על ידי שילוב הקודם UI היענות Profiler כלים כדי ליצור תצוגה מקצה לקצה של כל scripting שלך, ואת visualizing את הביצועים.

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

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

אבחן בעיות זיכרון

ה זיכרון כלי (קיצור דרך: CTRL + 6) מאפשר למצוא דליפות זיכרון זה יכול גם להאט את דף האינטרנט שלך, יתר על כן יכול להשפיע על היציבות של האתר שלך.

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

ל- Chrome DevTools יש גם מאפיין זיכרון יפה תחת הכרטיסייה פרופילים, בעוד ש- Firefox Developer אינו מספק תכונה זו כברירת מחדל, אך תוכל להוריד ולהתקין תוספים כאלה אם תרצה. מאפיין הזיכרון של Chrome DevTools מתקדם למדי ומציע תכונות רבות יותר מזו של אדג ', לדוגמה, הוא מאפשר לך להקצות אובייקטים JavaScript הקצאת לאורך זמן זה יכול לעזור לך לבודד דליפות זיכרון.

בדוק את האתר שלך על גדלי מסך שונים

ה אמולציה הכלי (קיצור דרך: CTRL + 7) מאפשר לך לבדוק את האתר שלך בנסיבות שונות. באפשרותך לבחור מבין שני פרופילי דפדפן, Desktop ו- Windows 10 Mobile, וכן מסוכני משתמש רבים, כולל כל גירסאות שולחן העבודה והנייד של Internet Explorer בחזרה ל- IE6, יחד עם רבים מהמתחרים של אדג ', Chrome, Firefox, Safari וכו'.

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

כלי הפיתוח של Firefox אינם כוללים כלי אמולציה של מכשירים, אך ל- Chrome DevTools יש אמולטור מתוחכם שכמותו של אדג 'בקושי יכול להתחרות בו.

לדוגמה, למסך ההדמיה של Chrome יש רשת מדויקת שבה הנוף המדומה מוכנס פנימה, ואתה לא רק יכול לבחור מתוך פרופילי דפדפן וסוכני משתמש, אלא גם ממכשירים רבים כגון גרסאות שונות של iPhone או Samsung Galaxy ועוד רבים אחרים. אמולטור Chrome של DevTools גם שימושי אפשרות זום ואתה יכול לבדוק את האתר שלך ברשתות שונות כמו 3G, 4G, DSL, WiFi, וכו '.

סיכום

בסך הכל, F12 של Microsoft Edge Dev כלים נראה טוב להפליא. הוא מספק תכונות די דומה פופולרי אינטרנט פיתוח Toolkits של דפדפנים מודרניים אחרים. ישנם שני תחומים שבהם F12 של Edge Dev כלים הוא די חזק: ממשק משתמש זה באמת אינטואיטיבי, ידידותי למשתמש, ומעוצב היטב, וה כלי אבחון ביצועים.

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