Chrome Tools Tools מדריכים, טיפים, טריקים

Google Chrome הוא אחד מדפדפני האינטרנט הפופולריים לפיתוח אינטרנט, בשל התכונות המתקדמות שלו. Chrome Developer Tools יכול להיות שימושי מאוד בעת איתור באגים. רובנו כבר יודעים שאנחנו יכולים לערוך את ה- CSS החי באמצעות כלי הפיתוח של Chrome, אך יש עוד טיפים שאנו נשתף אתכם היום.

טיפים לפיתוח כלי Chrome

קיימים מספר רב של טריקים לא ידועים ומוסתרים של פיתוח Chrome כלים ואנחנו נסתכל על הטריקים השימושיים ביותר ביניהם. כדי לפתוח את כלי הפיתוח ב- Chrome, הקש על F12 במקלדת ונסה את הטריקים הבאים:

1. מצא ולפתוח כל קובץ

כאשר אנו עושים פיתוח אינטרנט אנו מתמודדים עם HTML רבים, CSS, JS וקבצים אחרים. כאשר אנחנו רוצים לאתר באגים משהו, אנו פותחים את כלי הפיתוח של Chrome. אתה יכול לחפש במהירות למצוא את הקובץ המסוים כדי להפוך את העבודה שלך לקלה יותר. פשוט, הקש Ctrl + P והתחל להקליד את שם הקובץ. זה עוזר לך למצוא את הקובץ המסוים מרשימת הקבצים.

2. חיפוש בתוך קובץ המקור

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

3. עבור אל שורה מסוימת

לאחר שפתחת את קובץ המקור וברצונך לעבור לקו מסוים, לחץ על Ctrl + G ונותן את מספר השורה ולחץ על Enter.

4. בחירת אלמנטים של DOM בכרטיסייה Console

כלים של כלים גם מאפשרים לך לבחור אלמנטים בקונסולה.

• $ () - מחזירה את המופע הראשון של בורר CSS המתאים
• $$ () - מחזירה את מערך האלמנטים התואמים את בורר CSS הנתון.

לקבלת פקודות קונסולות נוספות, עבור אל הפוסט הזה

5. השתמש בכמה ממודעות מרובות

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

6. שמור יומן

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

Chrome Dev Tools כולל את מייצג הקוד המובנה הנקרא

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

Chrome Dev Tools גם מאפשר לנו לבדוק אם אתר אינטרנט ידידותי לנייד או לא. אתה יכול לבדוק איך האתר שלך נראה על מכשירים שונים. עבור אל כלי הפיתוח של Chrome ובכרטיסייה

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

9. לחקות חיישנים מיקום גיאוגרפי

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

אמולציה -> חיישנים 10. בחר את המופע הבא של המילה הנוכחית

אם ברצונך להחליף את המילה בכל המופעים שלה, בחר את המילה ולחץ על

Ctrl + D כדי לבחור את המופע הבא של המילה שנבחרה. את, אתה יכול לערוך את המילה בכל זה הוא המופעים של ירייה אחת. אלטר צבע תבנית פשוט השתמש

Shift + לחץ על

על התצוגה המקדימה של צבע כדי לשנות את השינויים בין rgba, הקסדצימלי ו- hsl עיצוב 12. הוסף שינויים לקבצים מקומיים באמצעות סביבת עבודה אנו יכולים לערוך קובצי מקור ולערוך כמה שינויים ב- CSS, ב- Java Script ובקבצים אחרים בכלים של פיתוח Chrome. כדי להוסיף שינויים אלה לקבצים המקומיים, אז כאן אין צורך להעתיק להדביק את השינויים ממרחב העבודה לקבצים בדיסק. כלי הפיתוח של Chrome מאפשרים לך להתאים קבצים ולעדכן את הקובץ המקומי עם השינויים שביצעת בכלי dev. כדי לבצע פעולה זו לחץ לחיצה ימנית על קובץ המקור בצד שמאל בכרטיסייה

מקורות

ובחר הוספת תיקיה למרחב העבודה. לקבלת מידע נוסף על סביבות עבודה, עבור אל Chrome.com.