كيفية تغيير رمز الصفحة في جوجل كروم. كيفية عرض الكود المصدري للصفحة في جوجل كروم

في البداية، قد يعتقد البعض أن هذه ليست أداة ضرورية على الإطلاق، ولكن عرض كود HTML بالكامل لموقع ما يعد أمرًا رائعًا للعثور على العناصر الضرورية في الكود، يمكن أن تكون هذه روابط وعلامات وعلامات وصفية وسمات وعناصر أخرى .

مجموعة مفاتيح التشغيل السريع +افتح نافذة البحث، في متصفح Chrome يظهر في أعلى اليمين:

الشكل 3. البحث عن طريق رمز الموقع

بعد إدخال طلب في نموذج البحث، ستنتقل الشاشة إلى العنصر الأول الذي تم العثور عليه، باستخدام الأسهم يمكنك التنقل بينها واختيار العنصر الذي تحتاجه:

الشكل 4. البحث عن طريق كود موقع HTML

التعليمات 2: كيفية عرض وتحرير كود HTML وCSS لموقع ما في متصفح Google Chrome

الآن الجزء الأكثر أهمية، والذي سأوضح فيه كيف يمكنك تحرير كود HTML وCSS لموقع ويب في المتصفح. ثم انقل التغييرات إلى المتصفح

تتوفر هذه الأداة المفيدة دائمًا في متصفحك، ويمكنك تجربة أوامر أخرى ستسهل عليك تعديل موقعك.

من خلال البحث في عدد لا يحصى من المواقع على الإنترنت، يمكنك العثور على المواقع التي نحبها حقًا. هناك عدد من الأسئلة تنشأ على الفور. هل تم إنشاء الموقع باستخدام كود محلي الصنع أو نوع من نظام إدارة المحتوى (CMS)؟ ما هي أنماط CSS الموجودة به؟ ما هي العلامات الوصفية الخاصة به؟ وما إلى ذلك وهلم جرا.

هناك العديد من الأدوات التي يمكن استخدامها لاستخراج معلومات حول كود صفحة موقع الويب. ولكن لدينا دائمًا زر الفأرة الأيمن في متناول اليد. وهذا ما سنستخدمه، باستخدام موقعي كمثال.

كيفية عرض رمز الصفحة؟

لعرض الكود المصدري لصفحة الموقع، تحتاج إلى تحريك مؤشر الماوس فوق أي منطقة من صفحة الويب (باستثناء الصور والروابط). بعد ذلك قم بالضغط على زر الفأرة الأيمن. ستفتح أمامنا نافذة تحتوي على عدة خيارات (قد تختلف قليلاً في المتصفحات المختلفة). في متصفح Google Chrome، على سبيل المثال، هذه هي الأوامر:

• خلف؛
• إلى الأمام؛
• اعادة التشغيل؛
• حفظ باسم؛
• ختم؛
• ترجمة إلى الروسية.
• عرض رمز الصفحة;
• عرض الكود.

نحن بحاجة للنقر على عرض رمز الصفحةوسيفتح أمامنا كود html الخاص بصفحة الموقع.

عرض رمز الصفحة: ما الذي يجب الانتباه إليه؟

لذا فإن رمز صفحة Html عبارة عن قائمة مرقمة من الأسطر، يحمل كل منها معلومات حول كيفية إنشاء هذا الموقع. لكي تتعلم بسرعة كيفية فهم هذا العدد الهائل من العلامات والرموز الخاصة، عليك التمييز بين الأقسام المختلفة من الكود.

على سبيل المثال، تحتوي أسطر التعليمات البرمجية داخل علامة الرأس على معلومات لمحركات البحث ومشرفي المواقع. لا يتم عرضها على الموقع. هنا يمكنك معرفة الكلمات الرئيسية التي يتم الترويج لها لهذه الصفحة، وكيفية كتابة عنوانها ووصفها. هنا أيضًا يمكنك العثور على رابط سنتعرف من خلاله على عائلة خطوط Google المستخدمة في الموقع.

