העדפות

Sofia Emelianova
Sofia Emelianova

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

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

הקטע 'מראה' בכרטיסייה 'העדפות'.

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

ההגדרות השונות מסומנות בסמלים הבאים:

  • תיבת סימון. תיבות סימון
  • רשימות נפתחות תפריט נפתח.
  • הוצא משימוש. הוצא משימוש

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

מראה

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

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

עיצובים: שינוי העיצוב של DevTools מההעדפה של המערכת לעיצוב כהה או בהיר.
  • העדפת המערכת
  • בהיר
  • כהה

פריסת חלונית תפריט נפתח. – סידור של חלוניות בחלוניות.

ההגדרה הזו משפיעה על הכרטיסיות Elements (רכיבים) > Styles (סגנונות) ועל הכרטיסיות המקבילות, וגם על החלונית Sources (מקורות) > Debugger (כלי ניפוי הבאגים). אם בוחרים באפשרות auto, הפריסה תלויה ברוחב של כלי הפיתוח.

פריסת החלונית: שינוי הפריסה של החלונית של הרכיב מפריסה אופקית לפריסה אנכית.
  • אופקי
  • לאורך
  • אוטומטי

שפה תפריט נפתח. מגדירה את האזור הגיאוגרפי של ממשק המשתמש של כלי הפיתוח.

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

שפה: חלונית ההגדרות בסינית.
  • השפה של ממשק המשתמש בדפדפן
  • אחת מאפשרויות האזור, בדוגמה הזו סינית

תיבת סימון. הפעלת מקשי הקיצור Ctrl/Cmd + 0-9 למעבר בין חלוניות מאפשרת לפתוח חלוניות באמצעות המקלדת.

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

תיבת סימון. השבתה של יצירת שכבת-על במצב מושהה מסתירה את שכבת-העל לחצני הפעלה וקפיצה. Paused in debugger (מושהה בניפוי הבאגים) באזור התצוגה כאשר ביצוע הקוד מושהה.

תיבת סימון. הצגת'מה חדש' אחרי כל עדכון – הכרטיסייה מה חדש בחלונית הנפתחת תיפתח באופן אוטומטי אחרי כל עדכון של Chrome.

הכרטיסייה 'מה חדש' בחלונית הנפתחת.

מקורות

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

תיבת סימון. חיפוש בסקריפטים אנונימיים ובסקריפטים של תוכן מאפשר לחפש בכל קובצי ה-JavaScript שהועלו, כולל אלה שבתוספים ל-Chrome, באמצעות הכרטיסייה חיפוש.

בסרטון הזה מוסבר איך לחפש טקסט בקובץ מקור של תוסף.

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

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

תיבת סימון. הפעלת מפות מקור של JavaScript מאפשרת ל-DevTools למצוא מקורות של קובצי JavaScript שנוצרו או שויכו.

בחלונית Sources (מקורות) מוצג קישור לקובץ הממוזער בשורת הסטטוס.

תיבת סימון. הפעלת מיקוד בתנועות בין כרטיסיות: מקש מקש Tab. Tab מעביר את המיקוד בתוך DevTools במקום להוסיף תו Tab בעורך.

צריך לטעון מחדש את כלי הפיתוח.

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

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

צריך לטעון מחדש את כלי הפיתוח.

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

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

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

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

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

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

סוגריים מסולסלים בלי זוג עם קו תחתון אדום.

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

צריך לטעון מחדש את כלי הפיתוח.

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

הצגת תווי רווח לבן תפריט נפתח. הצגת תווי רווח לבן בעורך.

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

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

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

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

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

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

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

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

קוד מודפס יפה בחלונית המקורות.

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

בחלונית Sources (מקורות) מוצגים קובצי ‎ .scss בקטע Authored (בעלים) של עץ הניווט. בחלונית 'סגנונות' שבחלונית 'אלמנטים' מוצגים קישורים למקורות מסוג ‎ .scss לצד כללי CSS.

