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

Sofia Emelianova

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

איך זה עובד:

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

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

הגבלות

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

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

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

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

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

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

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

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

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

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

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

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

כדי לעקוף תוכן מהאינטרנט:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   

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

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

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

   

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

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

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

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

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

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

   

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

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

   

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

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

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

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

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

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