إذا تم إنشاء الموقع على CMS WordPress أو Joomla، فسيكون هذا مرئيًا هنا أيضًا. على سبيل المثال، تعرض هذه المنطقة معلومات حول قالب WordPress أو قالب موقع Joomla. يمكنك رؤيته من خلال قراءة محتويات الروابط المميزة باللون الأزرق. يظهر رابط واحد قالب موقع ويب.

على سبيل المثال:

//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3

سنرى أنماط خطوط CSS للصفحة. في هذه الحالة، يتم استخدام الخط. يمكن رؤية ذلك هنا - عائلة الخطوط: "Source Sans Pro".

تم تحسين هذا الموقع باستخدام البرنامج المساعد Yoast SEO. يمكن ملاحظة ذلك من قسم التعليمات البرمجية الذي تم التعليق عليه:

تم تحسين هذا الموقع باستخدام الإصدار 3.4.2 من Yoast SEO الإضافي - https://yoast.com/wordpress/plugins/seo/

يتم عرض جميع المعلومات الموجودة داخل علامة الجسم بواسطة المتصفح على شاشة المراقبة. نرى هنا رمز HTML الخاص بالصفحة، وفي الأسفل يوجد رمز البرنامج النصي Yandex Metrics. وهي محاطة بعلامة تعليق تحتوي على النص:

/ عداد Yandex.Metrika

دعونا نلخص ذلك

بعد إجراء تحليل سطحي إلى حد ما لرمز الصفحة الرئيسية للموقع، يمكننا استخلاص استنتاج حول الأدوات التي تم إنشاء هذه الصفحة بها. رأينا فيه:

• نظام إدارة المحتوى وورد؛
• جوجل مصدر الخط بلا برو؛
• موضوع ووردبريس – سيدني؛
• إضافات يوست؛
• عداد مقاييس ياندكس.

الآن أصبح مبدأ تحليل كود HTML لصفحة موقع الويب واضحًا تمامًا. ليس من الضروري على الإطلاق إبقاء الصفحة التي تبحث عنها مفتوحة في المتصفح. يمكنك حفظ رمز الصفحة على جهاز الكمبيوتر الخاص بك باستخدام مجموعات المفاتيح ctrl+a، ctrl+c، ctrl+v. الصقه في أي محرر نصوص (يفضل Notepad++) واحفظه بامتداد html. وبالتالي، يمكنك في أي وقت دراستها بشكل أعمق والعثور على المزيد من المعلومات المفيدة لنفسك.

لقد أصدرنا كتابًا جديدًا بعنوان تسويق محتوى الوسائط الاجتماعية: كيفية الوصول إلى عقول متابعيك وجعلهم يقعون في حب علامتك التجارية.

الكود المصدري للموقع عبارة عن مجموعة من علامات HTML وأنماط CSS ونصوص JavaScript النصية التي يتلقاها المتصفح من خادم الويب.

المزيد من مقاطع الفيديو على قناتنا - تعلم التسويق عبر الإنترنت مع SEMANTICA

ويمكن مقارنتها بمجموعة الأوامر التي يصدرها القائد للجنود. تخيل أن الجمهور لا يرى أو يسمع رئيسه. ومن وجهة نظرهم، يقوم الجيش بإجراءات بشكل مستقل. في حالتنا، القائد هو المتصفح، والأوامر هي الكود المصدري، والجنود المسيرون هم النتيجة النهائية.

يتم تخزين الموقع على خادم الويب، الذي يرسل الصفحة بناء على طلب المستخدم. الطلب هو كتابة عنوان URL في شريط العناوين، أو النقر فوق رابط، أو النقر فوق زر إرسال في النموذج. لا يهم اللغة التي تمت كتابة صفحات الويب بها أو ما إذا كانت تتضمن مكونًا برمجيًا. النتيجة النهائية لأي خوارزمية من جانب الخادم هي مجموعة من علامات HTML والنص.
الكود المصدري للصفحة عبارة عن مجموعة من البيانات تتضمن:

• ترميز HTML؛
• ورقة الأنماط أو رابط الملف؛
• برامج مكتوبة بلغة JavaScript أو روابط لملفات تحتوي على تعليمات برمجية.

