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

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

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

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

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

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

איך זה עובד

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

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

מגבלות

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

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

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

הגדרת ביטולים מקומיים

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. מגדירים שינויים מקומיים ובודקים, למשל, את דף הדגמה הזה.
2. עוברים אל רשת, מחפשים את הבקשה, לוחצים עליה לחיצה ימנית ובוחרים באפשרות שינוי כותרות. כלי הפיתוח יעבירו אתכם לעורך Headers‏ > Response Headers.

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

   

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

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

   

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

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

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

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

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

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

   

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

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

   

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

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

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

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

4. refresh צריך לרענן את הדף כדי להחיל את השינויים.