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

כלי עבודה משולבים עבור מעצבי אתרים, מפתחים ובודקים

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

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

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

גוגל כרום

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

1. לחץ על לחצן התפריט הראשי של Chrome, המסומן בשלוש שורות אופקיות וממוקם בפינה הימנית העליונה של הדפדפן.
2. כאשר התפריט הנפתח מופיע, העבר את סמן העכבר מעל האפשרות כלים נוספים .
3. תפריט משנה אמור להופיע כעת. בחר באפשרות שכותרתה כלי מפתח . תוכל גם להשתמש בקיצור המקשים הבא במקום פריט בתפריט זה: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPTION) + פקודה + I )
4. כעת יש להציג את ממשק 'כלי מפתח של Chrome', כפי שמוצג בתמונת מסך של דוגמה זו. בהתאם לגרסת Chrome שברשותך, הפריסה הראשונית שתראה עשויה להיות שונה במקצת מזו המוצגת כאן. הרכזת הראשית של כלי הפיתוח, הממוקמת בדרך כלל בחלק התחתון או הימני של המסך, מכילה את הכרטיסיות הבאות.
   אלמנטים: מספק את היכולת לבדוק CSS ו- HTML קוד וכן לערוך CSS ב- the-fly, לראות את ההשפעות של השינויים שלך בזמן אמת.
   מסוף: מסוף JavaScript של Chrome מאפשר כניסה ישירה של פקודות, וכן איתור באגים באבחון.
   מקורות: מאפשר לך לתקן קוד JavaScript באמצעות ממשק גרפי רב עוצמה.
   רשת: מסווג ומציג מידע מפורט על כל פעולה קשורה ביישום או בדף הפעילים, כולל בקשות מלאה וכותרות תגובה וכן מדדי תזמון מתקדמים.
   ציר זמן: מאפשר ניתוח מעמיק של כל פעילות שמתרחשת בדפדפן ברגע שהבקשה לטעינת דף או יישום מופעלת.
5. בנוסף לסעיפים אלה, ניתן גם לגשת לכלים הבאים באמצעות הסמל >> , הממוקם מימין לכרטיסייה ציר זמן .
   פרופיל: שבור למטה Profiler CPU ו Profiler חלקים סולם , מספק שימוש מקיף בזיכרון זמן הביצוע הכולל של היישום או דף פעיל.
   אבטחה: מדגיש בעיות בתעודה ובעיות הקשורות לאבטחה בדף או היישום הפעילים.
   משאבים: כאן תוכל לבדוק קובצי cookie, אחסון מקומי, מטמון אפליקציות ומקורות נתונים מקומיים אחרים המשמשים את דף האינטרנט או היישום הנוכחי.
   ביקורות: מציע דרכים לביצוע אופטימיזציה של זמן טעינה של דף או יישום וביצועים כלליים.
6. מצב המכשיר מאפשר לך להציג את הדף הפעיל בסימולטור, שהופך אותו כמעט בדיוק כפי שהוא יופיע באחד מתריסר מכשירים, כולל מספר דגמים ידועים של Android ו- iOS כגון iPad, iPhone ו- Samsung Galaxy. אתה גם נתון היכולת לחקות רזולוציות מסך מותאמות אישית כדי להתאים את הפיתוח הספציפי שלך או בדיקות הצרכים. כדי להפעיל ולכבות את מצב המכשיר , בחר את סמל הטלפון הנייד הממוקם ישירות משמאל לכרטיסייה אלמנטים .
7. ניתן גם להתאים אישית את המראה והתחושה של כלי הפיתוח שלך על ידי לחיצה ראשונה על כפתור התפריט המיוצג על ידי שלוש נקודות ממוקמות אנכית הממוקם בצד הימני ביותר של הכרטיסיות הנ"ל. מתוך התפריט הנפתח, ניתן למקם מחדש את המזח, להציג או להסתיר כלים שונים וכן להשיק פריטים מתקדמים יותר, כגון מפקח התקנים. אתה תמצא את הכלים dev כלים עצמו להתאמה אישית גבוהה באמצעות ההגדרות נמצא בסעיף זה.

Mozilla Firefox

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

קריאה מומלצת: 25 Greasemonkey למעלה ו Tampermonkey סקריפטים למשתמש