تتم معالجة هذه الأقسام الثلاثة بواسطة المتصفح. بالنسبة للخادم، هذا هو ببساطة النص الذي يجب إرساله استجابةً للطلب.

لماذا قد نحتاج إلى دراسة الكود المصدري؟

كل ما نراه يمكننا تحليله وتطبيقه لحل بعض المشكلات التي تنشأ أثناء العمل مع الموقع، خاصة عند تحسينه. ومن خلال النظر إلى الكود المصدري، يمكننا:

• راجع العلامات الوصفية لموقعك أو لموقع شخص آخر لتحليلها.
• معرفة وجود أو عدم وجود عناصر معينة في الموقع: العدادات، ورموز التعريف في الأنظمة المختلفة، ونصوص معينة وأشياء أخرى.
• تعرف على معلمات العناصر: الأحجام والألوان والخطوط.
• ابحث عن المسار إلى الصور والعناصر الأخرى الموجودة على الصفحة.
• استكشاف الروابط من الصفحة.
• ابحث عن مشكلات التعليمات البرمجية التي تتداخل مع عملية تحسين موقع الويب: الأنماط غير الموضوعة في ملفات منفصلة، ​​والبرامج النصية، والتعليمات البرمجية غير الصالحة.

هذه هي الميزات الأساسية، ولكن في الواقع، من خلال القدرة على قراءة الكود، يمكنك معرفة الكثير عن الصفحة.

كيفية عرض الكود المصدري للموقع

لن يكون من الممكن القيام بذلك بشكل كامل بالشكل الذي تم نشره به على الخادم من المتصفح. ولكن يمكنك رؤية كل العلامات من خلال النقر بزر الماوس الأيمن على الصفحة. هنا وأدناه باستخدام Google Chrome كمثال.

حدد خيار "عرض رمز الصفحة" واحصل على القائمة الكاملة في علامة تبويب منفصلة.

إنه مجرد نص عليك تحليله لفهمه. ولكن يمكنك الحصول على كود تفاعلي باستخدام أدوات المطورين.

كيفية العثور على الكود المصدري لصفحة الموقع

انقر على أيقونة القائمة في المتصفح. غالبًا ما يكون على اليمين ويشبه ثلاث نقاط أو خطوط.

في قسم الأدوات الإضافية، حدد "أدوات المطور".

سيتم فتح نافذة توضح الحالة النشطة للكود. وهذا يعني أنه عند النقر فوق العلامة، سيظهر نمط العنصر بجوارها، وسيتم تمييز الكتل المحددة في الصفحة.

في علامة التبويب "المصدر"، يمكنك عرض محتويات بعض الملفات: البرامج النصية والخطوط والصور.

في علامة التبويب "الأمان"، يمكنك التحقق من شهادة الموقع.

ستساعدك علامة التبويب "التدقيقات" على التحقق من الموارد المنشورة على الاستضافة.

إذا كان موقع اللوحة الموجودة على اليمين غير مناسب، فيمكنك النقر فوق النقاط الثلاث وتغييره عن طريق تحديد العنصر المطلوب.

كيفية عرض العلامات الوصفية

يتضمن كل مستند HTML علامات هيكلية. وهنا بعض منها:

1. أتش تي أم أل – الوثيقة بأكملها.
2. الرأس - قسم رؤوس الخدمة.
3. العنوان – عنوان الصفحة (يتم عرضه في علامة التبويب).
4. النص - نص الوثيقة.
5. H1-H6 – عناوين نص الصفحة.
6. مقالة - مقالة.
7. القسم - القسم.
8. القائمة - القائمة.
9. شعبة - كتلة.
10. سبان - سلسلة.
11. ف – الفقرة.
12. الجدول - الجدول.

تم تصميم العناصر لتحديد الأقسام بشكل منطقي في الصفحة؛ وإذا لزم الأمر، يتم تصميمها باستخدام الأنماط. أنها تحتوي على نص مرئي بطريقة أو بأخرى على الصفحة. لكن علامة الرأس تحتوي على معلومات الخدمة. يتم استخدام العلامات الوصفية للإشارة إلى ذلك. كل ما هو مكتوب فيها مخصص للخادم ومحركات البحث.