תיבת סימון. אפשרות לגלול אחרי סוף הקובץ מאפשרת לגלול מעבר לשורה האחרונה בעורך.

בסרטון הזה מוסבר איך גוללים מעבר לסוף הקובץ כשמפעילים את האפשרות הזו.

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

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

הודעה במסוף על כך שטעינה מנתיב קובץ מרוחק אסורה מטעמי אבטחה.

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

ברירת מחדל לכניסת פיסקה: השבתת האפשרויות לשינוי ברירת המחדל ושינוי הפסקה הרגילה מ-2 רווחים ל-8 רווחים, ואז למקש Tab.
  • שני רווחים
  • 4 רווחים
  • 8 רווחים
  • תו Tab

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

רכיבים

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

תיבת סימון. הצגת DOM בצל של סוכן המשתמש מציגה צמתים של DOM בצל בעץ ה-DOM.

בחלונית 'רכיבים' מוצגים צומתי DOM בצל.

תיבת סימון. הגדרת Word wrap מפרקת שורות ארוכות בעץ ה-DOM ומעבירה אותן לשורה הבאה.

בחלונית Elements, שורות ארוכות מחולקות לפי מילים ומגלשות לשורה הבאה.

תיבת סימון. הצגת תגובות HTML: הצגת תגובות HTML בעץ DOM.

בחלונית הרכיבים מוצגים תגובות HTML.

תיבת סימון. הצגת צומת DOM בהעברת העכבר מעליו – כשעוברים עם העכבר מעל רכיב בחלון התצוגה במצב הבדיקה בודקים., המערכת בוחרת את הצומת התואם בעץ ה-DOM.

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

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

ההסבר המפורט שמוצג במצב בדיקה.

תיבת סימון. הצגת הסרגלים בהעברת העכבר מעליהם – הסרגלים מוצגים באזור התצוגה כשמעבירים את העכבר מעל רכיבים בעץ ה-DOM.

הסרגלים מוצגים בחלון התצוגה.

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

הקישור מידע נוסף מפנה לחומר העזר בנושא CSS של MDN בנכס.

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

רשת

בקטע הזה מפורטות אפשרויות להתאמה אישית של הלוח Network. רוב האפשרויות זהות לאלה שבהגדרות של הלוח.

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

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

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

לחצן הקלטת יומן הרישום של הרשת בחלונית 'רשת'.

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

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

תיבת סימון. השבתת המטמון (בזמן שכלי הפיתוח פתוחים) זהה לאפשרות השבתת המטמון בחלונית רשת. השבתת המטמון בדפדפן.

תיבת הסימון 'השבתת המטמון'.

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

מידע אישי רגיש הוא הנתונים בכותרות Cookie,‏ Set-Cookie ו-Authorization.

שתי האפשרויות של הלחצן 'ייצוא יומן HAR'.

תיבת סימון. סוגי משאבים של קודי צבעים מדגישים בקשות בצבעים שונים בהתאם לסוג שלהן בעמודה Waterfall ביומן הרשת.

העמודה Waterfall בכרטיסייה Network (רשת) ללא קידוד צבעים וללא קידוד צבעים.

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

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

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

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

ביצועים

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

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

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

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

המסוף

בקטע הזה מפורטות אפשרויות להתאמה אישית של מסוף Google Cloud. רוב האפשרויות זהות לאלה שבהגדרות המסוף.

אפשרויות דומות במסוף וב'הגדרות'.

תיבת סימון. הסתרה של הודעות רשת מסתירה הודעות רשת במסוף.

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

תיבת סימון. ההקשר שנבחר בלבד – במסוף יוצגו הודעות רק לגבי ההקשר שנבחר: 'ראשי', 'iframe', 'worker' או 'תוסף'.

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

תיבת סימון. רישום XMLHttpRequests ביומן: האפשרות הזו מאפשרת ל-מסוף לתעד בקשות XHR ובקשות אחזור.

