Google Chrome הוא ממזמן לא רק דפדפן, הוא כלי פיתוח אדיר ופורץ דרך בקרב בוני אתרים, מעצבים, מקדמי אתרים ומתכנתים בכללי. בפוסט הזה, אנסה לסקור את כלי העבודה העיקריים והנפוצים ביותר בקרב בוני אתרים ומעצבים.
סביבת עבודה
HostAdmin
כאשר עובדים עם שרת לוקלי לפיתוח כגון WampServer או XAMPP, לרוב משחקים עם הקובץ hosts על מנת להגדיר כי כתובת האתר מופנת אל המחשב שלנו, כך נוכל לפתח את האתר של הלקוח ״על״ הדומיין של הלקוח מבלי לפגוע באתר שנמצא באוויר. לערוך כל פעם את הקובץ מצריך הרשאות Administrator או Super-User, דבר אשר מעייף ומסורבל לאחר זמן מה או כאשר עובדים עם מספר אתרים במקביל.
התוסף HostAdmin מאפשר לנו לנהל את הקובץ hosts בצורה נוחה עם ממשק GUI אשר מאפשר לנו להפעיל או לכבות את ההפנייה לכתובת מסויימת.
הורדה: HostAdmin App
Website IP
תוסף זה די מתקשר לתוסף שנזכר לעיל, התוסף הנ״ל מציג לנו בפינה התחתונה של המסך את כתובת ה-IP של האתר שאנחנו גולשים בו כעת, שימושי ממש כאשר אנחנו רוצים לוודא כי אנחנו עובדים על השרת הלוקלי ולא על השרת של הלקוח.
הורדה: Website IP
פיתוח
Chrome MySQL Admin
התוסף הבא מאפשר לנו להתחבר לשרת MySQL ולנהל את מסדי הנתונים ואת המשתמשים, כולל הצגה של סכמת המסד נתונים, קשרי גומלין ועוד מגוון פרטים שימושיים. התוסף הזה עובד ממש כמו PHPMyAdmin ודומיו אך מתעלה עליהם בחלק מהדברים כגון הצגה גרפית של מבנה מסד הנתונים.
התוסף הזה מומלץ אם יש לכם שרת MySQL לוקלי על המחשב לצורכי פיתוח ולא מותקן PHPMyAdmin.
הורדה: Chrome MySQL Admin
EditThisCookie
עבודה עם ״עוגיות״ היא חלק בלתי נפרד מבניית מערכות צד שרת אשר מצריכות שמירה זמנית של פרטים על מחשב המשתמש, כגון Hash של אימות התחברות למערכת מסויימת או העדפות משתמש או אפילו פריטים בעגלת קניות טרם רכישה.
התוסף הבא מאפשר לצפות בעוגיות אשר האתר הנוכחי שפתוח בדפדפן השאיר ומה שמור בהם, ניתן למחוק אותם, לערוך אותם או אפילו להוסיף עוגיות.
הורדה: EditThisCookie
JSON Formatter
כאשר עובדים עם שירותי API למיניהם, לרוב שירותים אלו בנויים כשירותי REST APIs אשר מחזירים אובייקטים JSON, התוסף הבא מפרמט את התשובה המוחזרת בצורה שנעימה לעין ונוחה למשתמש.
הורדה: JSON Formatter
Postman
התוסף הבא הוא מבין התוספים החזקים והחיוניים ביותר למפתחים, התוסף מאפשר לבצע קריאות API כולל העברה של פרמטרים, ביצוע אימות, הגדרת סוג קריאה ואפילו מייצר קוד במגוון שפות תכנות כך שהמפתח יוכל להשתמש בקוד לביצוע הקריאה.
הורדה: Postman
Web Developer
מעל ל-100 אפשרויות לביצוע דיבאג לאתר, החל מכיבוי JavaScript, ביצוע מניפולציות על תמונות ואלמנטים, הקטנת הדפדפן לרזולוציות מסויימות ועוד ועוד. תוסף חובה לכל בונה ארים, מקדם ומעצב.
הורדה: Web Developer
Web Developer Checklist
התוסף הבא נותן מדד לאתר שלכם מבחינת המשימות שיש לבצע לפני הגשת האתר ללקוח או העלאת האתר שלכם לאוויר, הוא בודק SEO, נגישות, ביצועים ועוד – בהחלט כלי שכדי להשתמש בו.
הורדה: Web Developer Checklist
עיצוב
ColorZilla
תוסף מעולה אשר מאפשר לבחור צבע מכל חלק באתר ולקבל את הקוד שלו במגוון פורמטים, HEX, RGB, HSL ועוד. מלבד בחירת צבע מהדף, הוא מאפשר גם להציג Color Picker ודרכו לבחור צבע רצוי – חוסך את הצור בפתיחה של Photoshop.
הורדה: ColorZilla
Page Ruler
תוסף נחמד אשר מאפשר לבדוק גודל בפיקסלים של אלמנטים מסויימים ע״י גרירה של מרובע לאורך המסך ולקבל את הגודל שלו ואת המיקום שלו (offset) מציר ה-X ומציר ה-Y.
הורדה: Page Ruler
WhatFont
תוסף קליל אשר מאפשר לגלות באיזה פונט משתמש האתר ע״י הצבעה עם סמן העכבר עליו, חוסך זמן בחיפוש בתוך ה-CSS או ב-Inspector אחרי סוג הפונט.
הורדה: WhatFont
קידום אתרים
Page Analytics
תוסף נחמד ורישמי מבית גוגל אשר מאפשר להציג את הסטטיסטיקות של האתר שלכם מבלי להיכנס ל-Google Analytics, זאת בהנחה שהקוד באתר שייך לחשבון שלכם ושאתם מחוברים איתו בדפדפן.
הורדה: Page Analytics
Tag Assistant
תוסף אשר מציג האם קיימים בעמוד הנוכחי קודי Analytics ו-Remarketing מבית גוגל כולל את הקוד חשבון.
הורדה: Tag Assistant
Check My Links
כלי פשוט ומאוד חשוב אשר עוזר לנו לגלות האם קיימים באתר לינקים שבורים, קישורים שבורים יצבעו בצבע אדום.
הורדה: Check My Links
סיכום
ישנם המון כלים אשר קיימים בחנות תוספות של גוגל, וגם הרבה ויכוחים על מה יותר טוב ומה פחות טוב. הדרך הכי טובה למצוא את הכלים המתאימים הם ע״י ניסוי וטעיה, קיימים כל כך הרבה תוספות והרחבות שאפשר לטבוע בהם!
בהצלחה!