העדפות

סופיה אמליאנובה
סופיה אמליאנובה

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

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

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

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

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

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

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

מראה

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

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

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

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

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

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

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

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

פורמט צבע: שינוי עיצובי צבע בחלונית 'סגנונות'.
  • כפי שנוצר
  • HEX: #dac0de
  • RGB: rgb(128 255 255)
  • HSL: hsl(300deg 80% 90%)

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

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

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

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

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

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

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

חלונית ההזזה 'מה חדש'.

מקורות

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Elements

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

רשת

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

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

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

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

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

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

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

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

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

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

העמודה 'מפל מים' בכרטיסייה 'רשת' בלי קוד צבע.

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

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

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

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

ביצועים

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

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

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

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

המסוף

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

אפשרויות דומות ב-Play Console ובהגדרות.

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

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

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

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

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

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

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

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

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

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

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

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

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

תיבת סימון. קיבוץ הודעות דומות במסוף הופך הודעות דומות במסוף.

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

הודעות דומות ב-Play Console יקובצו יחד.

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

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

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

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

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

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

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

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

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

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

הודעה מורחבת של console.trace() ב-Play Console.

תיבת סימון. שמירת היומן בזמן הניווט תגרום לכך שהיומן של Console יהיה מוצג כ-Navigated to בכל ניווט וישמור יומנים בכל הדפים.

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

ב-Play Console מוצגות הודעות מסוג 'ניווט אל' ונשמרות יומנים בדפים שונים.

תוסף

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

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

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

התמדה

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

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

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

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

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

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

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

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

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

כברירת מחדל, הכלי לניפוי באגים מנסה לעקוב אחר פעולות אסינכרוניות אם ה-framework שבו אתם משתמשים תומך במעקב כזה. הפעולה האסינכרונית ב-Call Stack. למידע נוסף: הצגת דוחות של קריסות אסינכרוניות.

עולמי

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

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

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

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

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

סנכרון

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

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

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