שימוש ב-Live Reload עם Edge: מדריך מלא עם קוד VS

אם אתם מפתחים עבור האינטרנט סביר להניח שתרצו לראות את השינויים באופן מיידי בדפדפן מבלי שתצטרכו ללחוץ על F5. עם אדג מיקרוסופט ניתן לאפשר טעינות חמות במספר דרכים, כולל באמצעות הרחבות VS Code כמו Live Server או ה-Live Preview החדש, ואפילו למנף זרימות עבודה של טעינה חמה מסביבות אחרות במידת הצורך.

במדריך מעשי זה תראו כיצד להפעיל Live Reload עם Edge מ-Visual Studio Code, הבדלים בין Live Server ל-Live Preview, כיצד לבצע ניפוי באגים עם Edge DevTools מ-VS Code ובאילו מקרים הטעינה המיידית אינה חלה (לדוגמה, מגבלות אופייניות של טעינה חמה או כאשר הפרויקט שלכם כבר מעלה שרת משלו).

מה המשמעות של טעינה מחדש חיה, טעינה מחדש חמה והפעלה מחדש חמה?

טעינה מחדש חיה באינטרנט זהו רענון אוטומטי של הדפדפן כשמשנים קובץ. העורך מזהה את השינוי ומרענן את הדף (או מוסיף סגנונות) מבלי שתצטרכו לעשות זאת. זה אידיאלי עבור HTML/CSS/JS סטטיים או פרויקטים פשוטים ללא בניית קבצים מתקדמת.

טעינה חמה (כמו ב-Flutter) הולך צעד אחד קדימה: הוא מזריק קוד מעודכן לאפליקציה פעילה, תוך שמירה על מצב הקוד ככל האפשר. בסביבות כמו Flutter, הוא פועל על גבי מכונת Dart הווירטואלית: שומר עדכוני מחלקות ובונה מחדש את עץ הווידג'טים מבלי להפעיל מחדש את האפליקציה לחלוטין. זה שימושי עבור ניסוי מהיר עם ממשקים, הוספת תכונות ותיקון באגים מבלי לאבד את הנקודה שבה האפליקציה נמצאת.

הפעלה מחדש חמה מפעיל מחדש את האפליקציה מההתחלה, ומחיל שינויים שטעינה חמה לא יכולה להכניס (למשל, אתחול סטטי). ב-Flutter, ניתן לטעון מחדש חמה או לחדש מחדש חמה רק במצב ניפוי שגיאות; אם אתה מפעיל מ מסוף, הפקודה flutter run קבל את המפתח r לטעינה חמה. גישה זו שומרת על המצב במידת האפשר, אך ישנם מקרים מיוחדים שבו לא תראו שינויים עד שתפעילו מחדש.

מגבלות טעינה חמה אופייניותלא מבוצעים מחדש main() ni initState()שינויים בסוגים גנריים, המרת enums למחלקות (או להיפך), או שינויים בפונקציות אתחול סטטיות לא ישתקפו עד להפעלה מחדש חמה. שדות סטטיים ומשתנים גלובליים נחשבים למצב ואינם מוערכים מחדש בעת טעינה מחדש. בעת עריכת משהו ששובר את הקומפילציה, תוצג שגיאה בקונסולה, ותצטרך לתקן אותה לפני שתמשיך. דפוסים אלה דומים מבחינה רעיונית למה שקורה כאשר שרת אינטרנט מנסה להזריק שינויים: לא הכל ניתן לחשב מחדש תוך כדי תנועה.

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

שרת חי בקוד VS: טעינה מחדש מהירה של קבצי HTML וקבצים סטטיים

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

