כיצד להציג תצוגה מקדימה של האתר שלך במכשירים שונים באמצעות Google Chrome

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

כלי DevTools של Chrome מאפשרים לך לנפות באגים בהיבטים שונים של האתר שלך. זה כולל שינוי ותצוגה מקדימה של קוד מקור HTML ו-CSS. זה גם מאפשר לך לנפות באגים בקוד JavaScript בצד הלקוח, ולהציג תעבורת רשת.

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

כדי לפתוח את סרגל הכלים של המכשיר ב-Google Chrome, עליך לפתוח את חלון כלי המפתחים של Chrome:

1. פתח אתר אינטרנט.
2. לחץ לחיצה ימנית על העמוד ולחץ על לִבדוֹק.
3. החלון של Chrome DevTools ייפתח. זה עשוי להיפתח בצד או בתחתית הדפדפן שלך, או כחלון חדש.
4. בפינה השמאלית העליונה של החלון, ישנם שני אייקונים. לחץ על הסמל שמציג מספר מכשירים בגדלים שונים.
5. המסך ישתנה כדי להראות לך איך האתר ייראה במכשיר נייד.

כיצד לעבור בין מכשירים שונים

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

1. החלק העליון של סרגל הכלים יציג באיזה סוג מכשיר אתה צופה כעת באתר שלך. לחץ על התפריט הנפתח כדי לבחור מכשיר אחר מהרשימה.
instagram viewer
2. במקום לבחור מכשיר קיים, תוכלו לבחור לצפות באתר במצב רספונסיבי. לחץ על התפריט הנפתח ובחר את מגיב אוֹפְּצִיָה.
3. לצד התפריט הנפתח, תוכל גם לבחור להזין רוחב וגובה מותאמים אישית של מכשיר.
4. במקום להקליד רוחב וגובה, ניתן גם ללחוץ ולגרור את פינות החלון כדי להתאים את הגודל.

כיצד להוסיף מכשיר מותאם אישית

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

1. לחץ על התפריט הנפתח שמפרט את כל המכשירים.
2. לחץ על לַעֲרוֹך.
3. תחת סרגל הצד של הגדרות, ודא שיש לך את מכשירים נבחרה הכרטיסייה. כאן, אתה יכול גם להציג רשימה של מכשירים נוספים שאתה יכול לבחור מהם.
4. לחץ על הוסף מכשיר מותאם אישית.
5. הזן שם, רוחב וגובה עבור המכשיר. ודא שאתה בוחר גם את סוג המכשיר, כגון אם זה מכשיר נייד או שולחני. אם תרחיב את רמזים ללקוח של סוכן משתמש אפשרות, תוכל להוסיף פרטים נוספים כגון דגם המכשיר, המותג או הגרסה.
6. לחץ על לְהוֹסִיף.
7. חזור לתפריט הנפתח שמפרט את כל המכשירים. אתה תראה את המכשיר המותאם אישית החדש שלך ברשימה.
8. תוכל לערוך את הפרטים האלה שוב מאוחר יותר על ידי חזרה לדף המכשיר המותאם אישית. הקלק על ה לַעֲרוֹך לחצן ליד שם המכשיר שלך כדי להתחיל בעריכה.

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

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

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

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

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

אתה יכול גם להשתמש בכלי DevTools של Google Chrome למטרות אחרות. אתה יכול להשתמש בו כדי לנפות באגים בבעיות CSS על ידי שינוי ה-CSS בכרטיסייה סגנונות של חלון האלמנט. זה מאפשר לך לראות מיד את כל שינויי ה-CSS, מה שיכול להאיץ את זרימת העבודה בקידוד שלך.

כיצד להשתמש ב-Google Chrome לאיתור באגים ב-CSS

קרא הבא