Home-theater-designers
Chrome DevTools הוא נכס חיוני למפתחים. בעוד דפדפנים אחרים מציעים כלים נוחים למדי לפתרון בעיות, Chrome DevTools שווה את תשומת ליבך בגלל הממשק הרב-פונקציונאלי והפופולריות שלו.
Chrome הוא הדפדפן הפופולרי ביותר עבור מפתחים בשל חבילת הכלים העוצמתית של איתור באגים. השימוש ב- Chrome DevTools הוא קל, אך עליך להבין כיצד הוא פועל כדי להפיק ממנו את המקסימום.
כיצד פועלים כלי המפתחים של Chrome
Chrome DevTools מאפשר לך לפתור בעיות באתר באמצעות מסוף השגיאות שלו וכלים אחרים לאיתור באגים וניטור. השימוש ב- DevTools חושף פרצות חזיתיות ומאפשר לך לעקוב אחר איך האתר שלך מופיע במכשירים ניידים וטאבלטים.
עם DevTools תוכל לבצע עריכות בזמן אמת של קוד האתר, כגון JavaScript, HTML ו- CSS, ולקבל תוצאות מיידיות של השינויים שלך.
השינויים שאתה מבצע באמצעות DevTools אינם משפיעים על האתר לצמיתות. הם מציגים רק באופן זמני את התוצאה הצפויה כאילו החלת אותם על קוד המקור בפועל. זה מאפשר לך למצוא דרכים לגרום לאתר שלך לטעון הרבה יותר מהר ומקל על חיסול באגים.
כיצד לגשת ל- Chrome DevTools
תוכל לגשת ל- Chrome DevTools בכמה דרכים. כדי לפתוח את כלי המפתחים בשיטת קיצור הדרך ב- Mac OS, לחץ על Cmd + Opt + I . אם אתה משתמש במערכת ההפעלה Windows, לחץ על Ctrl + Shift + I מקשים במקלדת שלך.
לחלופין, תוכל לגשת לכלי המפתחים של Chrome על ידי לחיצה על שלוש הנקודות בפינה השמאלית העליונה של המסך. ראש אל עוד כלים ובחר כלים למפתחים . אפשרות נוספת היא לחיצה ימנית על דף האינטרנט ולחיצה על לִבדוֹק אוֹפְּצִיָה.
שימוש בכלי המפתחים של Chrome לאבחון אתרים
Chrome DevTools מציע מספר דרכים לצבוט ולפתור בעיות של דף אינטרנט. בואו נסתכל על כמה מהדרכים שבהן DevTools יכול לעזור לכם.
ראה כיצד האתר שלך נראה בסמארטפון
ברגע שאתה מעביר את דפדפן Chrome למצב מפתח, הוא מעביר גרסה בגודל חצי של דף האינטרנט שלך. עם זאת, זה לא ייתן לך מבט אמיתי על איך זה ייראה בסמארטפון או בטאבלט.
למרבה המזל, בנוסף להגדרת גודל המסך של דף אינטרנט, Chrome DevTools מאפשר לך לעבור בין סוגי מסך וגרסאות שונות.
כדי לגשת לאפשרות זו, החלף על לִבדוֹק מצב. לאחר מכן, לחץ על מגיב הנפתח בפינה השמאלית העליונה של DevTools ובחר את המכשיר הנייד המועדף עליך. לאחר מכן, דף האינטרנט מעבד ומתאים את עצמו בהתאם לגודל המכשיר הנייד שבחרת.
כיצד להשתמש בעורך תמונות gimp
גש לקבצי המקור של דף אינטרנט
תוכל לגשת לקבצים המרכיבים דף אינטרנט באמצעות Chrome DevTools. כדי לגשת לקבצים אלה, לחץ על מקורות האפשרות בחלק העליון של תפריט DevTools. זה חושף את מערכת הקבצים של האתר וגם נותן לך עריכה.
תוכל גם לחפש קבצי מקור, שיכולים להיות מועילים כאשר אתה מתמודד עם דף אינטרנט המכיל משאבים רבים. כדי לחפש קובץ מקור באמצעות DevTools, לחץ על לחפש אפשרות ממש מעל הקונסולה.
עם זאת, אם אינך יכול למצוא את לחפש אפשרות, חלופה טובה יותר היא להשתמש בקיצורי מקשים. ב- Mac OS, הקש על Cmd + Opt + F מקשים לחיפוש קובץ מקור. אם אתה משתמש במערכת ההפעלה Windows, לחץ על Ctrl + Shift + F מקש גישה לשורת החיפוש של קובצי המקור.
בצע עריכות חיות בדף אינטרנט
אחת המטרות העיקריות של השימוש ב- DevTools היא לבצע עריכה מזויפת מיידית של האלמנטים בדף אינטרנט . לאחר המעבר לכלי המפתחים, תוכל לערוך את תוכן ה- HTML של אתר על ידי לחיצה על אלמנטים אוֹפְּצִיָה. לאחר מכן, לחץ באמצעות לחצן העכבר הימני על כל נקודה שאליה ברצונך להחיל שינויים בתוך עורך הקוד ובחר ערוך כ- HTML .
כדי לערוך נכסי CSS שאינם מוטבעים, בחר מקורות . לאחר מכן, בחר את קובץ ה- CSS שברצונך לערוך. מקם את הסמן בשורת הבחירה שלך במסוף הקוד לביצוע עריכה חיה. פעולה זו נותנת לך משוב מיידי על כל שינויים בסגנון שאתה מחיל על דף האינטרנט.
שים לב שכאשר אתה עורך דף באמצעות DevTools, טעינת הדף מחדש בדפדפן שלך מחזירה אותו לצורתו המקורית, והעריכה גלויה רק לך. עריכה באמצעות DevTools אינה משפיעה על הפעלה חלקה או השימוש באתר הזה עבור משתמשים אחרים.
איתור באגים של קוד JavaScript באמצעות מסוף DevTools
אחת הדרכים הטובות ביותר לניפוי באגים של JavaScript היא שימוש בכלי המפתחים של Chrome. הוא נותן לך דיווח ישיר על סקריפטים לא חוקיים, כמו גם על המיקום המדויק של הבאג.
נוהג תמיד לשמור על DevTools פתוח בזמן עיצוב אתר עם JavaScript. לדוגמה, הפעלת console.log () הפקודה של JavaScript בקבוצת הוראות מציגה את התוצאה של אותו יומן במסוף DevTools אם התוכנית פועלת בהצלחה.
כברירת מחדל, המסוף מדווח על בעיות JavaScript באתר שלך. תוכל למצוא את המסוף בחלק התחתון של DevTools או לגשת אליו על ידי לחיצה על לְנַחֵם האפשרות בחלק העליון של חלון Chrome DevTools.
עקוב אחר טעינת משאבים ממסד נתונים
בנוסף לניפוי באגים של JavaScript, המסוף יכול גם לתת לך פירוט של משאבים שאינם נטענת כראוי ממאגר המידע של האתר.
אמנם לא תמיד זו הדרך הטובה ביותר לניפוי באגים של בעיות גב, אך היא עדיין אומרת לך אילו משאבים מחזירים א 404 שגיאה לאחר הפעלת שאילתת מסד נתונים של רכיבים אלה.
קשורים: שגיאות אתרים נפוצות ומה משמעותן
שנה את הכיוון של כלי המפתחים של Chrome
כדי לשנות את המיקום של כלי המפתחים של Chrome, לחץ על שלוש נקודות התפריט בתוך DevTools (לא הראשי בדפדפן). לאחר מכן בחר את המיקום המועדף עליך מתוך צד המזח אוֹפְּצִיָה.
התקן את תוספי Chrome DevTools
תוכל גם להתקין הרחבות ספציפיות לשפה או מסגרת שעובדות עם Chrome DevTools. התקנת תוספים אלה מאפשרת לך לאתר באגים בצורה יעילה יותר.
תוכל לגשת לרשימת התוספים הזמינים עבור Chrome DevTools ב- Chrome הרחבות DevTools מוצגות גלריה.
בדוק אם יש בעיות אבטחה באתר
Chrome DevTools מאפשר לך להעריך עד כמה האתר שלך מאובטח, בהתבסס על פרמטרים כמו זמינות של אישורי אבטחת אינטרנט ועד כמה בטוח הקשר בין היתר. כדי לבדוק אם האתר שלך מאובטח, לחץ על בִּטָחוֹן האפשרות בחלק העליון של ה- DevTools.
ה בִּטָחוֹן הכרטיסייה נותנת לך סקירה כללית של פרטי האבטחה של האתר שלך ומספרת לך על כל איום אפשרי.
בדוק את האתר שלך
ל- Chrome DevTools יש תכונה המאפשרת לך לבדוק את הביצועים הכוללים של האתר שלך על סמך פרמטרים ספציפיים.
כדי לגשת לתכונה זו, בחר מִגדַלוֹר אפשרות בחלק העליון של חלון DevTools. לאחר מכן, בחר את הפרמטרים שברצונך לבדוק ולאחר מכן סמן את נייד אוֹ שולחן עבודה אפשרויות לראות את ביצועי דף האינטרנט שלך בפלטפורמות שונות.
לאחר מכן, לחץ על להפיק דוח כדי להפעיל ניתוח של דף האינטרנט שלך על סמך הפרמטרים שבחרת קודם לכן.
תוכל גם להעריך את זמן הריצה או ביצועי הטעינה של אתר על ידי לחיצה על ביצועים אוֹפְּצִיָה. כדי להריץ בדיקה, לחץ על הסמל שלצד לחץ על כפתור ההקלטה אפשרות לבצע ניתוח זמן ריצה. לחלופין, לחץ על כפתור הטעינה מתחתיו כדי להעריך את ביצועי זמן הטעינה. לחץ על תפסיק כדי לעצור את מנתח ולהציג את התוצאות.
נצל את היתרון של Chrome DevTools
בהתאם למה אתה צריך את זה, Chrome DevTools מאפשר לך לעשות יותר מסתם איתור באגים לאתר פשוט. למרבה המזל, DevTools קלים לשימוש עבור מתכנתים בכל רמות המיומנות. אתה יכול אפילו ללמוד כמה יסודות של פיתוח חזית אתרים על ידי חיפוש קוד המקור של אתרים שבהם אתה מבקר.
כיצד להוריד סרטוני סטרימינג מכל אתר
ייתכן שתגלו גם כמה אפשרויות אחרות שלא דנו עליהן במאמר זה. אז אל תהסס לשחק עם התכונות הזמינות. חוץ מזה, שיפור התכונות האלה לא פוגע קצת באתר.
לַחֲלוֹק לַחֲלוֹק צִיוּץ אימייל כיצד להשתמש במערכת ההפעלה Chrome ב- Raspberry Piאינך יכול להרשות לעצמך Chromebook? מחפש אלטרנטיבה ל- Raspbian? להלן התקנת גרסת מערכת ההפעלה של Chrome ב- Raspberry Pi שלך.
קרא הבא נושאים קשורים- מרשתת
- תִכנוּת
- HTML
- בניית אתרים
- JavaScript
- גוגל כרום
Idowu נלהב מכל דבר חכם וטכנולוגי. בזמנו הפנוי הוא משתעשע בקידוד ועובר ללוח השחמט כשהוא משועמם, אבל הוא גם אוהב להיפרד מדי פעם מהשגרה. התשוקה שלו להראות לאנשים את הדרך לטכנולוגיה המודרנית מניעה אותו לכתוב יותר.
עוד מאת Idowu Omisolaהירשם לניוזלטר שלנו
הצטרף לניוזלטר שלנו לקבלת טיפים, סקירות, ספרים אלקטרוניים בחינם ומבצעים בלעדיים!
לחצו כאן להרשמה