כיצד להשתמש בכלי מפתחי דפדפן אינטרנט

2024 מְחַבֵּר: Abigail Brown | [email protected]. שונה לאחרונה: 2024-01-07 19:03

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

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

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

ההדרכות למטה מדריכות אותך כיצד לגשת לכלי מפתחים אלה במספר דפדפני אינטרנט פופולריים.

Google Chrome

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

1. בחר את התפריט הראשי של Chrome, המסומן בשלושה קווים אופקיים וממוקם בפינה הימנית העליונה של הדפדפן.

2. כאשר התפריט הנפתח מופיע, העבר את סמן העכבר מעל האפשרות כלים נוספים.

   

3. כעת אמור להופיע תפריט משנה. בחר באפשרות שכותרתה כלי מפתחים. אתה יכול גם להשתמש בקיצור המקלדת הבא במקום פריט תפריט זה: Chrome OS/Windows (CTRL+SHIFT+I), Mac OS X (ALT(OPTION) +COMMAND+I)

   

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

5. בנוסף לקטעים האלה, אתה יכול גם לגשת לכלים הבאים דרך הסמל >>, הממוקם מימין ל- Performance tab.

   • Memory: מעקב והקלט את השימוש בזיכרון בדף אינטרנט. אתה יכול לראות כמה כבד JavaScript באתר שלך.
   • Security: מדגיש בעיות אישורים ובעיות אחרות הקשורות לאבטחה בדף או באפליקציה הפעילים.
   • Application: בדוק את המשאבים שבהם משתמש יישום אינטרנט. קבל פירוט מלא של מה שנמצא בשימוש.
   • Audits: מציע דרכים לייעל את זמן הטעינה והביצועים הכלליים של דף או אפליקציה.

   

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

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

   

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

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

   

Mozilla Firefox

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

1. בחר את התפריט הראשי של Firefox, המיוצג על ידי שלושה קווים אופקיים וממוקם בפינה הימנית העליונה של חלון הדפדפן.

2. כאשר התפריט הנפתח מופיע, בחר מפתח אינטרנט.

   

3. תפריט מפתח אתרים אמור להיות מוצג כעת, המכיל את האפשרויות הבאות. תבחין שלרוב פריטי התפריט יש קיצורי מקלדת המשויכים אליהם.

   • Toggle Tools: מציג או מסתיר את ממשק כלי המפתחים, הממוקם בדרך כלל בתחתית חלון הדפדפן. קיצור מקשים: Mac OS X (ALT(OPTION)+COMMAND+I), Windows (CTRL+SHIFT+I)
   • Inspector: מאפשר לך לבדוק ו/או לכוונן קוד CSS ו-HTML בדף הפעיל וכן במכשיר נייד באמצעות ניפוי באגים מרחוק. קיצור מקשים: Mac OS X (ALT(OPTION)+COMMAND+C), Windows (CTRL+SHIFT+C)
   • מסוף האינטרנט: מאפשר לך להפעיל ביטויי JavaScript בתוך הדף הפעיל וכן לסקור קבוצה מגוונת של נתונים רשומים, כולל אזהרות אבטחה, בקשות רשת, הודעות CSS ועוד. קיצור מקשים: Mac OS X (ALT(OPTION)+COMMAND+K), Windows (CTRL+SHIFT+K)
   • Debugger: Debugger של JavaScript מאפשר לך לאתר ולתקן פגמים על ידי הגדרת נקודות שבירה, בדיקת צמתי DOM, מקורות חיצוניים של אגרוף שחור ועוד הרבה יותר. כמו במקרה של המפקח, תכונה זו תומכת גם באיתור באגים מרחוק. קיצור מקשים: Mac OS X (ALT(OPTION)+COMMAND+S), Windows (CTRL+SHIFT+S)
   • עורך סגנונות: מאפשר לך ליצור גיליונות סגנונות חדשים ולשלב אותם בדף האינטרנט הפעיל, או לערוך גיליונות קיימים ולבדוק כיצד השינויים שלך מוצגים בדפדפן בלחיצה אחת בלבד. קיצור מקשים: Mac OS X, Windows (SHIFT+F7)
   • Performance: מספק פירוט מפורט של ביצועי הרשת של הדף הפעיל, נתוני קצב פריימים, זמן ומצב ביצוע JavaScript, מהבהבת צבע ועוד הרבה יותר. קיצור מקשים: Mac OS X, Windows (SHIFT+F5)
   • Network: מפרט כל בקשת רשת שיזם הדפדפן יחד עם השיטה, תחום המקור, הסוג, הגודל והזמן שחלף התואם. קיצור מקשים: Mac OS X (ALT(OPTION)+COMMAND+Q), Windows (CTRL+SHIFT+Q)
   • מפקח אחסון: תסתכל על המטמון והעוגיות המאוחסנות על ידי אתר אינטרנט. קיצור מקשים: (SHIFT+F9)
   • סרגל הכלים למפתחים: פותח מתורגמן שורת פקודה אינטראקטיבי. הזן help לתוך המתורגמן לקבלת רשימה של כל הפקודות הזמינות והתחביר המתאים שלהן. קיצור מקשים: Mac OS X, Windows (SHIFT+F2)
   • WebIDE: מספק את היכולת ליצור ולהפעיל יישומי אינטרנט דרך מכשיר אמיתי שבו פועל Firefox OS או באמצעות סימולטור מערכת ההפעלה Firefox. קיצור מקשים: Mac OS X, Windows (SHIFT+F8)
   • קונסולת הדפדפן: מספק את אותה פונקציונליות כמו מסוף האינטרנט (ראה למעלה).עם זאת, כל הנתונים המוחזרים הם עבור כל יישום Firefox (כולל הרחבות ופונקציות ברמת הדפדפן) בניגוד לדף האינטרנט הפעיל בלבד. קיצור מקשים: Mac OS X (SHIFT+COMMAND+J), Windows (CTRL+SHIFT+J)
   • תצוגת עיצוב רספונסיבית: מאפשר לך להציג דף אינטרנט באופן מיידי ברזולוציות, פריסות וגדלים שונים כדי לחקות מכשירים מרובים כולל טאבלטים וסמארטפונים. קיצור מקשים: Mac OS X (ALT(OPTION)+COMMAND+M), Windows (CTRL+SHIFT+M)
   • Eyedropper: מציג את קוד צבע הקשת עבור פיקסלים שנבחרו בנפרד.
   • Scratchpad: Scratchpad מאפשר לך לכתוב, לערוך, לשלב ולהפעיל קטעי קוד JavaScript מתוך חלון של Firefox קופץ. פתח מסמך JavaScript אינטראקטיבי המאפשר לך לכתוב בקוד ולבדוק אותו מול אתר אינטרנט. קיצור מקשים: (SHIFT+F4)
   • Service Workers: נפה באגים ב-Service Workers באפליקציית האינטרנט שלך. קבל מידע מפורט על הביצועים והשגיאות שלהם.
   • Page Source: כלי המפתחים המקורי מבוסס הדפדפן, אפשרות זו פשוט מציגה את קוד המקור הזמין עבור הדף הפעיל. קיצור מקשים: Mac OS X (COMMAND+U), Windows (CTRL+U)
   • קבל כלים נוספים: פותח את אוסף הכלים של מפתחי האינטרנט באתר התוספות הרשמי של מוזילה, הכולל כתריסר הרחבות פופולריות כגון בתור Firebug ו-Greasemonkey.

   

