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

Sofia Emelianova

באמצעות שינויים מקומיים, אתם יכולים ליצור אב טיפוס ולבדוק שינויים ותיקונים בלי להמתין עד שהקצה העורפי, הצדדים השלישיים או ממשקי ה-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. אחרי שמגדירים ומפעילים שינויים מקומיים מברירת המחדל, בהתאם לשינוי שאתם עומדים לבצע, כלי הפיתוח יעביר אתכם אל:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   

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

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

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

   

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

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

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

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

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

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

   

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

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

   

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

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

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

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

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

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