שינוי מקומי של תוכן מהאינטרנט וכותרות של תגובת HTTP

Sofia Emelianova

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

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

לדוגמה, אפשר להשתמש בשינויים מקומיים בתרחישים הבאים:

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

הערה: בסרטון שלמעלה מוסבר על תרחישי שימוש נוספים.

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

איך זה עובד

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

הערה: שינויים מקומיים משביתים את המטמון באופן אוטומטי.

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

מגבלות

ביטולים מקומיים פועלים עבור כותרות של תגובות מהרשת ועבור רוב סוגי הקבצים, כולל בקשות XHR ו-fetch, עם כמה חריגים:

• האפשרות 'שמירה במטמון' מושבתת כשהאפשרות ביטולים מקומיים מופעלת.
• כלי DevTools לא שומר שינויים שבוצעו בעץ ה-DOM בחלונית Elements.
• אם עורכים CSS בחלונית Styles, ומקור ה-CSS הוא קובץ HTML, כלי ה-DevTools לא ישמרו את השינוי.

במקום זאת, אפשר לערוך קובצי HTML בחלונית Sources.

הגדרת שינויים מקומיים מברירת המחדל

אתם יכולים לשנות תוכן אינטרנט או כותרות תגובה באופן מיידי בחלונית Network:

1. פותחים את כלי הפיתוח, עוברים לחלונית Network, לוחצים לחיצה ימנית על בקשה שרוצים לשנות ובוחרים באפשרות Override headers או Override content מהתפריט הנפתח.
2. אם עוד לא הגדרתם שינויים מקומיים, בסרגל הפעולות בחלק העליון, כלי DevTools יציג לכם הנחיה:
   1. בוחרים תיקייה שבה יישמרו הקבצים של השינויים מברירת המחדל.
   2. לוחצים על Allow (הפעלה) כדי לתת לכלי הפיתוח הרשאות גישה.
3. אם הגדרתם שינויים מקומיים אבל השבתתם אותם, כלי הפיתוח יפעיל אותם באופן אוטומטי.

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

   • החלונית מקורות מאפשרת לכם לבצע שינויים בתוכן באינטרנט.
   • העורך ברשת > כותרות > כותרות תגובה מאפשר לכם לבצע שינויים בכותרות תגובה.

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

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

כדי לראות במהירות את כל ההחלפות, בחלונית Network, לוחצים לחיצה ימנית על בקשה ובוחרים באפשרות Show all overrides (הצגת כל ההחלפות). כלי הפיתוח יפנו אתכם אל מקורות > החלפות.

שינוי תוכן באינטרנט

כדי לשנות את התוכן באינטרנט:

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

הערה: אי אפשר לשנות קבצים עם מיפוי למקור. אם לוחצים לחיצה ימנית על בקשה בחלונית Network ובוחרים באפשרות Override content, מוצג ב-DevTools תיבת דו-שיח שמעבירה אתכם לקובצי המקור המקוריים במקום זאת.

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

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

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

ביטול בקשות XHR או אחזור כדי לדמות משאבים מרוחקים

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

1. הגדרת ביטולים מקומיים
2. בכרטיסייה Network (רשת), מסננים את הבקשות לפי XHR/fetch, מוצאים את הבקשה הרצויה, לוחצים עליה לחיצה ימנית ובוחרים באפשרות Override content (החלפת תוכן).
3. מבצעים את השינויים בנתונים שאוחזרו ושומרים את הקובץ.
4. מרעננים את הדף ורואים שהשינויים שביצעתם הוחלו.

כדי ללמוד על תהליך העבודה הזה, כדאי לצפות בסרטון הבא:

מעקב אחרי שינויים מקומיים

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

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

שינוי כותרות תגובת HTTP

מלוח Network אפשר לשנות את כותרות התגובה של HTTP בלי גישה לשרת האינטרנט.

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

• כותרות של שיתוף משאבים בין מקורות (CORS)
• כותרות Permissions-Policy
• כותרות של בידוד מרובה מקורות

כדי לשנות כותרת תגובה מברירת המחדל:

1. מגדירים שינויים מקומיים ופותחים את הדף שרוצים לנפות בו באגים.
2. עוברים אל Network, מחפשים בקשה, לוחצים עליה לחיצה ימנית ובוחרים באפשרות Override headers. כלי הפיתוח מעבירים אתכם אל כותרות > כלי העריכה של כותרות התגובה.

3. מעבירים את העכבר מעל ערך של כותרת תגובה ומציבים שם את הסמן.

   

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

4. משנים או מוסיפים כותרת חדשה.

   הערה: בדוגמה הזו נוספה הכותרת Access-Control-Allow-Origin: * כדי להיפטר משגיאת CORS.

   

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

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

5. מרעננים את הדף כדי להחיל את השינויים.

עריכה של כל השינויים של כותרות תגובה מברירת המחדל

כדי לערוך את כל שינויי הכותרת במקום אחד:

1. לוחצים על .headers ליד הקטע Response Headers.

   

   כלי DevTools יפנה אתכם לקובץ .headers המתאים במקורות > החלפות.

2. עורכים את הקובץ .headers:

   

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

     הערה: אפשר להשתמש בתווים כלליים לחיפוש כדי לציין כמה בקשות בבת אחת. אפשר לציין כמה תווים באמצעות * ותו יחיד באמצעות ?.

   • כדי להוסיף צמד כותרת/ערך לכלל, מעבירים את העכבר מעל צמד אחר ולוחצים על .

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

3. שומרים את הקובץ .headers באמצעות Command / Control + S.

4. מרעננים את הדף כדי להחיל את השינויים.