Microsoft Edge/Internet Explorer

מכונה בדרך כלל F12 Developer Tools, הומאז' לקיצור המקשים שהשיק את הממשק מאז גרסאות קודמות של Internet Explorer, ערכת הכלים למפתחים ב-IE11 ו-Microsoft Edge עשתה כברת דרך מאז הקמתה בכך שהיא מציעה קבוצה שימושית מאוד של מוניטורים, ניפוי באגים, אמולטורים ומהדרים בזמן אמת.

Microsoft כבר לא תומכת ב-Internet Explorer וממליצה לעדכן לדפדפן Edge החדש יותר. עבור לאתר שלהם כדי להוריד את הגרסה החדשה ביותר.

1. בחר פעולות נוספות, המיוצגות על ידי three dots וממוקמות בפינה הימנית העליונה של חלון הדפדפן.

   

2. כאשר התפריט הנפתח מופיע, בחר באפשרות שכותרתה כלי מפתחים.

   

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

   

   • DOM Explorer: מאפשר לך לערוך גיליונות סגנונות ו-HTML בדף הפעיל, ולעבד את התוצאות ששונו תוך כדי. משתמש בפונקציונליות של IntelliSense להשלמה אוטומטית של קוד במידת הצורך. קיצור מקשים: (CTRL+1)
   • Console: מספק את היכולת לשלוח מידע על ניפוי באגים כולל מונים, טיימרים, עקבות והודעות מותאמות אישית באמצעות API משולב. כמו כן, מאפשר לך להחדיר קוד לדף אינטרנט פעיל ולשנות את הערכים שהוקצו למשתנים בודדים בזמן אמת. קיצור מקשים: (CTRL+2)
   • Debugger: מאפשר לך להגדיר נקודות עצירה ולאפות באגים בקוד שלך בזמן שהוא מופעל, שורה אחר שורה במידת הצורך. קיצור מקשים: (CTRL+3)
   • Network: מפרט כל בקשת רשת שיזמה הדפדפן במהלך טעינת העמוד וביצועו, כולל פרטי פרוטוקול, סוג תוכן, שימוש ברוחב פס ועוד הרבה יותר. קיצור מקשים: (CTRL+4)
   • Performance: פירוט שיעורי פריימים, ניצול מעבד ומדדים אחרים הקשורים לביצועים כדי לעזור לך להאיץ את זמני טעינת הדפים ופעילויות אחרות. קיצור מקשים: (CTRL+5)
   • Memory: עוזר לך לבודד ולתקן דליפות זיכרון פוטנציאליות בדף האינטרנט הנוכחי על ידי הצגת ציר זמן של שימוש בזיכרון יחד עם תמונות ממרווחי זמן שונים. קיצור מקשים: (CTRL+6)
   • Emulation: מראה לך כיצד הדף הפעיל יוצג ברזולוציות ובגדלים שונים של מסך, תוך חיקוי של סמארטפונים, טאבלטים ומכשירים אחרים. זה גם מספק את היכולת לשנות את סוכן המשתמש ואת כיוון הדף, כמו גם לדמות מיקומים גיאוגרפיים שונים על ידי הזנת קו רוחב וקו אורך. קיצור מקשים: (CTRL+7)

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

   

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

   