בסרטון הזה מוסבר איך מפעילים את האפשרות הזו גם בהגדרות של הגדרות. וגם במסוף > הגדרות, ומתעדים את ההודעות של XHR finished loading במסוף.

תיבת סימון. הצגת חותמות זמן – כשהאפשרות הזו מופעלת, חותמות הזמן מוצגות לצד ההודעות במסוף.

הודעות עם חותמות זמן שמופיעות במסוף.

תיבת סימון. השלמה אוטומטית מההיסטוריה – בזמן ההקלדה, המסוף מציע פקודות שהופעלת בעבר.

אפשר למצוא את אותה אפשרות בקטע מסוף > הגדרות.

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

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

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

תיבת סימון. קיבוץ הודעות דומות בקונסולה – האפשרות הזו מאפשרת למסוף לקבץ הודעות דומות יחד.

אפשר למצוא את אותה אפשרות בקטע מסוף > הגדרות.

הודעות דומות בקונסולה מקובצות יחד.

תיבת סימון. הצגת שגיאות CORS במסוף – כשהאפשרות הזו מופעלת, שגיאות ה-CORS שנרשמו ביומן מוצגות במסוף.

אפשר למצוא את אותה אפשרות בקטע מסוף > הגדרות.

במסוף מוצגות שגיאות CORS.

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

אפשר למצוא את אותה אפשרות בקטע מסוף > הגדרות.

בסרטון הזה מוצגות תצוגות מקדימות שונות של פלט.

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

במילים אחרות, הפונקציה מגדירה את navigator.userActivation.isActive לערך true במהלך הערכה. אפשר למצוא את אותה אפשרות בקטע מסוף > הגדרות.

בסרטון הזה מוצגת תוצאת ההערכה של navigator.userActivation.isActive לפני ואחרי הפעלת האפשרות הזו.

תיבת סימון. הרחבה אוטומטית של הודעות console.trace()‎: כשההודעות console.trace() מתועדות ביומן, המסוף מציג אותן באופן מורחב.

הודעה מורחבת של console.trace() במסוף.

תיבת סימון. Preserve log upon navigation (שמירה של היומן בזמן הניווט) – האפשרות הזו מאפשרת למסוף לתעד הודעה מסוג Navigated to בכל ניווט ולשמור את היומנים בכל הדפים.

אפשר למצוא את אותה אפשרות בקטע מסוף > הגדרות.

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

Extension

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

טיפול בקישור: בחירת אפשרות לפתיחת קישורים.
  • אוטומטי. כברירת מחדל, הקבצים נפתחים בחלונית מקורות.
  • אפשרות שרירותית שאפשר להוסיף באמצעות תוסף ל-DevTools.

התמדה

בקטע הזה מפורטות האפשרויות שקובעות איך DevTools שומר את השינויים שתבצעו.

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

מידע נוסף זמין במאמר שינוי מקומי.

כלי לניפוי באגים

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

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

טוענים מחדש את הדף כדי לראות אם הדף תלוי ב-JavaScript בזמן הטעינה ואיך הוא תלוי בו.

כש-JavaScript מושבת, ב-Chrome מוצג הסמל המתאים JavaScript מושבת. בסרגל הכתובות, וב-DevTools מוצג סמל אזהרה אזהרה. לצד מקורות.

סמל בסרגל הכתובות וסמל אזהרה לצד 'מקורות' ב-DevTools.

תיבת סימון. השבתת דוח הקריסות האסינכרוני מסתירה את 'הסיפור המלא' של הפעולה האסינכרונית במקבץ הקריאות.

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

הפעולה האסינכרונית ב-Call Stack.

מידע נוסף זמין במאמר הצגת נתוני מעקב סטאק אסינכרוני.

גלובלי

בקטע הזה מפורטות אפשרויות שיש להן השפעה גלובלית בכלי הפיתוח.

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

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

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

סנכרון

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

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

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