לשם מה נועד Chrome DevTools?

Chrome DevTools הוא קבוצה של כלים ליצירת אתרים ולניפוי באגים המובנים ב- Google Chrome. כמובן, אנחנו יכולים גם להשתמש בהם בגרסת הקוד הפתוח שלה; כְּרוֹם.

ניתן לגשת לכלי Chrome למפתחים על ידי לחיצה על צירוף המקשים Ctrl + Shift + I, גם על ידי ריחוף מעל אלמנט ולחיצה ימנית על Inspect.

רכיבים

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

• אלמנטים: מציג את המרכיבים השונים של הדף.
• מסוף: מאפשר לך לבצע אבחון במהלך הפיתוח או לקיים אינטראקציה עם קוד Javascript כפי שהיית עושה עם מסוף לינוקס.
• מקורות: מקל על ניפוי באגים בקוד Javascript ולעבוד עם קבצים מקומיים.
• רשת: מסייע במעקב ושיפור ביצועי העמודים.
• ציר זמן: מאפשר להקליט ולחקור את האירועים השונים המתרחשים במהלך הביקור באתר.
• יישום: בודק את כל המשאבים הנטענים; בין היתר, מסדי נתונים של IndexedDB או Web SQL, אחסון מקומי והפעלות, עוגיות, מטמון אפליקציות, תמונות, גופנים וגיליונות סגנון.
• אבטחה: מזהה בעיות אבטחה בקוד.

בואו נראה בשביל מה נוכל להשתמש ב- Chrome DevTools

תקן את מה שלא עובד

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

הקצר את זמן הטעינה

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

שנה את הקוד

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

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

document.designMode = 'on';

נסה גדלי מסך שונים

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

Benchmarking

בניהול המונח benchmarking פירושו ללמוד מהשיטות הטובות ביותר של מי שעושה אותו דבר כמונו. עם Chrome DevTolls, אם אנחנו אוהבים את העיצוב של אתר אנחנו יכולים צפו בקוד ה- HTML ובגיליונות הסגנון CSS והעתיקו אותם לאתר שלנו.

קבלת Chrome DevTools

Chrome DevTools זמין בדפדפני Google Chrome ו- Chromium. כרום נמצא במאגרי ההפצות העיקריות. ניתן להתקין אותו גם מחנויות צמד. באשר לגוגל כרום אתה יכול תגיע לכאן. בפורמט DEB ו- RPM