ولا يمكن معرفة محتوياتها بأي طريقة أخرى.

دعونا ننتبه إلى علامة الرابط. بمساعدتها، يتم تحديد الروابط للملفات الخارجية المضمنة. إذا رغبت في ذلك، يمكنك رؤية المحتويات وحفظها على القرص. للقيام بذلك، حرك المؤشر إلى العنوان واضغط على RMB. حدد "فتح في علامة تبويب جديدة".

سيتم فتح الملف المحدد في علامة تبويب جديدة يمكنك عرضها أو حفظها.

كيفية عرض الكود المصدري للصفحة لتصحيح البرنامج النصي

في هذه الحالة، يكون من الأنسب فتح الصفحة على الجهاز المحلي. إذا كنت تحتاج فقط إلى تصحيح العلامات والأنماط والبرامج النصية، فيمكن القيام بذلك مباشرة من المجلد. يتم عرض كود HTML بنفس الطريقة. ولكن يمكن رؤية أخطاء كود JavaScript في علامة التبويب "وحدة التحكم". يعرض هذا وصف الخطأ ورقم السطر الذي حدث فيه.

يمكن رؤية بناء الجملة مباشرة في الكود. هذا هو الغرض من علامة التبويب "المصدر".

كيفية عرض كود عنصر معين

بالنسبة للصفحات الكبيرة التي تحتوي على العديد من العناصر، من الصعب العثور على الكود اللازم في جميع العلامات. في هذه الحالة، يجب عليك استخدام أمر قائمة السياق الخاص. حرك الماوس فوق الجزء واضغط على RMB. حدد الأمر "عرض الرمز".

سيتم فتح نفس النافذة، ولكن مع التركيز على الكائن المحدد.

ملخص

قلنا لك ما هو رمز مصدر الصفحة. يكفي إتقان المعرفة الأساسية بـ HTML وCSS، وباستخدام أدوات المطور الملائمة، ستتمكن من تصحيح أخطاء مستندات HTML الخاصة بك.

ستسمح لك مراجعة مدونة الموارد على الإنترنت بالتعلم ليس فقط من تجربتك الخاصة، ولكن أيضًا استخدام أمثلة عملية حقيقية. وبالنسبة لمتخصصي تحسين محركات البحث، ستكون العلامات الوصفية مفيدة، حيث يمكن للمعلومات التي يمكن أن تخبرنا بها الكثير عن الموقع.

تعد خدمة SendPulse أداة تسويقية لإنشاء قاعدة اشتراكات وتحويل الزوار العاديين إلى موقع الويب الخاص بك إلى زوار عاديين. يجمع SendPulse في منصة واحدة أهم الوظائف لجذب العملاء والاحتفاظ بهم:
● النشرات الإخبارية عبر البريد الإلكتروني،
● دفع الويب،
● رسائل الرسائل القصيرة،
● سمتب،
● الرسائل الإخبارية في فايبر،
● إرسال الرسائل إلى الفيسبوك رسول.

النشرات الإخبارية عبر البريد الإلكتروني

إرسال إشعارات الدفع

SMTP

روبوتات فيسبوك ماسنجر

إرسال الرسائل القصيرة

إنضم لبرنامج

كل مستخدم للإنترنت لديه مواقعه المفضلة التي يقضي فيها وقتًا طويلاً. والكسالى فقط هم الذين لم يفكروا في النظر إلى كيفية خلقها ومما تتكون. من المستحيل الإجابة على كل هذه الأسئلة، حيث أن هناك العديد من الطرق لإنشاء موقع على شبكة الإنترنت، ولكن النظر إلى الأوامر والأكواد التي تتكون منها ممكنة ومتاحة للجميع.

سؤال آخر هو ما إذا كان الشخص الذي لا يشارك في البرمجة سيفهم أيًا من الرموز التي يتكون منها الكود. ولكن من الأمثلة التي سيتم تقديمها أدناه، سيتمكن أي مستخدم Google Chrome من عرض العناصر الفردية للمواقع.

