מה חדש ב-Visual Studio 2013? מדריך ל- Browser Link

לאחרונה יצא Visual Studio 2013 והוא מביא איתו עדכונים רבים. אשתדל לספר ולפרט עליהם יותר בפוסטים הבאים, אך פוסט זה יהיה על הפיצ'ר (Feature) החדש שנקרא Browser Link.

 

ניתן להוריד את הגרסא החדשה בדף ההורדה של Visual Studio  

 

אז מה זה בעצם Browser Link ?

Browser Link הוא תכונה (Feature) שהתווספה ל- Visual Studio 2013 ומה שהיא עושה זה בעצם שמירה על קשר של Visual Studio עם הדפדפן. 

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

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

 

איך משתמשים ב Browser Link ?

 ב- Toolbar העליון ב Visual Studio יש את הכפתור הבא (מסומן בצהוב בתמונה למטה) אשר לחיצה עליו פותחת את האפשרויות עבור Browser Link. צריך לוודא שיש סימון של V על האפשרות של Enable Browser Link.

 

 

לחיצה על Browser Link Dashboard תפתח את המסך הבא שבו ניתן לראות באיזה דפדפנים האתר פתוח כרגע ובאיזה דף הוא נמצא.

בדוגמא פה אפשר לראות שהאתר פתוח ב 3 דפדפנים (פעם אחת ב Chrome ופעמיים ב Firefox).

 

 

לחיצה על אחד הדפדפנים ברשימה תפתח אפשרות של Refresh אשר תרענן רק את הדפדפן הצפציפי שבחרתי (שימו לב, שאני לא צריך לעשות רענון בדפדפן עצמו, אלא הרענון נעשה על ידי Visual Studio ו- Browser Link בלבד)

 

 

אם נרצה לרענן את כל הדפדנים נלחץ על הכפתור הזה ב- Toolbar העליון.

 

 

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

 

 

לאחר מכן לחיצה על Browse With....

 

 

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

(ניתן גם לבחור את גודל החלון של הדפדפן שיפתח)

 

 

 

איך Browser Link עובד ?

תכונה זאת מופעלת על ידי שימוש ב- Javascript ו- SignalR.

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

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

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

למי שמעוניין להרחיב את הידע שלו על SignalR (מומלץ!!) צירפתי מספר קישורים שמסבירים מה זה בצורה יותר מפורטת ואיך להשתמש בו: המדריך הרישמי של Microsoft (באנגלית), הפוסט של Ran Wahle (באנגלית), בפוסט של טל בן שלום (בעברית), ובוידאו מכנס Build 2012.

 

 

 

הוסף תגובה