Apple Safari (Mac בלבד)

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

1. בחר Safari בתפריט הדפדפן, הממוקם בחלק העליון של המסך. כאשר התפריט הנפתח מופיע, בחר Preferences. אתה יכול גם להשתמש בקיצור המקלדת הבא במקום פריט תפריט זה: COMMAND+COMMA(,)

   

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

   

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

   

4. סגור את הממשק Preferences.

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

   • פתח דף עם: מאפשר לך לפתוח את דף האינטרנט הפעיל באחד מהדפדפנים האחרים המותקנים כעת ב-Mac שלך.
   • User Agent: מאפשר לך לבחור מתוך יותר מתריסר ערכי סוכן משתמש מוגדרים מראש, כולל מספר גרסאות של Chrome, Firefox ו-Internet Explorer, כמו גם להגדיר מותאם אישית משלך מחרוזת.
   • כניסה למצב עיצוב רספונסיבי: מציג את הדף הנוכחי כפי שהוא יופיע במכשירים שונים וברזולוציות מסך שונות.
   • Show Web Inspector: מפעיל את הממשק הראשי של כלי הפיתוח של Safari, המוצב בדרך כלל בתחתית מסך הדפדפן שלך ומכיל את הסעיפים הבאים: אלמנטים, רשת, משאבים, צירי זמן, מאפר באגים, אחסון, קונסולה.
   • Show Error Console: משיק גם את ממשק כלי הפיתוח, ישירות לכרטיסיית Console המציגה שגיאות, אזהרות ושאר האפשרויות לחיפוש נתוני יומן.
   • הצג מקור עמוד: פותח את הכרטיסייה משאבים, המציגה את קוד המקור עבור הדף הפעיל המסווג לפי המסמך.
   • הצג משאבי דף: מבצע את אותה פונקציה כמו האפשרות הצג מקור דף.
   • Show Snippet Editor: פותח חלון חדש שבו אתה יכול להזין קוד CSS ו-HTML, תצוגה מקדימה של הפלט שלו תוך כדי תנועה.
   • Show Extension Builder: מספק את היכולת ליצור או לערוך הרחבות Safari עם CSS, HTML ו-JavaScript.
   • הצג הקלטת קו זמן: פותח את הכרטיסייה קווי זמן ומתחיל להציג מידע על בקשות רשת, פריסה ועיבוד, כמו גם ביצוע JavaScript בזמן אמת.
   • Empty Caches: מוחק את כל המטמון המאוחסן כעת בכונן הקשיח שלך.
   • השבת מטמונים: עוצר את שמירה במטמון של Safari כך שכל התוכן יאחזר מהשרת בכל טעינת עמוד.
   • השבת תמונות: מונע עיבוד של תמונות בכל דפי האינטרנט.
   • השבת סגנונות: מתעלם ממאפייני CSS כאשר דף נטען.
   • השבת JavaScript: מגביל את ביצוע JavaScript בכל הדפים.
   • השבת תוספים: אוסר על כל התוספים המותקנים לפעול בתוך הדפדפן.
   • השבת פריצות ספציפיות לאתר: אם ספארי שונתה כדי לטפל במפורש בבעיות ספציפיות לדף האינטרנט הפעיל, אפשרות זו תחסום את השינויים הללו כך שהדף נטען כפי שהיה לפני הצגת השינויים האלה.
   • השבת מגבלות קבצים מקומיים: מאפשר לדפדפן גישה לקבצים בדיסק המקומי שלך, פעולה המוגבלת כברירת מחדל מסיבות אבטחה.
   • השבת הגבלות חוצות-מקור: הגבלות אלו מופעלות כברירת מחדל כדי למנוע XSS וסכנות פוטנציאליות אחרות. עם זאת, לעתים קרובות יש להשבית אותם באופן זמני למטרות פיתוח.
   • אפשר JavaScript משדה חיפוש חכם: כאשר הוא מופעל, הוא מספק את היכולת להזין כתובות URL עם JavaScript: משולבת ישירות בשורת הכתובות.
   • התייחס לאישורי SHA-1 כלא מאובטחים: אישורי SSL המשתמשים באלגוריתם SHA-1 נחשבים באופן נרחב לא מעודכנים ופגיעים.