1. לחץ על כפתור התפריט הראשי של Firefox, המיוצג על ידי שלושה קווים אופקיים הממוקם בפינה הימנית העליונה של חלון הדפדפן.
2. כאשר התפריט הנפתח מופיע, בחר את הסמל שכותרתו מפתח . תפריט Web Developer אמור להיות מוצג כעת, המכיל את האפשרויות הבאות. תוכל להבחין כי רוב פריטי התפריט יש קיצורי מקשים הקשורים אליהם.
   כלי 'מתג': מציג או מסתיר את ממשק כלי הפיתוח, הממוקם בדרך כלל בתחתית חלון הדפדפן. קיצור מקשים: Mac OS X ( ALT (אופציה) + פקודה + I ), Windows ( CTRL + SHIFT + I )
   מפקח: מאפשר לך לבדוק ו / או לצבוט קוד HTML ו- HTML על הדף הפעיל, כמו גם על מכשיר נייד באמצעות איתור באגים מרחוק. קיצור מקשים: Mac OS X ( ALT (OPTION) + Command + C ), Windows ( CTRL + SHIFT + C )
   Web Console: מאפשר לך לבצע ביטויים של JavaScript בתוך הדף הפעיל וכן לבדוק מגוון רחב של נתונים רשומים, כולל אזהרות אבטחה, בקשות רשת, הודעות CSS ועוד. קיצור מקשים: Mac OS X ( ALT (OPTION) + Command + K ), Windows ( CTRL + SHIFT + K )
   Debugger: מאתר הבאגים של JavaScript מאפשר לך לאתר ולתקן פגמים על ידי הגדרת נקודות עצירה, בדיקת צמתים של DOM, מקורות חיצוניים לאיגרוף שחור ועוד. כמו במקרה של המפקח , תכונה זו תומכת גם באיתור באגים מרחוק. קיצור מקשים: Mac OS X ( ALT (OPTION) + Command + S ), Windows ( CTRL + SHIFT + S)
   עורך סגנון: מאפשר לך ליצור גליונות סגנונות חדשים ולשלב אותם בדף האינטרנט הפעיל, או לערוך גיליונות קיימים ולבדוק כיצד השינויים שלך מופיעים בדפדפן בלחיצת כפתור אחת בלבד. קיצור מקשים: Mac OS X, Windows ( SHIFT + F7 )
   ביצועים: מספק פירוט מפורט של ביצועי הרשת הפעילה של הדף, נתוני קצב המסגרות, זמן הביצוע של JavaScript והמדינה, הצבעים מהבהבים ועוד. קיצור מקשים: Mac OS X, Windows ( SHIFT + F5 )
   רשת: מפרט את כל בקשות הרשת שיוזמו על ידי הדפדפן יחד עם השיטה המתאימה, דומיין המקור, סוג, גודל וזמן שחלף. קיצור מקשים: Mac OS X ( ALT (OPTION) + Command + Q ), Windows ( CTRL + SHIFT + Q )
   סרגל הכלים למפתחים: פותח מתורגמן אינטראקטיבי של שורת פקודה. הזן עזרה לתוך המתורגמן לקבלת רשימה של כל הפקודות הזמינות והתחביר הנכון שלהם. קיצור מקשים: 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 )
   טפטפת: מציג את קוד צבע הקסדצימלי עבור פיקסלים שנבחרו בנפרד.
   Scratchpad : מאפשר לך לכתוב, לערוך, לשלב ולבצע קטעים של קוד JavaScript מתוך חלון קופץ ב- Firefox. קיצור מקשים: Mac OS X, Windows ( SHIFT + F4 )
   מקור מקור: כלי הפיתוח המקורי המבוסס על דפדפן, אפשרות זו מציגה את קוד המקור הזמין עבור הדף הפעיל. קיצור מקשים: Mac OS X ( COMMAND + U ), Windows ( CTRL + U )
   קבל כלים נוספים: פותח את אוסף הכלים של מפתח האינטרנט באתר ההרחבות הרשמי של Mozilla , שמציעות כתריסר תוספים פופולריים כגון Firebug ו- Greasemonkey.

Microsoft Edge / Internet Explorer

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

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

Safari של Apple (OS X בלבד)

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

