העדפות

Sofia Emelianova
Sofia Emelianova

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

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

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

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

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

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

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

מראה

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

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

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

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

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

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

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

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

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

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

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

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

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

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

מקורות

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ברירת המחדל של כניסת הפיסקה תפריט נפתח. מאפשרת לבחור את מספר הרווחים שמפתח הכרטיסייה מקש Tab. יוסיף ב-Editor.

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

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

רכיבים

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

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

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

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

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

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

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

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

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

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

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

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

הסרגלים מוצגים באזור התצוגה.

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

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

הסבר קצר עם תיעוד על נכס CSS.

רשת

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ביצועים

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

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

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

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

המסוף

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

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

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

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

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

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

תיבת סימון. Log XMLHttpRequests יוצר את XHR של יומן המסוף ובקשות האחזור.

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

תיבת סימון. הצגת חותמות זמן תגרום למסוף להציג חותמות זמן ליד ההודעות.

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

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

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

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

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

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

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

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

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

תיבת סימון. אם הצגת שגיאות CORS במסוף, המסוף מציג את שגיאות CORS שנרשמו ביומן.

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

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

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

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

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

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

במילים אחרות, הפונקציה מגדירה את 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.

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

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

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

גלובלי

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

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

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

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

סנכרון

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

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

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