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

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

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

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

גוגל כרום

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

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

Mozilla Firefox

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

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

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

Microsoft Edge / Internet Explorer

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

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