העולם המופלא של לשונית הנטוורק

כמה תוספות מעניינות ללשונית ה-network של כלי המפתחים של כרום שיש סיכוי שאתם לא מכירים

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

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

למנוע טעינה של משאבים

זה שימושי מאוד אם למשל אתם מפתחים תוסף צד שלישי במחשב שלכם ולא רוצים שהתוסף של הפרודקשן ייטען. או אם אתם רוצים לחסום בקשת XHR כדי לראות איך הסקריפט שלכם מטפל בתקלות או כל בעיה אחרת. לחיצה על Block request URL תחסום את הבקשה הזו בכל ריפרש מעכשיו ועד עולם.

לחיצה על כפתור ימני על הבקשה ובחירה ב-Block request URL תחסום את הבקשה לתמיד.
לחיצה על כפתור ימני על הבקשה ובחירה ב-Block request URL תחסום את הבקשה לתמיד.

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

לשונית הבקשות החסומות.
לשונית הבקשות החסומות.

לקבוע מהירות אינטרנט

אם יש לכם לקוחות במדינת עולם שלישי (כמו למשל לקוחות פרטנר בישראל שעובדים עם 3G כל הזמן כמו בימי הביניים) ואתם רוצים לראות איך האתר עובד בשבילם – אפשר לקבוע את מהירות האינטרנט באמצעות Throttling. לחיצה על No Throttling תראה לכם תפריט שבו אפשר לקבוע את מהירות החיבור. ריפרוש יגרום לכם להרגיש כמו לקוחות אורנג' מייד.

No Throttling
No Throttling

Disable cache

אין דבר שאנחנו אוהבים יותר מ-cache בפיתוח. אם אנו רוצים להמנע מזה – יש לנו אפשרות ללחוץ על disable cache וייגמרו ימי ctrl + F5 או command + F5.

Disable cache + Offline
Disable cache + Offline

ממש ליד יש לחצן שמאפשר לכם לדמות offline – שזה סופר שימושי לאפליקציות שאמורות לעבוד גם באופליין.

יריה מחדש של בקשת XHR

אם יש לכם בקשות AJAX שאתם רוצים לירות מחדש – כפתור ימני ובחירה ב'replay' – הבקשה נשלחת בדיוק כפי שהיא. מאוד שימושי לדיבאגינג.

לחיצה ימנית על בקשת Replay XHR

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

פוסטים נוספים שכדאי לקרוא

עבודה בהיי טק

איך מראיינים סניורים?

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

פיתוח ב-JavaScript

Axios interceptors

תכנון נכון של קריאות AJAX באפליקציה ריאקטית וניהול השגיאות או ההצלחות עם פיצ׳ר נחמד של axios

פתרונות ומאמרים על פיתוח אינטרנט

רינדור של קליינט סייד עם SSR

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

תמונה מצוירת של רובוט שמנקה HTML
יסודות בתכנות

סניטציה – למה זה חשוב

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

יסודות בתכנות

מספרים בינאריים בקוד

איך, ויותר חשוב למה, משתמשים במספרים בינאריים בתכנות? גם בפייתון ובג׳אווהסקריפט?

גלילה לראש העמוד