העדפות

Sofia Emelianova

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

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

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

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

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

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

מראה

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

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

עיצובים:

• העדפת המערכת
• בהיר
• כהה

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

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

פריסת הלוח:

• אופקי
• לאורך
• אוטומטי

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

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

שפה:

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

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

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

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

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

מקורות

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

השלמה אוטומטית מאפשרת הצעות שימושיות בעורך.

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

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

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

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

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

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

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

הצגת תווי רווח לבן מציגה תווי רווח לבן בעורך.

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

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

הצגת תווי רווח לבן:

• ללא
• הכול (...)
• Trailing

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

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

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

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

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

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

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

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

Allow scrolling past end of file מאפשר לגלול מעבר לשורה האחרונה בעורך.

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

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

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

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

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

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

הזחת ברירת המחדל:

• 2 רווחים
• 4 רווחים
• 8 רווחים
• תו טאב

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

רכיבים

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

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

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

הצגת הערות HTML: הצגת הערות HTML בעץ ה-DOM.

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

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

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

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

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

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

רשת

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

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

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

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

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

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

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

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

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

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

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

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

ביצועים

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

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

פעולת גלגל העכבר בתרשים הלהבות:

• גלילה
• Zoom

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

המסוף

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

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

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

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

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

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

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

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

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

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

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

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

קיבוץ הודעות דומות במסוף גורם למסוף לקבץ הודעות דומות יחד.

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

הצגת שגיאות CORS במסוף גורמת למסוף להציג את שגיאות ה-CORS שהוא תיעד.

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

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

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

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

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

במילים אחרות, היא מגדירה את navigator.userActivation.isActive כ-true בזמן ההערכה. אפשר למצוא את אותה אפשרות במסוף > הגדרות.

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

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

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

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

Extension

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

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

פתיחת קישורים:

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

התמדה

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

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

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

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

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

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

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

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

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

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

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

גלובלי

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

פתיחה אוטומטית של כלי הפיתוח עבור פריטים קופצים פותחת את כלי הפיתוח כשלוחצים על קישורים שפותחים כרטיסיות חדשות. כלומר, כל הקישורים עם target=_blank.

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

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

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

סנכרון

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

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

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