كيفية عرض الكود المصدري لصفحة html في متصفح جوجل

لكي تتمكن من عرض رمز الصفحة في كروم، عليك الذهاب إلى الموقع الذي تهتم به وتنفيذ الخطوات التالية:

ويختلف هذان العنصران في وظائفهما ومعلوماتهما بالنسبة للمستخدم أو المبرمج أو المتسلل.

ما الفرق بين رمز الصفحة وأمر "عرض الرمز" فقط؟

تحليل كل من هذه الوظائف، يمكنك كتابة مقال منفصل. بالنسبة للمبرمجين، يعد هذا الاختلاف مهمًا ويفهمون في أي الحالات يكون من الضروري استخدام "عرض الرمز" وفي أي الحالات يكون من الضروري استخدام "عرض رمز الصفحة" في متصفح Google Chrome.

لكن توضيحًا للمستخدم العادي، يمكن تقسيم هذه الوظائف إلى الأغراض التالية:

1. يعد "عرض رمز الصفحة" ضروريًا فقط لرؤية المجموعة الرئيسية للصفحة. في الأساس، هذه هي بنية الموقع (بدون نماذج إضافية على شكل ملفات CSS وإضافات أخرى تبقى في مجلد منشئ الموقع). هذه البنية ليست مناسبة لإنشاء صفحتك الخاصة عن طريق "النسخ واللصق"، ولكنها ستسمح لك بمعرفة ما فعله المبرمج بالضبط وبأي تسلسل للتأكد من أن الموقع في متصفح Google Chrome به مثل هذا التصميم الخارجي.
2. يعرض "عرض الرمز" بنية تفصيلية، مع تسليط الضوء على جميع المناطق المتأثرة في الصفحة. إذا قمت بالتمرير فوق رمز قائمة محدد، فسيتم تمييز العنصر الموجود على الموقع الذي ينتمي إليه.
3. يتم فتح عرض رمز الصفحة في متصفح منفصل دون القدرة على تعديله. أي أنها مناسبة فقط لنسخ وقراءة كود الموقع. ولكن هذه ليست وظيفة أقل فائدة.
4. "عرض الكود" قابل للتغيير ويمكنك تعديل أي عنصر بالطريقة التي تناسبك. بالطبع، كل هذه التغييرات "ستعيش" حتى يتم تحديث الصفحة، ولكن في بعض الأحيان يكون من الممتع مراجعة هذه الإعدادات وفهم سبب الحاجة إلى هذه القيمة أو تلك، وماذا سيحدث إذا قمت بتغييرها. لا ينبغي أن تفترض أنك ستؤذي نفسك أو الموقع من خلال مثل هذه الإجراءات - فهذه التغييرات تؤثر فقط على رمز Google Chrome الخاص بك ولا تتصل بالإنترنت.

نحن نفكر في مسألة كيفية عرض رمز العنصر

إذا أردنا الإجابة على مثل هذا السؤال، فإن الخيار الوحيد الذي يقترح نفسه هو المثال. لأنه في مقال واحد من الصعب جدًا أن تصبح شخصًا يفهم هذا الموضوع (مطور الويب)، ولكن الإظهار بمثال حتى تتم تسوية السؤال أسهل بكثير.

وظيفة رمز العنصر واسعة جدًا، لذلك نأخذ إحدى الكلمات الموجودة على موقع متصفح Google Chrome. أردنا أن نأخذ في الاعتبار الكلمات الرئيسية (التي سيتم كتابتها في الكود باسم "الكلمات الرئيسية") التي تم استخدامها لموقعنا. للقيام بذلك، نقوم بتنفيذ الخوارزمية التالية:

طرق أخرى لاستخدام هذه الميزة في متصفح Google Chrome

بشكل عام، الاستمرار في الإجابة على سؤال حول كيفية النظر إلى رمز العنصر وسبب الحاجة إليه، يجب عليك سرد وظائفه. وبالتحديد، بفضل القدرة على عرض كود عنصر أي موقع في متصفح Google Chrome، يمكننا:

