העדפות

Sofia Emelianova
Sofia Emelianova

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

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

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

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

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

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

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

מראה

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

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

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

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

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

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

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

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

פורמט צבע: שינוי עיצובי צבע בחלונית 'סגנונות'.
  • כפי שנוצר
  • הקסדצימלי: #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 מעביר את המיקוד.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ברירת מחדל של כניסת פסקה תפריט נפתח. מאפשרת לבחור את מספר הרווחים שמקש 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.

רשת

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ביצועים

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

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

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

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

המסוף

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

תיבת סימון. באמצעות קיבוץ הודעות דומות במסוף הודעות דומות במסוף.

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

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

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

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

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

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

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

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

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

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

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

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

הודעה מורחבת Console.trace() במסוף.

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

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

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

Extension

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

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

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

התמדה

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

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

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

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

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

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

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

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

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

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

עולמי

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

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

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

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

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

סנכרון

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

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

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