העדפות

Sofia Emelianova
Sofia Emelianova

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

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

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

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

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

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

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

מראה

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

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

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

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

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

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

מקורות

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

רכיבים

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

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

רשת

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

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

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

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

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

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

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

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

ביצועים

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

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

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

המסוף

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

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

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

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

בסרטון הזה מוסבר איך מפעילים את האפשרות הזו גם בהגדרות של הגדרות. וגם במסוף > הגדרות, ומתעדים את ההודעות של 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.

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

סנכרון

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