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

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

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

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

למה אתה רוצה לראות את קוד המקור?

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

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

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

גוגל כרום

פועל: Chrome OS, Linux, MacOS, Windows

גרסת שולחן העבודה של Chrome מציעה שלוש שיטות שונות להצגת קוד המקור של הדף, הראשונה והפשוטה ביותר באמצעות קיצור המקשים הבא: CTRL + U ( COMMAND + OPTION + U ב- MacOS).

בלחיצה, קיצור דרך זה פותח כרטיסיית דפדפן חדשה המציגה HTML וקוד אחר עבור הדף הפעיל. מקור זה הוא מקודד צבע מובנה באופן זה עושה את זה פשוט כדי comparmentalize ולמצוא את מה שאתה מחפש. תוכל גם להגיע לשם על ידי הזנת הטקסט הבא בסרגל הכתובות של Chrome, המצורף לצד השמאלי של כתובת האתר של הדף, ולהכות על מקש Enter : view-source: (לדוגמה, מקור תצוגה: https: // www ).

השיטה השלישית היא באמצעות כלי הפיתוח של Chrome, המאפשרים לך לצלול עמוק יותר לתוך הקוד של הדף, כמו גם לצבוט אותו ב- the-fly למטרות בדיקה ופיתוח. ממשק כלי הפיתוח ניתן לפתוח ולסגור באמצעות קיצור מקשים זה: CTRL + SHIFT + I ( COMMAND + OPTION + I ב- MacOS). ניתן גם להפעיל אותם על ידי נקיטת הנתיב הבא.

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

דְמוּי אָדָם
הצגה של מקור דף אינטרנט ב- Chrome עבור Android היא פשוטה כמו הוספת הטקסט הבא לקדמת הכתובת (או כתובת האתר) ושליחתו: view-source:. דוגמה לכך תהיה מקור תצוגה: https: // www. . HTML וקוד אחר מהדף המדובר יוצגו באופן מיידי בחלון הפעיל.

iOS
אמנם אין שיטות מקוריות להצגת קוד מקור באמצעות Chrome ב- iPad, iPhone או iPod touch, הפשוטה והיעילה ביותר היא להשתמש בפתרון של צד שלישי, כגון אפליקציית View Source.

זמין עבור $ 0.99 ב- App Store, View Source מבקש ממך להזין את כתובת האתר של הדף (או להעתיק / להדביק אותו מסרגל הכתובות של Chrome, שהוא לפעמים הנתיב הפשוט ביותר לביצוע) וזהו. בנוסף להצגת HTML וקוד מקור אחר, האפליקציה כוללת גם כרטיסיות המציגות נכסי דף בודדים, מודל אובייקט המסמך (DOM), וכן גודל הדף, קובצי cookie ופרטים מעניינים אחרים.

מיקרוסופט אדג

פועל ב: Windows

דפדפן Edge מאפשר לך להציג, לנתח ואף לתפעל את קוד המקור של הדף הנוכחי באמצעות ממשק כלי הפיתוח . כדי לגשת אל ערכת כלים שימושית זו, באפשרותך להשתמש באחד מקיצורי המקשים הבאים: F12 או CTRL + U. אם אתה מעדיף את העכבר במקום זאת, לחץ על כפתור התפריט של אדג '(שלוש נקודות הממוקם בפינה הימנית העליונה) ובחר באפשרות F12 Developer Tools מהרשימה.

לאחר שכלים dev מנוהלים בפעם הראשונה, אדג 'מוסיף שתי אפשרויות נוספות לתפריט ההקשר של הדפדפן (נגיש על ידי לחיצה ימנית בכל מקום בתוך דף אינטרנט): בדוק אלמנט ו הצג מקור , האחרון אשר פותח את החלק Debugger של התה ממשק ממשק מאוכלס עם קוד המקור - -.

Mozilla Firefox

רץ ב: לינוקס, MacOS, Windows

כדי להציג קוד מקור של דף בגירסת שולחן העבודה של Firefox, תוכל ללחוץ על CTRL + U ( COMMAND + U ב- MacOS) במקלדת, אשר תפתח לשונית חדשה המכילה HTML וקוד אחר עבור דף האינטרנט הפעיל.

הקלדת הטקסט הבא בשורת הכתובת של פיירפוקס, ישירות משמאל לכתובת האתר של הדף, תגרום לאותו מקור להופיע בלשונית הנוכחית במקום: view-source: (View-source: https: // www.) .

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

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

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

דְמוּי אָדָם
הצגת קוד המקור בגרסת Android של Firefox ניתן להשגה על ידי קידומת כתובת האתר של הדף עם הטקסט הבא: View-source:. לדוגמה, כדי להציג את מקור ה- HTML כדי לשלוח את הטקסט הבא בשורת הכתובת של הדפדפן: view-source: https: // www. .

iOS
השיטה המומלצת שלנו להצגת קוד מקור של דף אינטרנט ב- iPad, iPhone או iPod touch היא דרך האפליקציה View Source, הזמינה ב- App Store תמורת $ 0.99. אמנם אינך משולב ישירות עם Firefox, תוכל להעתיק ולהדביק בקלות כתובת אתר מהדפדפן אל האפליקציה כדי לחשוף את ה- HTML וקוד אחר המשויך לדף המדובר.

ספארי אפל

פועל ב- iOS ו- MacOS

iOS
למרות ש- Safari ל- iOS אינו כולל את היכולת להציג את מקור הדף כברירת מחדל, הדפדפן אכן משתלב בצורה חלקה למדי עם האפליקציה View Source - הזמינה ב- App Store תמורת $ 0.99.

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

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

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

1. לחץ על Safari בתפריט הדפדפן, הממוקם בחלק העליון של המסך.
2. כאשר התפריט הנפתח מופיע, בחר באפשרות העדפות .
3. העדפות של ספארי עכשיו צריך להיות גלוי. לחץ על הסמל מתקדם , הממוקם בצד השמאלי ביותר של השורה העליונה.
4. בחלק התחתון של הקטע 'מתקדם' מופיעה אפשרות שכותרתה הצג תפריט 'פיתוח' בשורת התפריטים , מלווה בתיבת סימון ריקה. לחץ על תיבה זו פעם אחת כדי להציב סימן ביקורת בו, ולסגור את החלון העדפות על ידי לחיצה על "x האדום" נמצא בפינה השמאלית העליונה.
5. לחץ על התפריט פיתוח , הממוקם בחלק העליון של המסך.
6. כאשר התפריט הנפתח מופיע, בחר הצג מקור דף . ניתן גם להשתמש בקיצור המקשים הבא: Command + OPTION + U.

אוֹפֵּרָה

רץ ב: לינוקס, MacOS, Windows

כדי להציג את קוד המקור מדף האינטרנט הפעיל בדפדפן Opera השתמש בקיצור המקשים הבא: CTRL + U ( COMMAND + OPTION + U ב- MacOS). אם אתה מעדיף לטעון את המקור בכרטיסייה הנוכחית במקום זאת, הקלד את הטקסט הבא משמאל לכתובת האתר שבסרגל הכתובות ולחץ על Enter : view-source: (view-source: https: // www. ).

גרסת שולחן העבודה של אופרה גם מאפשרת לך להציג קוד HTML, CSS ואלמנטים אחרים באמצעות כלי הפיתוח המשולב שלה. להפעלת ממשק זה, אשר כברירת מחדל יופיע בצד הימני של חלון הדפדפן הראשי, לחץ על קיצור המקשים הבא: CTRL + SHIFT + I ( פקודה + OPTION + I ב- MacOS).

ערכת הכלים למפתחים של Opera נגישה גם על ידי ביצוע השלבים הבאים.

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

ויואלדי

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

תוכל גם להוסיף את הטקסט הבא לחזית כתובת האתר של הדף, המציג את קוד המקור בכרטיסייה הנוכחית: view-source:. דוגמה לכך תהיה מקור תצוגה: http: // www. .

שיטה נוספת היא באמצעות כלי הפיתוח המשולבים של הדפדפן, הנגישים על ידי לחיצה על שילוב CTRL + SHIFT + I או באמצעות האפשרות כלים למפתחים בתפריט הכלים של הדפדפן - שנמצאת על ידי לחיצה על הלוגו 'V' בפינה השמאלית העליונה. שימוש בכלי dev מאפשר ניתוח מעמיק הרבה יותר של מקור הדף.