כיצד לערוך דף אינטרנט בדפדפן שלך

בדרך כלל בעת עריכת דף אינטרנט אנו משתמשים בכלי עריכה ספציפי כמו Adobe Dreamweaver, CoffeeCup, Bluefish או אחד מכלי הפיתוח האחרים. אבל מה אם אנחנו סתם סיעור מוחות או רוצים לנסות משהו בעמוד חי? נוכל ליצור עותק של הדף בכלי שבחרנו ולשחק עם זה. או שנוכל לעשות זאת בדפדפן האינטרנט שלנו. מדריך זה עומד להראות לכם כיצד לערוך דף אינטרנט בדפדפן.

Firefox, המכונה כלי מפתחים, מכנה את התכונה Inspect Element בעוד ש- Chrome מכנה אותה Inspect. כך או כך, זו דרך עבור הדפדפן להציץ מאחורי ברק העיצוב שלך ולהציץ בקוד שמניע אותו. תכונה זו ידועה למדי ומשמשת בהרבה. מה שלא כל כך ידוע הוא היכולת לבצע שינויים בקוד הזה תוך כדי תנועה.

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

ערוך כל דף אינטרנט בדפדפן שלך

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

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

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

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

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

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

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

הביצועים מועילים עבור SEO באתר, אך לא נעשה בהם שימוש בזיכרון, רשת ואחסון.

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

ביצוע שינויים בדף

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

1. לחץ באמצעות לחצן העכבר הימני על האלמנט המדויק שברצונך לשנות ובחר באפשרות בדוק.
2. הדגש את השורה עם 'כותרת' או 'H1' כך שהטקסט מודגש בחלונית העליונה.
3. נווט לשתי החלוניות השמאליות ומצא צבע גופן.
4. שנה את הערך למשהו שונה או בחר את נקודת הצבע שתשתמש בבורר.

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

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

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