F12 - מכירים את הדבר השימושי הזה?!

ללחצן F12 הנמצא במרומי המקלדת ישנם שימושים רבים וחשובים,
אחד השימושים העיקריים במפתח F12 טמון ביכולתו לפתוח שלל תכונות בדפדפני אינטרנט.
כאשר לוחצים עליו, F12 פותח את כלי המפתחים של הדפדפן, ומעניק למפתחי אתרים ומעצבי אתרים גישה ללא תחרות לקוד הבסיסי של דף אינטרנט.
חבילת כלים זו זמינה בדפדפנים פופולריים כגון Google Chrome, Mozilla Firefox ו-Microsoft Edge, ומאפשרת למפתחים לבדוק ולשנות קוד HTML, CSS ו-JavaScript של דף אינטרנט בזמן אמת.
על ידי מינוף הכלים הללו, מפתחים יכולים לכוונן את המראה, הפונקציונליות והביצועים של אתרי אינטרנט, ולהבטיח חווית משתמש אופטימלית.

כך זה נראה לאחר לחיצה על F12:

1688300687276.png



תחת הלשונית sourse:
1688300792441.png



נמצא הקוד עצמו:

1688300820275.png



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


תחת הלשונית Elements:

1688300898829.png



ו- אפשר גם לשנות צבעים ועיצוב (אם אתם על אתר לא שלכם - שלא אתם מפתחים, בריענון (לחיצה על מקש: F5) השינויים, כמובן, ייעלמו.

נגיד אם אני רוצה לבחור את הפרופיל שלי ולבחון אותו בצבע שונה, לדוגמא אני, לוטם, צבע: background-color: #ebadad;
⬇️

השלב הראשון הוא כזה:
לוחצים על מקש ימני בעכבר, ו - בדיקה

1688301125286.png


נפתח לנו קטע הקוד הרלוונטי.

בוא נאמר שאני רוצה לבדוק איך האות שלי נראית בצבע...:unsure: צהוב...

1688301244724.png


ואת האות עצמה אני רוצה לשנות ל - ירוק...

1688301333918.png


כאן השינוי התבצע:

1688301371889.png




או:
1688376841458.png



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

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

כמובן שאפשר לעשות זאת בכל אתר ואתר,
דוגמא נוספת; יוטיוב לדוגמא:

1688301679964.png


או JDN

1688413924813.png

וכך כל אתר שתרצו לערוך עליו את ניסוייכם המקוריים והמעניינים...



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


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

וכן בעריכת תוכן, עריכת ספרות ותחקיר.






המאמרים שלי < ממש כאן:love:






להשתמע ---

תגובות

יפה מאוד!!

אני משתמשת בזה גם כשאני רוצה להעלות משהו לדרייב, וכשמעלים דרך המייל, הכל נהיה עם מסך מטושטש, וא"א לעשות כלום תוך כדי, אז פשוט בF12 אני מורידה את הטישטוש....
וגם ככה יש אתרים שהתמונות מטושטשות, כדי שיוכלו לראות אותם רק אם עושים חשבון או משו, אז כנ"ל :sne:
וגם אפשר לשנות ציונים לדוגמא, לעשות צילום מסך, ולעבוד על אנשים...
 
בדיוק על זה שאלתי כאן, איפה אפשר לדעת דרך F12 כמה נפח הגלישה של הדף בו אני נמצא
אשמח מאוד לקבל כל מענה בתודה מראש
כדי לגלות את נפח הגלישה של דף באמצעות כלי המפתחים של F12, בצע את השלבים הבאים:
1. פתח את דף האינטרנט שברצונך לנתח בדפדפן האינטרנט שלך (למשל, Google Chrome, Firefox, Edge).
2. הקש F12 במקלדת כדי לפתוח את החלונית 'כלים למפתחים'. לחלופין, אתה יכול ללחוץ לחיצה ימנית על דף האינטרנט ולבחור "בדוק" או "בדוק אלמנט" מתפריט ההקשר.
3. בחלונית 'כלים למפתחים', נווט אל הכרטיסייה "רשת".
4. טען מחדש את דף האינטרנט על ידי לחיצה על Ctrl + R או לחיצה על כפתור הרענון בדפדפן שלך.
5. בזמן שהדף נטען, תראה בקשות שונות שמבוצעות בלשונית רשת. חפש את העמודה "גודל" או "אורך תוכן" בכרטיסייה רשת. עמודה זו מציגה את הגודל של כל משאב (לדוגמה, HTML, CSS, קובצי JavaScript, תמונות) שנטען על ידי דף האינטרנט.
6. ניתן לחשב את נפח הגלישה הכולל על ידי חיבור הגדלים של כל המשאבים שנטענו על ידי העמוד. שים לב שנפח הגלישה המוצג בלשונית רשת מייצג את גודל המשאבים שהורדו על ידי הדפדפן. ייתכן שהוא לא יכלול נתונים נוספים שהועברו במהלך אינטראקציות עם דף האינטרנט, כגון בקשות AJAX או תוכן שנטען באופן דינמי.
 
אפשר הסבר לפשוטי העם? ( לא מתכנתת, יש לי סיכוי?)
אני גם לא מתכנת, וזה יחסית פשוט...
ניקח נגיד את הוידאו שבכתבה הזאת
ונלחץ על F12
ונעבור לכרטיסייה Elements
זה בעצם מציג ממה מורכב הדף שאתה גולש בו
וכמו שאפשר לראות כשמניחים את העכבר על קטע מסוים בקוד זה מציג את החלק בדף שהקוד הזה מייצר
צריך לפתוח כל פעם את המשלוש הקטן ליד הקודים עד שמגיעים לחלק שגורם לסרטון להיות מוצג-
עד שמגיעים למקום שבו מוצגת הכתובת של הסרטון עצמו-
ואז לוחצים פעמיים על הכתובת וזה מדגיש אותה בנפרד-
ואז עושים העתק,
מדביקים את הקישור בשורת הכתובת ולחצים על אנטר
זה יפתח את הסרטון עצמו בצורה הזאת-
ואז לוחצים על השלוש נקודות-
הורד-
וירד הסרטון
בכוונה צילמתי את כל הדרך כדי להבין כמה זזה דרך מעצבנת...
 
אני גם לא מתכנת, וזה יחסית פשוט...
ניקח נגיד את הוידאו שבכתבה הזאת
ונלחץ על F12
ונעבור לכרטיסייה Elements
זה בעצם מציג ממה מורכב הדף שאתה גולש בו
וכמו שאפשר לראות כשמניחים את העכבר על קטע מסוים בקוד זה מציג את החלק בדף שהקוד הזה מייצר
צריך לפתוח כל פעם את המשלוש הקטן ליד הקודים עד שמגיעים לחלק שגורם לסרטון להיות מוצג-
עד שמגיעים למקום שבו מוצגת הכתובת של הסרטון עצמו-
ואז לוחצים פעמיים על הכתובת וזה מדגיש אותה בנפרד-
ואז עושים העתק,
מדביקים את הקישור בשורת הכתובת ולחצים על אנטר
זה יפתח את הסרטון עצמו בצורה הזאת-
ואז לוחצים על השלוש נקודות-
הורד-
וירד הסרטון
בכוונה צילמתי את כל הדרך כדי להבין כמה זזה דרך מעצבנת...
אם זה לא היה מספיק מובן אני אעשה סרטון של צילום מסך
 
אני גם לא מתכנת, וזה יחסית פשוט...
ניקח נגיד את הוידאו שבכתבה הזאת
ונלחץ על F12
ונעבור לכרטיסייה Elements
זה בעצם מציג ממה מורכב הדף שאתה גולש בו
וכמו שאפשר לראות כשמניחים את העכבר על קטע מסוים בקוד זה מציג את החלק בדף שהקוד הזה מייצר
צריך לפתוח כל פעם את המשלוש הקטן ליד הקודים עד שמגיעים לחלק שגורם לסרטון להיות מוצג-
עד שמגיעים למקום שבו מוצגת הכתובת של הסרטון עצמו-
ואז לוחצים פעמיים על הכתובת וזה מדגיש אותה בנפרד-
ואז עושים העתק,
מדביקים את הקישור בשורת הכתובת ולחצים על אנטר
זה יפתח את הסרטון עצמו בצורה הזאת-
ואז לוחצים על השלוש נקודות-
הורד-
וירד הסרטון
בכוונה צילמתי את כל הדרך כדי להבין כמה זזה דרך מעצבנת...
תודה רבה! ננסה בס"ד...
 
אשמח להסבר מדויק יותר
בבקשה
הוא הסביר כאן:
אני גם לא מתכנת, וזה יחסית פשוט...
ניקח נגיד את הוידאו שבכתבה הזאת
ונלחץ על F12
ונעבור לכרטיסייה Elements
זה בעצם מציג ממה מורכב הדף שאתה גולש בו
וכמו שאפשר לראות כשמניחים את העכבר על קטע מסוים בקוד זה מציג את החלק בדף שהקוד הזה מייצר
צריך לפתוח כל פעם את המשלוש הקטן ליד הקודים עד שמגיעים לחלק שגורם לסרטון להיות מוצג-
עד שמגיעים למקום שבו מוצגת הכתובת של הסרטון עצמו-
ואז לוחצים פעמיים על הכתובת וזה מדגיש אותה בנפרד-
ואז עושים העתק,
מדביקים את הקישור בשורת הכתובת ולחצים על אנטר
זה יפתח את הסרטון עצמו בצורה הזאת-
ואז לוחצים על השלוש נקודות-
הורד-
וירד הסרטון
בכוונה צילמתי את כל הדרך כדי להבין כמה זזה דרך מעצבנת...

הנה סרטון-(להוריד כוכביות)
https://drive.g*****oogle.com/fil***e/d/12nK5Am****bGnjMvPg89_UxwKjW525gSGPEg/view?usp=sharing
 
למה כשאני לוחץ F12 נפתח לי רק המחשבון של המחשב? למה רק אני תמיד נדפק?:unsure:
(מה שהצלחתי להוריד היה ע"י לחיצה על לחצן ימני ובדיקה, ולא בכל מקום יש את האופציה הזו)
 
אני גם לא מתכנת, וזה יחסית פשוט...
ניקח נגיד את הוידאו שבכתבה הזאת
ונלחץ על F12
ונעבור לכרטיסייה Elements
זה בעצם מציג ממה מורכב הדף שאתה גולש בו
וכמו שאפשר לראות כשמניחים את העכבר על קטע מסוים בקוד זה מציג את החלק בדף שהקוד הזה מייצר
צריך לפתוח כל פעם את המשלוש הקטן ליד הקודים עד שמגיעים לחלק שגורם לסרטון להיות מוצג-
עד שמגיעים למקום שבו מוצגת הכתובת של הסרטון עצמו-
ואז לוחצים פעמיים על הכתובת וזה מדגיש אותה בנפרד-
ואז עושים העתק,
מדביקים את הקישור בשורת הכתובת ולחצים על אנטר
זה יפתח את הסרטון עצמו בצורה הזאת-
ואז לוחצים על השלוש נקודות-
הורד-
וירד הסרטון
בכוונה צילמתי את כל הדרך כדי להבין כמה זזה דרך מעצבנת...
אתה עובד עבודה קשה ב-console...
בעוד ה-console פתוח הקש קונטרול + M ותראה פלאות
 
את זה אני יודע איך עושים-אבל צריך לחפור קצת...
הגבתי על ההודעה הזאת
אתה עובד עבודה קשה ב-console...
בעוד ה-console פתוח הקש קונטרול + M ותראה פלאות
שטענה שאפשר לקצר יותר את הדרך
 
את זה אני יודע איך עושים-אבל צריך לחפור קצת...
הגבתי על ההודעה הזאת

שטענה שאפשר לקצר יותר את הדרך
פשוט מאוד: אתה פותח את ה-console עם F12
לוחץ על קונטרול + M ואז בוחר באמצעות סמן העכבר את האזור שבו נמצא הסרטון
משם הדרך קצרה בהרבה להגיע לסרטון
 

הפרק היומי

תודה
נקרא  0  פעמים

לוח מודעות

More from לוטם

שתף את המאמר

למעלה