בכלי הפיתוח יש חלונית סיוע מבוסס-AI שעוזרת להבין את האתר ולפתור בעיות באמצעות צ'אט עם סוכן AI מובנה.
החלונית AI assistance מבוססת על Gemini ומאפשרת:
- מתמחה בפיתוח אתרים.
- יכול לענות על שאלות כלליות לגבי דף האינטרנט כולו, וגם לספק תובנות ספציפיות לגבי מגוון נושאים, כולל, בין היתר, סגנון, רשת, ביצועים ועוד.
- מצמצם באופן אוטונומי את ההקשר הספציפי שרוצים לשוחח עליו ובוחר אותו, למשל רכיבי DOM, בקשות רשת, אירועים של מעקב ביצועים ועוד.
- יכול לבצע פעולות אוטונומיות כמו הפעלת ביקורות ותיעוד של מעקב ביצועים.
- הוא מספק הסבר מפורט על הפעולות וההנמקות שלו, וכולל קישורים לחלקים רלוונטיים בכלי פיתוח, כך שאפשר לבדוק אותם בלחיצה.
- יכול להציע שינויים בקוד וליצור הנחיה עם התובנות שלו לסוכן התכנות שלך לביצוע.
בעזרת AI, אתם יכולים לנפות באגים בעיצוב, ברשת, בביצועים, במקורות של האתר ועוד.
כדי להתכתב בצ'אט עם Gemini בחלונית עזרה מ-AI בצורה יעילה, כדאי ללמוד איך לפתוח את החלונית, לכתוב הנחיות ולשלוט במהלך השיחה.
פתיחת החלונית של כלים מבוססי-AI
החלונית AI assistance נפתחת במגירה כברירת מחדל.
כדי לפתוח את החלונית, לוחצים על הלחצן עזרה מ-AI שנמצא בנקודת הכניסה הגלובלית בצד שמאל של סרגל הכלים הראשי בחלק העליון.
מהחלוניות
אפשר לפתוח את החלונית עם ההקשר של השיחה ישירות מהחלוניות רכיבים, רשת, מקורות או ביצועים בשתי דרכים:
לוחצים על הלחצן
ניפוי באגים באמצעות AI לצד רכיב, בקשה לאחזור מהרשת, קובץ מקור או תובנה מורחבת לגבי ביצועים.
לוחצים לחיצה ימנית על רכיב, בקשה, קובץ או רשומה של מעקב, ובוחרים באחת מאפשרויות ההנחיה הנפוצות מתוך תפריט ההקשר ניפוי באגים באמצעות AI.
מתפריט הפקודות
כדי לפתוח את הסיוע מבוסס-AI מתפריט הפקודות, מקלידים AI ואז מריצים את הפקודה הצגת סיוע מבוסס-AI, שלידה מופיע התג חלונית.
מהתפריט 'כלים נוספים'
אפשרות נוספת: בפינה השמאלית העליונה, בוחרים באפשרות אפשרויות נוספות > כלים נוספים > עזרה מ-AI.
הנחיות
כשמתחילים שיחה חדשה, עזרה מ-AI מציעה הנחיות לדוגמה כדי לעזור לכם להתחיל במהירות.
לוחצים על אחת ההנחיות כדי למלא מראש את שדה ההנחיה להזנת קלט בתחתית החלונית.
אפשרות אחרת היא להקליד הנחיה או שאלה בשדה להזנת קלט.
כדי לשלוח הנחיה, מקישים על Enter או לוחצים על החץ בצד ימין של שדה להזנת קלט.
הנחיות פתוחות ללא הקשר
בתיבת הצ'אט החופשית, אפשר לשאול שאלות פתוחות ברמה גבוהה יותר בלי הקשר קודם. לדוגמה:
How to use DevTools to debug accessibility?הכלים מבוססי ה-AI יפעילו קודם ביקורת נגישות של Lighthouse כדי לתת תשובה טובה יותר להנחיה שלכם.
What are the slowest network requests on this page?העזרה מ-AI תספק רשימה של בקשות חשודות וקישורים אליהן בחלונית Network (רשת), כך שתוכלו לבחור בקשה כהקשר לשיחה בלחיצה.
What performance issues exist on the page?עזרה מ-AI תתעד באופן אוטומטי מעקב ביצועים עם ההגדרות שבחרתם כדי לענות על ההנחיה הזו.
הנחיות כמו
How do I use the Animation panel?אוWhere is the high contrast setting in DevTools?יספקו עזרה ישירה בכלי הפיתוח עצמו.
אחרי שתתחילו את הצ'אט, העזרה מבוססת-AI תעדכן באופן חכם את ההקשר על סמך הפעולות שלכם כשהצ'אט ריק, ותכבד את הבחירות הידניות שלכם כשתבצעו אותן.
הנחיות עם הקשר
כשפותחים את העזרה מ-AI מחלונית, ההקשר המתאים של השיחה נבחר בתיבת הצ'אט, כך שאפשר לשוחח ספציפית על מה שבחרתם.
בכל שלב אפשר לשנות את ההקשר באופן ידני על ידי בחירת רכיב ברכיבים, בקשה ברשת, רשומה במעקב בביצועים או קובץ במקורות.
אפשר גם להעתיק חלקים מקובץ, למשל מהחלונית מקורות, ולהדביק אותם בצ'אט כדי לשאול מה הם עושים.
אחרי כן, כדאי לקרוא מידע נוסף על רצף השיחה בעזרה מבוססת-AI.
מהלך השיחה
שליחת הנחיה מתחילה את השיחה עם הנציג. כדי לקבל את המידע שנדרש כדי לענות על ההנחיה שלכם בצורה הטובה ביותר, הסוכן יוצר ומריץ JavaScript שמפעיל ממשקי API של אתרים.
ההתקדמות של ה-Agent מוצגת בשלבים. הסטטוס הראשוני של השלב הוא Investigating….
התווית של השלב הראשוני מתעדכנת כשהסוכן מבצע פעולות ספציפיות יותר כדי לענות על ההנחיה.
בהתאם למה שמנסים לנפות באגים, יכול להיות שהסוכן יבצע גם פעולות ב-DevTools, כמו הקלטת מעקב ביצועים או הפעלת ביקורות של Lighthouse.
הדרכה מפורטת של הסוכן
אחרי שהסוכן יוצר תשובה להנחיה שלכם, התווית של השלב הראשוני משתנה להצגת הסבר מפורט של הסוכן או להצגת תהליך החשיבה. תוכלו להרחיב את התווית כדי לראות את השלבים שהסוכן ביצע כדי לנתח את הנתונים בחלונית צדדית בצד שמאל.
השלבים כוללים:
- קטעי קוד שניתן להרחיב שהסוכן ביצע יחד עם הנתונים שהוחזרו. אפשר להעתיק את הקוד ולהריץ אותו במסוף.
- ווידג'טים שמציגים את הממצאים בפורמט קריא יותר.
בווידג'טים יש לחצן Reveal (חשיפה) בפינה השמאלית העליונה, שמעביר אתכם לחלק הרלוונטי בכלי הפיתוח.
הנחיות להמשך
אחרי שהסוכן מגיע לתשובה סופית, הוא עשוי להציע הנחיות להמשך. לוחצים על אחת מהאפשרויות כדי להמשיך את השיחה.
יצירת הנחיה לסוכן התכנות
כדי ליצור הנחיה לסוכן התכנות שלך, לוחצים על העתקה לסוכן התכנות.
הסוכן יסכם את הממצאים והתובנות שלו ויספק הנחיה שניתן לפעול לפיה, בצורה ממוזערת או בפורמט Markdown שקריא לאנשים. תוכלו להעתיק את ההנחיה ללוח ולכתוב קוד באמצעות סוכן AI שתבחרו.
שיחות מושהות
עזרה מבוססת-AI עשויה ליצור קוד עם תופעות לוואי. במקרה כזה, השיחה מושהית לפני שהקוד מופעל.
כשהשיחה מושהית, בודקים את הקוד שהנציג הציע. לוחצים על המשך כדי להמשיך או על ביטול כדי למנוע את ההפעלה.
אפשר לבדוק את השינויים המוצעים בקוד בחלונית השינויים.
הסוכן מחיל את השינויים בכלי הפיתוח, אבל אתם יכולים להגדיר את סביבת העבודה כך שכלי הפיתוח ישמרו את השינויים במקורות.
שמירת השינויים בסביבת העבודה
בעזרת תיקייה מקושרת של סביבת עבודה, אתם יכולים לשמור שינויים בסגנון שהוצעו על ידי סיוע מבוסס-AI בחזרה לקובצי המקור של CSS במחשב.
לשם כך:
קודם צריך ליצור קובץ מטא-נתונים ולקשר תיקייה ב-Workspace.
אפשר גם להוסיף תיקייה באופן ידני.
מתחילים צ'אט מהחלונית 'רכיבים'.
מבקשים מעזרה מבוססת-AI לשנות את ה-CSS.
עזרה מבוססת-AI עשויה ליצור קוד ולהשהות את ההרצה. בודקים את הקוד ולוחצים על המשך כדי לבדוק את השינויים באתר הפעיל.
מרחיבים את הקטע שינויים שלא נשמרו ולוחצים על החלה על סביבת העבודה.
בודקים את השינויים ב
diffולוחצים על שמירת הכל.
כדי להבין את תהליך העבודה הזה, אפשר לעיין במאמרים הבאים:
לא ניתנה תשובה
יכולות להיות סיבות שונות לכך שעזרה מ-AI לא מספקת תשובות.
אם לדעתכם ההנחיה שלכם היא משהו שהעזרה מ-AI צריכה להיות מסוגלת לדון בו, אתם יכולים לדווח על באג.
היסטוריית השיחה
אחרי שמתחילים שיחה, כל תשובה שמתקבלת בהמשך מבוססת על האינטראקציות הקודמות ביניכם לבין ה-AI.
העזרה מבוססת-AI שומרת את היסטוריית השיחות בין סשנים, כך שתוכלו לגשת לשיחות הקודמות גם אחרי טעינה מחדש של כלי הפיתוח או של Chrome.
משתמשים באמצעי הבקרה בפינה הימנית העליונה של החלונית כדי לשלוט בהיסטוריית השיחות.
התחלת מדידה חדשה
כדי להתחיל שיחה חדשה עם ההקשר של השיחה שנבחרה כרגע, לוחצים על הכפתור .
המשך
כדי להמשיך שיחה קודמת, לוחצים על לחצן ובוחרים אותה מהתפריט.
מחיקה
כדי למחוק שיחה מההיסטוריה, לוחצים על לחצן .
דירוג תשובות ומתן משוב
עזרה מבוססת-AI היא תכונה ניסיונית. לכן אנחנו מחפשים באופן פעיל משוב כדי ללמוד איך לשפר את איכות התשובות ואת החוויה הכוללת.
הצבעה לתשובות
כדי לדרג תשובה, לוחצים על הכפתורים אהבתי ו לא אהבתי שמתחת לתשובה.
דיווח על תשובות
כדי לדווח על תוכן בלתי הולם, לוחצים על לחצן לצד לחצני ההצבעה.