קיצורי דרך להתחלה/עצירה השרת ב-VS Code: כפתור סטטוס "Go Live"; לחיצה ימנית על קובץ HTML ו"Open with Live Server"; תפריט הקשר בעורך; קיצור דרך alt+L, alt+O לפתוח ו alt+L, alt+C לסגירה (ב-macOS cmd+L, cmd+O y cmd+L, cmd+C); או מהלוח עם "שרת חי: פתיחה/עצירה". אם אין לך כאלה .html בסביבת העבודה, השתמשו בשיטות שאינן תלויות בסייר הקבצים.

תכונות שתאהבו עם Edgeטעינה מהירה של הדפדפן, אי הכללת קבצים ממעקב אחר שינויים, תיקיית שורש ומספר פורט ניתנים להגדרה, בחירת דפדפן ברירת מחדל, תמיכה בכל דפדפן באמצעות פרמטרי שורה פקוד (אתה יכול לזרוק את אדג'), צרף ניפוי שגיאות של כרום (דרך js-debug) וחיבור מרחוק דרך WLAN (שימושי לבדיקות ניידות). הוא תומך גם ב-HTTPS, CORS, proxy, SVG, multi-root והתאמה אישית של התג שמזריק את תסריט להטעין.

התקנהפתח את קוד VS, לחץ Ctrl+P ורוץ ext install ritwickdey.liveserverההרחבה מלוטשת ביותר ומתחזקת יומן שינויים ושאלות נפוצות; לדוגמה, מקרים של שימוש גבוה במעבד וכיבוי בלתי צפוי של מארח ההרחבה ב-macOS טופלו. ישנה גם גרסה נגזרת של "Live Server++ (beta)" שמנסה להחיל שינויים מבלי לשמור.

מתי להשתמש בשרת חיאם לפרויקט שלכם אין שרת פיתוח משלו (לדוגמה, ל-React או Angular כבר יש HMR), Live Server יספק לכם חוויה חלקה ומיידית. אם כבר יש לכם שרת פיתוח, זה נורמלי לפתוח את כתובת ה-URL של שרת זה ב-Edge ולהשתמש בה רק לצורך ניפוי שגיאות.

תצוגה מקדימה חיה (מיקרוסופט): שרת משולב וניפוי שגיאות עם Edge

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

תצוגה מקדימה של HTML תוך כדי תנועה: כפתור בפינה הימנית העליונה של העורך או תפריט ההקשר כדי לפתוח את התצוגה. הוא מציע גם דפדפן מוטמע עם היסטוריה, שורת כתובת, חיפוש (עם Ctrl+F) וגישה לכלי הפיתוח של תצוגת האינטרנט.

מרענן בשידור חי: כברירת מחדל מתעדכן תוך כדי הקלדה; ניתן להגדרה עם livePreview.autoRefreshPreview לרענון בעת ​​שמירה או השבתה. ניתן לא לכלול טעינה מחדש של דפים על ידי הוספה data-server-no-reload al <body>.

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

תצוגה חיצונית וניפוי שגיאותבנוסף לתצוגה המוטמעת, ניתן לפתוח ב-Edge ולצרף ניפוי באגים הודות לשילוב עם התוסף js-debug ועם הרחבת כלי פיתוח Edgeהפעל את "תצוגה מקדימה חיה: הצג תצוגה מקדימה של ניפוי שגיאות" כדי להגדיר את זרימת העבודה שלך עם נקודות עצירה ובדיקת אלמנטים.

כיצד לפתוח ולבצע ניפוי באגים ב-Microsoft Edge מ-VS Code

כדי להשתמש ב-Edge כדפדפן יעד עם Live Reload יש לך שתי דרכים קלות מ-VS Code: Live Server (הגדרת Edge כדפדפן ברירת המחדל או העברת הנתיב דרך שורת הפקודה) או Live Preview (בחירת דפדפן Edge החיצוני). Live Preview גם מקל על... ניפוי שגיאות משולב.

שלב אחר שלב עם תצוגה מקדימה חיה כדי לבצע ניפוי באגים ב-Edge: פתחו את קובץ ה-HTML והפעילו את התצוגה עם Live Preview; השתמשו בפקודה "Live Preview: Show Debug Preview"; בחרו ניווט חיצוני ו-Edge כיעד; VS Code יפתח את Edge ויצרף את js-debug, שיאפשר לכם להגדיר נקודות עצירה, להשהות חריגים ולבדוק את ה-DOM עם כלי פיתוח Edge.

טיפים לניפוי באגים- אם התצוגה החיצונית ב-Edge אינה תואמת לתצוגה המוטמעת, נקה את מטמון הדפדפן; השבת תוספים שמזריקים סקריפטים; ובדוק מה לעשות אם Edge לא טוען דפי אינטרנטולאשר שלא בדקת data-server-no-reload אם אתם מצפים לרענון אוטומטי, שינויי CSS מוזרקים מבלי לטעון מחדש את כל הדף במידת האפשר.

ארכיטקטורות עם שרת משלו (React, Angular וכו'): פריימוורקים אלו כבר מגיעים עם שרת משלהם ותחליף למודולים חמים. השתמשו ב-"npm run dev" שלהם או מקביל, לאחר מכן ב-"Simple Browser: Show" המובנה ב-VS Code, או פתחו את Edge ישירות. תצוגה מקדימה חיה שימושית ביותר כאשר אין שרת.

מגבלות נפוצות ושיטות עבודה מומלצות בנוגע לטעינה מחדש

לא כל שינוי מיושם מחדש עם מילוי אוטומטי; התייעץ רענון אוטומטי של דף אינטרנט כדי להבין את ההתנהגות. אם תשנו קטע שאינו מבוצע מחדש במהלך מחזור הרינדור הרגיל של הדף, לא תראו תוצאות עד לרענון מלא. בסביבות טעינה חמה, שינויים במשתנים סטטיים, גנריים או המרות enum/class דורשים "הפעלה מחדש חמה". שדות סטטיים ומשתנים גלובליים נחשבים למצב ואינם מוערכים מחדש בעת טעינה מחדש. בעת עריכת משהו ששובר את הקומפילציה, תוצג שגיאה בקונסולה, ותצטרכו לתקן אותה לפני שתמשיכו. דפוסים אלה דומים מבחינה רעיונית למה שקורה כאשר שרת אינטרנט מנסה להזריק שינויים: לא הכל ניתן לחשב מחדש תוך כדי תנועה.

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

אי הכללת קבצים ונתיביםבשרת Live ניתן לא לכלול תבניות שלא יפעילו טעינה מחדש, ולבחור תג הזרקה חלופי (ברירת מחדל body o head). ניתן גם להגדיר מארח מועדף (localhost o 127.0.0.1), CORS ו-proxy אם האפליקציה שלך צורכת ממשקי API מקומיים.

HTTPS, פורטים ו-multi-rootLive Server תומך ב-HTTPS וב-multi-root. Live Preview תומך גם ב-multi-root ומציג פורטים פתוחים במחוון שורת המצב. אם אתה עובד ללא סביבת עבודה, תצוגות מקדימות מוגשות במופעים נפרדים עם נתיבים מוחלטים, דבר שיכול להשפיע על קישורים יחסיים.

מקרים מתקדמים: שינויים שלא נשמרו, תצוגות ניידות ומצב קיוסק

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

בדיקות ניידותגם Live Server וגם Live Preview יכולים לחשוף את התצוגה המקדימה דרך WLAN כך שתוכלו טלפון חכם טען את הדף מהרשת המקומית. זה מאפשר לך לראות כיצד Edge Mobile או כל דפדפן נייד מעבד את האפליקציה שלך בזמן אמת.

שילוט דיגיטלי וקיוסקיםאם אתם מפיצים תוכן אינטרנט ב אנדרואיד משובצים דפדפני "קיוסק" הכוללים טעינה אוטומטית באירועים מסוימים (הדלקת מסך, חיבור מחדש לרשת, חוסר פעילות וכו'), חסימת ממשק, הוספת כתובות URL לרשימה הלבנה/שחורה וניהול מרחוק. פתרונות אלה משתמשים ב-WebView של אנדרואיד, לא ב-Edge, אך הם ממחישים זאת. טעינה אוטומטית ניתן לתזמר אותו גם מחוץ לשולחן העבודה, עם אפשרויות להפעלה מחדש, ניקוי מטמון או שחזור שגיאות.

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

שאלות נפוצות ופתרון בעיות

"תצוגה מקדימה של קובץ שאינו צאצא של קובץ השורש של השרת..."- השרת משרת משרת שורש סביבת העבודה או מתת-ספרייה מוגדרת. אם תציג תצוגה מקדימה של קובץ מחוץ לסביבת העבודה, קישורים יחסיים מסוימים (כגון אלה המצביעים על השורש) עלולים להישבר. פתח את סביבת העבודה בשורש הפרויקט או התאם livePreview.serverRoot.

מרחבי קוד ותצוגה מוטמעתבסביבות מרוחקות, פתחו ידנית פורטים מועברים (למשל, 3000/3001) מהכרטיסייה "פורטים" בעורך ואפשרו הפניות מחדש בדפדפן. התצוגה המוטמעת אמורה לפעול לאחר מכן.

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

אין לי HTML בסביבת העבודהעם Live Server, השתמשו בפלטת הפקודות או בקיצורי דרך כלליים כדי להפעיל את השרת (שיטות לחיצה ימנית דורשות ש-HTML יהיה פתוח). ודאו ששורש השרת מצביע למקום שבו נמצאים הקבצים שלכם.

אני רוצה להשהות טעינה מחדש בדף מסוים: בתצוגה מקדימה חיה מוסיף data-server-no-reload ב <body> מאותו דף כדי שלא ייכללו ברענון אוטומטי.

תצורה מעשית: Edge כדפדפן ברירת המחדל

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

עם תצוגה מקדימה חיהבחר את יעד התצוגה המקדימה החיצונית ובחר Edge. עבור ניפוי שגיאות, השתמש ב-"הצג תצוגה מקדימה של ניפוי שגיאות" כדי ש-js-debug יצורף אוטומטית ויהיה כלי פיתוח Edge זמין מקוד VS.

HTTPS מקומיאם עליכם לבדוק עובדי שירות, אישורים או ממשקי API הדורשים הקשר מאובטח, הפעילו HTTPS בשרת הפיתוח שלכם (Live Server תומך בכך). זכרו לסמוך על האישור המקומי ב-Edge אם אתם יוצרים אותו בעצמכם.

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

מתי לא להשתמש ב-Live Reload וחלופות

מסגרות עם שרת פיתוח משלהןפלטפורמות React, Angular, Vue ודומותיהן מגיעות כולן עם טעינה חמה/HMR. אינכם זקוקים ל-Live Server/Live Preview כדי להתחיל לפעול; פשוט פתחו את כתובת ה-URL של שרת הפיתוח ב-Edge ובצעו ניפוי באגים באמצעות js-debug ו-DevTools.

Apps ילידים או היברידייםב-Flutter, טעינה מחדש חמה/הפעלה מחדש חמה מנהלת את מחזור החיים והמצב. Edge אינו דפדפן היעד שם, אך הדפוס המנטלי של מתי שינוי מוחל ומתי עליך להפעיל מחדש הוא דומה: אם תשנה אתחול סטטי או את צורת הסוגים, תצטרך הפעלה מחדש מלאה.

דפים עם אימות מורכבאם אתה תלוי ב-NTLM/Kerberos או descargas עקב POSTs מיוחדים, ייתכן שסביבת התצוגה המקדימה המקומית לא תשכפל את האינטגרציה במדויק. במקרים אלה, יש לבדוק בסביבת staging אמיתית של HTTPS ולהשתמש בכלי ה-Edge DevTools עם session תקין.

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

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