בעזרת עורך הפקודות החדש תוכלו ליצור ביעילות את הפקודות בפרוטוקול Chrome Devtools (CDP)

Hadrien Jaubert

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

לדוגמה, זוהי פקודת CDP שמוסיפה כלל חדש עם הערך ruleText שצוין בגיליון סגנונות עם הערך styleSheetId שצוין, במיקום שצוין על ידי location.

{ 
    command: 'CSS.addRule', 
    parameters: {
        styleSheetId: '2',
        ruleText:'Example', 
        location: {
            startLine: 1,
            startColumn: 1,
            endLine: 1,
            endColumn: 1
        }
    }
}

בכרטיסייה Protocol monitor (מעקב אחר פרוטוקולים) שבתפריט הנפתח תוכלו לשלוח בקשות CDP ולראות את כל הבקשות והתשובות של CDP שנשלחות ומתקבלות ב-DevTools.

שורת הפקודה שבתחתית 'מעקב אחר פרוטוקולים'.

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

כדי לפתור את הבעיה הזו, הוספנו ל-DevTools עורך חדש של CDP, שהמטרות העיקריות שלו הן:

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

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

התכונה 'השלמה אוטומטית'

התפריט הנפתח של ההשלמה האוטומטית.

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

פרמטרים של מחרוזות ומספרים

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

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

כדי להוסיף ערך לפרמטר אופציונלי, מעבירים את העכבר מעל השם שלו ולוחצים על הלחצן +. כדי לאפס את הפרמטר ל-undefined, לוחצים על הלחצן Reset to default value.

הלחצנים + ו 'איפוס לערך ברירת המחדל'.

פרמטרים של מניה (enum) ופרמטר בוליאני

כשעורכים פרמטרים של enum או פרמטרים בוליאניים, מופיע תפריט נפתח עם מבחר של ערכים אפשריים (ל-enums) או האפשרויות הפשוטות true או false לערכים בוליאניים. התכונה הזו מפחיתה את האפשרות להקליד ערך שגוי לפרמטר enum, תוך שמירה על דיוק ופשטות.

התפריטים הנפתחים של בוליאני ו-enum.

פרמטרים של מערך

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

לחצן הפלוס להוספת פריט למערך.

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

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

פרמטרים של אובייקטים

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

פרמטרים בתצוגת עץ.

הסבר על הפקודה והפרמטרים בכלי העריכה

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

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

הצגת אזהרה לפני שליחת פרמטרים שגויים

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

סמל שגיאה לצד פרמטר עם ערך שגוי.

שליחת פקודה מחדש

אם צריך לשנות פרמטר של הפקודה ששלחתם, אתם לא צריכים להקליד אותה שוב. כדי לערוך את הפקודה ולשלוח אותה מחדש, לוחצים לחיצה ימנית על פריט ב-datagrid ובוחרים באפשרות Edit and resend (עריכה ושליחה מחדש) בתפריט הנפתח. הכלי לעריכת פקודות CDP ייפתח מחדש באופן אוטומטי ויתמלא מראש בפקודה שבחרתם.

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

העתקת פקודה לפורמט JSON

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

סיכום

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

מורידים את הערוצים של התצוגה המקדימה.

מומלץ להשתמש ב-Chrome Canary, ב-Dev או ב-Beta כדפדפן הפיתוח שמוגדר כברירת מחדל. ערוצי התצוגה המקדימה האלה מעניקים לכם גישה לתכונות העדכניות ביותר של DevTools, מאפשרים לכם לבדוק ממשקי API מתקדמים לפלטפורמות אינטרנט ולמצוא בעיות באתר לפני שהמשתמשים שלכם יעשו זאת.

יצירת קשר עם צוות כלי הפיתוח ל-Chrome

אתם יכולים להשתמש באפשרויות הבאות כדי לדון בתכונות החדשות, בעדכונים או בכל דבר אחר שקשור ל-DevTools.