פרוטוקול Chrome DevTools (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
}
}
}
כרטיסיית ההזזה של מעקב אחר פרוטוקול מאפשרת לשלוח בקשות CDP ולראות את כל הבקשות והתגובות של CDP שכלי הפיתוח שולחים ומקבלים.
בעבר היה קשה ליצור את הפקודה באופן ידני, במיוחד פקודה עם הרבה פרמטרים. לא רק שהיה צריך לפתוח ולסגור סוגריים ומירכאות כפולות, אלא גם לזכור את הפרמטרים של הפקודה, שבעזרתם תוכלו לחפש את מסמכי התיעוד של CDP.
כדי לפתור את הבעיה, כלי הפיתוח הוסיפו כלי חדש לעריכת CDP שהמטרות העיקריות שלו הן:
- פקודות להשלמה אוטומטית. כדי לפשט את הקלט של פקודות CDP, אפשר להציג את רשימת הפקודות הזמינות באמצעות תכונת ההשלמה האוטומטית.
- אכלוס אוטומטי של פרמטרים של פקודות. מצמצמים את הצורך לבדוק את רשימת הפרמטרים הזמינים של ה-CDP במסמכי התיעוד של CDP.
- מפשטים את הקלדת הפרמטר. כל מה שצריך לעשות הוא להזין את הערכים של הפרמטרים שרוצים לשלוח.
- עריכה ושליחה מחדש. שיפור המהירות של יצירת אב הטיפוס באמצעות שינוי מהיר יותר של פקודת CDP.
עכשיו נראה מה העורך החדש מציע ואיך אפשר להשתמש בו!
תכונת השלמה אוטומטית
סרגל קלט הפקודות מופעל עכשיו על ידי תכונת השלמה אוטומטית. היא עוזרת לכתוב את השמות של פקודות CDP שיש לך גישה אליהן. האפשרות הזו שימושית מאוד לפקודות שלא מקבלות פרמטרים.
פרמטרים של מחרוזות ומספרים
באמצעות העורך החדש, תוכלו לערוך בקלות את הערכים של פרמטרים פרימיטיביים. כדי לפתוח את העורך, לוחצים על הסמל 
לצד קלט הפקודה.
אחרי שמזינים את שם הפקודה, העורך מציג באופן אוטומטי את הפרמטרים המתאימים. לא צריך לחפש בתיעוד כדי לדעת אילו פרמטרים משויכים לאילו פקודות. בנוסף, העורך מציג את הפרמטרים בסדר נתון: הפרמטרים הנדרשים מופיעים ראשונים (באדום) והפרמטרים האופציונליים הבאים (בכחול).
כדי להוסיף ערך לפרמטר אופציונלי, מעבירים את העכבר מעל השם שלו ולוחצים על הלחצן +. כדי לאפס את הפרמטר לערך לא מוגדר, לוחצים על הלחצן איפוס לערך ברירת המחדל.
פרמטרים של טיפוסים בני מנייה (enum) ופרמטרים בוליאניים
כשעורכים פרמטרים מסוג 'טיפוסים בני מנייה (enum)' או 'פרמטרים בוליאניים', מוצג תפריט נפתח עם מבחר ערכים אפשריים (למספרים טיפוסים בני מנייה (enums)) או אפשרות פשוטה של 'true' או 'false' עבור ערכים בוליאניים. התכונה הזו מפחיתה את האפשרות להקליד ערך שגוי בפרמטרים מסוג 'טיפוסים בני מנייה (enum)' ושומרת על הדיוק והפשטות.
פרמטרים של מערך
עבור פרמטרים של מערך, אפשר להוסיף ערכים למערך באופן ידני. מעבירים את העכבר מעל השורה של הפרמטר ולוחצים על הלחצן +.
כדי למחוק פריטים במערך אחד אחרי השני, לוחצים על הלחצן bin לצד הפריטים. אפשר גם לנקות את כל הפרמטרים מהמערך באמצעות לחצן החסימה. במקרה הזה, הפרמטר של המערך יאופס ל-[].
פרמטרים של אובייקט
כשמזינים פקודה שמקבלת פרמטרים של אובייקט, העורך מציג את רשימת המפתחות של האובייקט הזה ואפשר לערוך את הערכים שלהם ישירות. השיטה הזו מתאימה לכל סוגי הפרמטרים בתוך הפרמטרים.
לגלות מה מתבצעת בעורך הפקודה והפרמטרים.
היה לכם פעם לא ברור מה המטרה של פרמטר או פקודה? עכשיו אתם יכולים להעביר את העכבר מעל פקודה או פרמטר, ויופיע הסבר קצר תיאורי עם קישור למסמכי התיעוד אונליין.
מקבלים אזהרה לפני שליחת פרמטרים שגויים
בעבר, אם לא ידעתם אם ערך של פרמטר הוא מהסוג הנכון והייתם צריכים לחכות כדי לקרוא את תגובת השגיאה, העורך החדש הזה מיועד לכם. אם הפרמטר לא מקבל את הערך שהזנתם, יוצגו לכם שגיאות בזמן אמת.
שליחה מחדש של פקודה
אם אתם צריכים לשנות פרמטר בפקודה ששלחתם, לא תצטרכו להקליד אותו שוב. כדי לערוך ולשלוח את הפקודה מחדש, לוחצים לחיצה ימנית על פריט ברשת הנתונים ובוחרים באפשרות עריכה ושליחה מחדש בתפריט הנפתח. הפעולה הזו תפתח מחדש באופן אוטומטי את עורך ה-CDP ותמלא אותו מראש בפקודה שבחרתם.
העתקת פקודה לפורמט JSON
כדי להעתיק את פקודת CDP בפורמט JSON ללוח, לוחצים על סמל ההעתקה 
בקצה הימני של סרגל הכלים. בנוסף, חשוב לזכור שאם תזינו פקודה ישירות בסרגל הקלט, היא תאכלס בצורה חלקה את העורך, ולהפך.
סיכום
המטרה של צוות DevTools בעיצוב של עורך CDP החדש הזה הייתה לפשט את ההקלדה של פקודות CDP. אפשר להשתמש בכלי העריכה החדש גם כדי להציג פרמטרים לצד מסמכי התיעוד, וכדי לספק דרך קלה יותר לשלוח פקודות CDP.
הורדת הערוצים של התצוגה המקדימה
כדאי להשתמש ב-Chrome Canary, Dev או Beta כדפדפן הפיתוח בברירת מחדל. ערוצי התצוגה המקדימה האלה נותנים לך גישה לתכונות החדשות של כלי הפיתוח, בודקים ממשקי API מתקדמים של פלטפורמת האינטרנט ומוצאים בעיות באתר לפני שהמשתמשים יגלו אותן!
יצירת קשר עם צוות כלי הפיתוח ל-Chrome
אפשר להשתמש באפשרויות הבאות כדי לדון בתכונות החדשות ובשינויים בפוסט, או בכל דבר אחר שקשור לכלי הפיתוח.
- שלחו לנו הצעה או משוב דרך crbug.com.
- כדי לדווח על בעיה בכלי הפיתוח, לוחצים על אפשרויות נוספות
> עזרה > דיווח על בעיות בכלי הפיתוח בכלי הפיתוח. - אפשר לשלוח ציוץ אל @ChromeDevTools.
- אפשר לכתוב תגובות לגבי 'מה חדש' בסרטוני YouTube בכלי הפיתוח או בסרטונים ב-YouTube בקטע 'טיפים לשימוש בכלי הפיתוח'.