• شاهد بنية الموقع بدءًا من الرأس ("رأس الموقع") وانتهاءً بالنهاية (الأمر النهائي لأي برنامج)؛
• عرض جميع وظائف الموقع، وهي: روابط لمواقع أخرى، ووحدات إضافية من مواقع خارجية ووجود عدادات مدمجة لجمع المعلومات المختلفة؛
• معرفة هل النسخ من الموقع محظور أم لا؛
• سيقوم الكود بتسجيل جميع الروابط إلى الصفحات الأخرى بالموقع، بالإضافة إلى تصميمها والإجراءات اللاحقة بعد النقر عليها.

هذه ليست بأي حال من الأحوال قائمة محدودة. ولكن تجدر الإشارة إلى أنه بدون معرفة خاصة، يكاد يكون من المستحيل "قراءة" رمز صفحة Google Chrome وأن البيانات المستلمة ليست مطلوبة عمليًا من قبل المستخدم العادي.

العنصر "عرض رمز العنصر" لا يعمل

يجب أن يقال على الفور أن كل موقع سيكون له وصول مفتوح إلى رموز العناصر. وهذا يعني أنه حتى المواقع الأكثر شعبية والأكثر تكلفة ستكون مفتوحة لعرض التعليمات البرمجية الخاصة بها. ولذلك، إذا كان العنصر الموجود في متصفح Google Chrome غير نشط أو أدى إلى ظهور خطأ، فقد يكون له الأسباب المحتملة التالية:

• ملف تعريف المستخدم تالف؛
• وجود برامج ضارة على جهاز الكمبيوتر؛
• الحظر بامتداد معين لزيادة الأداء (حتى هذا يمكن أن يحدث).

إصلاح ملف تعريف المستخدم التالف

لإنشاء ملف تعريف جديد، يجب عليك حذف الملف القديم من جهاز الكمبيوتر الخاص بك. للقيام بذلك نقوم بما يلي:

1. أغلق Google Chrome وقم بتشغيل متصفح Windows Explorer المدمج.
2. أدخل الأمر التالي في شريط العناوين: %LOCALAPPDATA%\Google\Chrome\User Data\.
3. عندما يفتح الدليل، ابحث عن المجلد "الافتراضي" وأضف "النسخ الاحتياطي" إلى اسمه حتى تحصل على ما يلي: "النسخ الاحتياطي الافتراضي".
4. الآن، بعد إعادة تشغيل متصفح Chrome، سيتم إنشاء ملف تعريف جديد.

نقوم بإزالة البرامج الضارة أو بقاياها

إذا كان الملف الشخصي الجديد لا يتيح لنا الوصول إلى رمز عنصر الصفحة وما زلنا نرى الخطأ، فيجب علينا القيام بما يلي:

1. افتح سطر أوامر Windows ("Run") وأدخل الأمر "cmd" هناك.
2. أدخل الأمر التالي في السطر: RD /S /Q "%WinDir%\System32\GroupPolicyUsers".
3. بعد تأكيد الإجراء، أدخل هذا: RD /S /Q "%WinDir%\System32\GroupPolicy".
4. الآن "gpupdate /force" (بدون علامتي الاقتباس).

إذا تم كل شيء بشكل صحيح، فبعد إعادة تشغيل الكمبيوتر، سيفتح Google Chrome رمز العناصر وسيعمل المتصفح بشكل طبيعي.

قد يكون من المفيد أن تقرأ:

• كيفية عرض الكود المصدري للصفحة في جوجل كروم;
• كيفية تثبيت برنامج تشغيل بطاقة الرسومات AMD Radeon;
• التجربة: كيفية التخلص من الخدوش على الهاتف الذكي;
• التسجيل وتسجيل الدخول إلى صفحتك في جهة الاتصال - ماذا تفعل إذا لم تتمكن من تسجيل الدخول إلى VK;
• صور ماريانا رو. ماريانا رو: السيرة الذاتية;
• ملخص البريد الإلكتروني: التاريخ، التطوير قصة عن البريد الإلكتروني;
• تشغيل عدة وظائف عند التحميل كيفية استدعاء وظيفة تحميل الصفحة;
• خطأ في تهيئة Direct3D عند بدء اللعبة;