צ'אט עם סיוע מבוסס-AI

בכלי הפיתוח יש חלונית AI assistance (עזרה מבוססת-AI) שעוזרת להבין את האתר ולפתור בעיות באמצעות צ'אט עם סוכן AI.

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

כדי להתכתב בצ'אט עם Gemini בחלונית עזרה מ-AI בצורה יעילה, כדאי ללמוד איך לפתוח את החלונית, לכתוב הנחיות ולשלוט במהלך השיחה.

פתיחת החלונית של כלים מבוססי-AI

החלונית עזרה מ-AI נפתחת במגירה.

כדי לפתוח את החלונית, לוחצים על הלחצן עזרה מ-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 בחלוניות שונות.

סיוע מבוסס-AI בעיצוב

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

פתיחת כלי ה-AI מחלונית הרכיבים

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

כשפותחים את העזרה של AI בצורה הזו, רכיב ה-DOM שנבדק כבר נבחר מראש כרכיב הקשר לשיחה.

אפשר גם ללחוץ על הלחצן הצף שמצורף לצומת DOM שמעבירים מעליו את העכבר.

הקשר השיחה

הצ'אטים עם עזרה מ-AI תמיד קשורים לרכיב שנבדק כרגע, שהוא הרכיב האחרון שנבחר בעץ ה-DOM בחלונית Elements. הפניה לרכיב הזה מוצגת בפינה הימנית התחתונה של החלונית.

אפשר לשנות את ההקשר באמצעות הכלי לבחירת רכיבים שנמצא ליד הרכיב הנוכחי או באמצעות בחירה מתוך עץ ה-DOM בחלונית Elements.

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

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

השיחה מתבססת על הרכיב שנבדק כרגע, אבל העזרה מ-AI יכולה לגשת לכל ממשקי ה-API של האינטרנט כדי לאסוף מידע נוסף מהדף שנבדק. זה כולל שליחת שאילתות לגבי רכיבים אחרים באמצעות document.querySelector או הערכה של סגנונות מחושבים.

עזרה מ-AI ברשת

אפשר להשתמש בחלונית AI Assistance (עזרה מ-AI) כדי להבין את הבקשות שנשלחות מהאתר שלכם לרשת.

פתיחת החלונית של כלים מבוססי-AI מחלונית הרשת

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

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

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

הקשר השיחה

הצ'אטים עם AI assistance קשורים לבקשת הרשת שנבחרה כרגע ברשימת הבקשות בחלונית Network. הפניה לבקשה הזו מוצגת בפינה הימנית התחתונה של החלונית.

כדי לשנות את ההקשר, לוחצים על בקשה אחרת בחלונית Network (רשת).

העזרה מ-AI משתמשת בכתובת ה-URL של הבקשה, בכותרות, בתזמונים ובשרשרת של יוזם הבקשה כדי לענות על השאלות שלכם.

חשוב לדעת: כותרות שעשויות להכיל מידע רגיש מצונזרות אוטומטית.

אחרי שמתחילים שיחה, לוחצים על הלחצן keyboard_arrow_down הרחבה בצ'יפ Analyzing network data כדי לראות את הנתונים הגולמיים שבהם נעשה שימוש בעזרה מ-AI.

עזרה מ-AI לשיפור הביצועים

אפשר להשתמש בחלונית AI assistance כדי להבין את פרופילי הביצועים שתועדו בחלונית הביצועים.

פתיחת החלונית של כלים מבוססי-AI מתוך חלונית הביצועים

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

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

תובנות לגבי הביצועים

בכרטיסייה תובנות, פותחים תובנה, למשל **LCP by phase, ואז לוחצים על הלחצן Ask AI** (שאלת AI).

החלונית AI assistance נפתחת בכלי הפיתוח, ותובנת הביצועים הזו מסומנת מראש כהקשר לשיחה.

תצוגת נתוני מעקב אחר ביצועים

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

במקרה כזה, הפעילות הזו נבחרת מראש כהקשר לשיחה.

הקשר השיחה

הפעילות שנבחרה משמשת כהקשר לשיחה עם עזרה מ-AI. הפניה לפעילות הזו מופיעה בפינה הימנית התחתונה של החלונית.

תובנות לגבי הביצועים

אם לחצתם על Ask AI כדי לקבל תובנה ספציפית לגבי הביצועים, התובנה הזו תופיע כהקשר שנבחר. כדי לשנות את הבחירה, לוחצים על שאלת שאלות ל-AI בקטע 'תובנות אחרות'.

אחרי שמתחילים שיחה, מרחיבים את הקטע Analyzing insight: ... כדי לראות את הנתונים הגולמיים שמשמשים את העזרה מ-AI.

תצוגת מעקב

אפשר לבחור פריטים שונים בנתוני מעקב הביצועים, וההקשר ישתנה בהתאם.

העזרה מ-AI משתמשת בתזמונים מעץ השיחות שנבחר כדי לענות על ההנחיה.

אחרי שמתחילים שיחה, לוחצים על הכפתור keyboard_arrow_down בצ'יפ Analyzing call tree כדי לראות את הנתונים הגולמיים שבהם נעשה שימוש בעזרה מ-AI.

עזרה מ-AI לגבי מקורות

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

פתיחת חלונית העזרה מבוססת-AI מהחלונית 'מקורות'

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

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

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

הקשר השיחה

הקובץ שנבחר משמש כהקשר לשיחה עם עזרה מ-AI. הפניה לקובץ הזה מוצגת בפינה הימנית התחתונה של החלונית.

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

העזרה מ-AI משתמשת בשם הקובץ שנבחר, בכתובת ה-URL, במפת המקור (אם זמינה) ובתוכן כדי לענות על השאלות שלכם.

אחרי שמתחילים שיחה, לוחצים על הלחצן keyboard_arrow_down בצ'יפ Analyzing file כדי לראות את הנתונים הגולמיים שבהם נעשה שימוש בעזרה מ-AI.

תהליך השיחה

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

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

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

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

של שלב בחקירה כדי להבין טוב יותר מה עזרה ה-AI לעשות מאחורי הקלעים.

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

שיחות מושהות

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

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

שמירת השינויים בסביבת העבודה

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

לשם כך:

1. קודם צריך ליצור קובץ מטא-נתונים ולקשר תיקייה ב-Workspace.

   אפשר גם להוסיף תיקייה באופן ידני.

2. מתחילים צ'אט מהחלונית Elements.

3. מבקשים מעזרה מבוססת-AI לשנות את ה-CSS.

4. עזרה מבוססת-AI עשויה ליצור קוד ולהשהות את ההרצה. בודקים את הקוד ולוחצים על המשך כדי לבדוק את השינויים באתר הפעיל.

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

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

כדי להבין את תהליך העבודה הזה, אפשר לעיין במאמרים הבאים:

לא ניתנה תשובה

יכולות להיות סיבות שונות לכך שעזרה מ-AI לא מספקת תשובות.

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

היסטוריית השיחה

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

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

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

התחלת מדידה חדשה

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

המשך

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

מחיקה

כדי למחוק שיחה מההיסטוריה, לוחצים על לחצן המחיקה.

דירוג תשובות ומתן משוב

עזרה מבוססת-AI היא תכונה ניסיונית. לכן אנחנו מחפשים באופן פעיל משוב כדי ללמוד איך לשפר את איכות התשובות ואת החוויה הכוללת.

הצבעה לתשובות

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

דיווח על תשובות

כדי לדווח על תוכן בלתי הולם, לוחצים על לחצן הדיווח לצד לחצני ההצבעה.