העדפות

Sofia Emelianova
Sofia Emelianova

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

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

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

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

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

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

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

מראה

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

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

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

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

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

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

מקורות

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

רכיבים

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

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

רשת

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

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

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

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

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

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

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

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

ביצועים

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

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

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

המסוף

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

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

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

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

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

שגיאות CORS שנרשמו ביומן.

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

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

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

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

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

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

Extension

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

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

התמדה

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

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

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

JavaScript מושבת.

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

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

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

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

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

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

גלובלי

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

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

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

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

סנכרון

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