1. לחץ על Safari בתפריט הדפדפן, הממוקם בחלק העליון של המסך. כאשר התפריט הנפתח מופיע, בחר באפשרות העדפות . ניתן גם להשתמש בקיצור המקשים הבא במקום פריט בתפריט זה: COMMAND + COMMA (,)
2. ממשק ההעדפות של Safari אמור להיות מוצג כעת, המכסה את חלון הדפדפן. לחץ על הסמל מתקדם , הממוקם בצד הימני ביותר של הכותרת.
3. כעת יש לראות את ההעדפות המתקדמות . בחלק התחתון של המסך הוא אפשרות שכותרתה הצג תפריט פיתוח בשורת התפריטים , מלווה בתיבת סימון. אם אין סימן ביקורת שמופיע בתיבה, לחץ עליו פעם אחת למקום אחד.
4. סגור את ממשק העדפות על ידי לחיצה על "x האדום" נמצא בפינה השמאלית העליונה.
5. כעת אתה אמור להבחין באפשרות חדשה בתפריט הדפדפן בשם פיתוח , הממוקם בין סימניות לחלון . לחץ על פריט זה בתפריט. כעת יש להציג תפריט נפתח המכיל את האפשרויות הבאות.
   פתח את הדף באמצעות: מאפשר לך לפתוח את דף האינטרנט הפעיל באחד מהדפדפנים האחרים המותקנים כעת במחשב Mac.
   User Agent: מאפשר לך לבחור מתוך יותר מתריסר ערכי סוכן משתמש שהוגדרו מראש, כולל מספר גרסאות של Chrome, Firefox ו- Internet Explorer, וכן להגדיר מחרוזת מותאמת אישית משלך.
   כניסה למצב עיצוב תגובה : מעביר את הדף הנוכחי כפי שהוא יופיע במכשירים שונים וברזולוציות מסך שונות.
   הצג את מפקח האינטרנט: מפעיל את הממשק הראשי לכלי ה- dev של Safari, המוצב בדרך כלל בתחתית מסך הדפדפן ומכיל את הסעיפים הבאים: אלמנטים , רשת , משאבים , לוחות זמנים , מאתר באגים , אחסון , מסוף .
   הצג מסוף שגיאה: גם מפעיל את ממשק הכלים dev, ישירות לכרטיסייה מסוף אשר מציג שגיאות, אזהרות ונתוני יומן אחרים לחיפוש.
   הצג מקור דף: פותח את הכרטיסייה משאבים , המציגה קוד מקור עבור הדף הפעיל המסווג לפי מסמך.
   הצג משאבי דף: מבצע את אותה פונקציה כמו האפשרות ' הצג מקור דף' .
   הצג עורך קטע: פותח חלון חדש שבו תוכל להזין קוד CSS ו- HTML, תצוגה מקדימה של הפלט שלו ב- the-fly.
   הצג בונה תוספים: מספק את היכולת ליצור או לערוך תוספי Safari באמצעות CSS, HTML ו- JavaScript.
   הצג את ציר הזמן הקלטה: פותח את הכרטיסייה ציר זמן ומתחיל להציג בקשות רשת, פריסה ועיבוד מידע כמו גם ביצוע JavaScript בזמן אמת.
   מטמוני ריקים: מוחק את כל המטמון המאוחסן כעת בכונן הקשיח.
   השבת מטמוני: מפסיק את Safari מהמטמון, כך שכל התוכן מאוחזר מהשרת בכל טעינת דפים.
   השבת תמונות: מונע הצגת תמונות בכל דפי האינטרנט.
   השבת סגנונות: מתעלם ממאפייני CSS כאשר הדף נטען.
   השבת את JavaScript: הגבלת ביצוע JavaScript בכל הדפים.
   Disable Extensions: איסור כל התוספים המותקנים לפעול מתוך הדפדפן.
   השבת פריצות ספציפיות לאתר: אם Safari שונה כדי לטפל במפורש בבעיות ספציפיות לדף האינטרנט הפעיל, אפשרות זו תחסום שינויים אלה כך שהדף יטען כפי שהיה לפני ביצוע שינויים אלה.
   השבת הגבלות קבצים מקומיות: מאפשר לדפדפן גישה לקבצים בדיסקים המקומיים שלך, פעולה המוגבלת כברירת מחדל מטעמי אבטחה.
   בטל הגבלות על מעבר בין מקורות: הגבלות אלה מוגדרות כברירת מחדל למניעת XSS וסכנות פוטנציאליות אחרות. עם זאת, לעתים קרובות הם צריכים להיות מושבתים באופן זמני למטרות פיתוח.
   אפשר JavaScript משדה חיפוש חכם: כאשר מופעל, מספק את היכולת להזין כתובות אתר עם JavaScript: משולבות ישירות בשורת הכתובת.
   התייחסו לאישורי SHA-1 כחסרי ביטחון: אישורי SSL המשתמשים באלגוריתם SHA-1 נחשבים במידה רבה לא מעודכנים ופגיעים.