אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » פתרונות ומאמרים על פיתוח אינטרנט » סנוב, את כלי המפתחים של כרום ניסית?

סנוב, את כלי המפתחים של כרום ניסית?

רן בר-זיק מאי 15, 2011 7:58 am 5 תגובות

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

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

על מנת להפעיל את כלי המפתחים, אפשר ללחוץ על ctrl+shift+j. אפשר גם לחפור בתפריטים שלו ולמצוא אותו. איך שנפתח אותו יתגלה בפנינו תפריט עליון מאד ברור ונקי:

סרגל הכלים של כלי המפתחים
סרגל הכלים של כלי המפתחים

Elements

זה בעצם ה-inspector המאד קל לשימוש של כרום. כל מה שצריך זה ללחוץ על זכוכית המגדלת מצד שמאל למטה, לבחור את האלמנט ולשנות אותו – בדיוק כמו בפיירבאג! איך משנים? בוחרים את האלמנט עם זכוכית המגדלת, בצד שמאל יש את התכונות השונות, אפשר לשנות או להוסיף תכונות בקלות – פשוט בוחרים תכונה ומשנים אותה או לוחצים tab על מנת ליצור תכונה חדשה. יש auto complete לתכונות שמחייב אותך ללחוץ על אחד החצים שמאלה או ימינה כדי לבצע את ההשלמה.

Resources

ה-Resources הוא אחד הכלים החשובים כיוון שהוא מאפשר לנו גישה לא רק לתמונות, לסקריפטים, לעוגיות ול-Sessions, אלא גם למאגרי מידע נוספים שבדרך כלל אין אליהם גישה – כמו למשל web storage לסוגיו (session ו-local) ולמסדי הנתונים הלוקליים שניתן להתקין כחלק מ-HTML 5.

Resources עם הדגמה של local storage
Resources עם הדגמה של local storage

Network

ה-Network יכול להראות לנו את המשאבים שניצלנו – כולל תמונות ואם הן הגיעו מה-cache, אבל מה שחשוב ב-Network הוא בדיקת בקשות ה-AJAX השונות כאשר לחיצה על כל בקשת AJAX מאפשרת לנו לבחון את הבקשה כולל מה שנשלח ומה שהתקבל. על מנת לסנן את המשאבים השונים (כולל AJAX ו-Websockets) אנו יכולים לבחור בתחתית הכלי איזה סוג משאב אנו רוצים. עבור AJAX עלינו לסמן את XHR:

בדיקת בקשת AJAX
בדיקת בקשת AJAX

Scripts

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

TimeLine

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

TimeLine
TimeLine

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

Profiles

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

Audits

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

Audits
Audits

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

Console

על הקונסולה של כרום (וקונסולות אחרות) הסברתי במאמר קודם.

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
כלים למפתחים

5 תגובות

  1. משתמש אנונימי (לא מזוהה) הגב דצמבר 18, 2020 בשעה 5:19 pm

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

  2. אנונימי הגב דצמבר 21, 2020 בשעה 6:28 pm

    ממש טוב

  3. משתמש אנונימי (לא מזוהה) הגב דצמבר 21, 2020 בשעה 6:31 pm

    ממש טוב

  4. משתמש אנונימי (לא מזוהה) הגב דצמבר 21, 2020 בשעה 9:42 pm

    כתבה מצויינת

  5. אנונימי הגב דצמבר 21, 2020 בשעה 9:43 pm

    כל מילה בסלע

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד