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

Sofia Emelianova

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

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

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

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

הערה: מומלץ לצפות בסרטון שלמעלה כדי לקבל מידע נוסף על תרחישי שימוש.

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

איך זה עובד

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

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

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

מגבלות

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   

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

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

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

   

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

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

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

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

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

1. לוחצים על .headers לצד הקטע כותרות של תגובות.

   

   DevTools יעביר אתכם לקובץ .headers התואם בקטע Sources (מקורות) > Overrides (החלפות).

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

   

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

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

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

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

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

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