افتح رمز الصفحة باستخدام المفاتيح. كيفية فتح الكود المصدري للصفحة

في البداية، قد يعتقد البعض أن هذه ليست أداة ضرورية على الإطلاق، ولكن عرض كود 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. وبالتالي، يمكنك في أي وقت دراستها بشكل أعمق والعثور على المزيد من المعلومات المفيدة لنفسك.

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

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

في الأعلى سيكون لديك العديد من علامات التبويب المدرجة. اليوم سنتحدث عن علامة التبويب "العناصر". , الذي يعرض عناصر صفحة الويب مع تمييز العلامات، والخصائص، وتسليط الضوء على تداخل العناصر، وتمثيل التسلسل الهرمي للعنصر في شجرة DOM (تلميح في الأسفل، من الأصل الجذر إلى الأصل الحالي)، والقدرة على لتحرير العناصر، وقائمة خصائصها، فكر في البحث حسب العناصر، وكذلك دعنا نتعرف على عرض أنماط CSS، وما إلى ذلك، المرتبطة بالعناصر.

كيف يمكنني عرض جميع الأنماط المرتبطة بعنصر معين؟ أي واحد يستخدم الآن؟ في أي الملفات هم موجودون؟

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

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

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

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

علامة HTML غير مرئية في سياق الصفحة؟ أو هل تحتاج إلى العثور على جميع العلامات، على سبيل المثال، حسب فئة معينة، اسم، خاصية، نوع؟

افتح الموقع في Google Chrome، وانقر بزر الماوس الأيمن، واستدعاء قائمة السياق، وحدد « عرض رمز الصفحة » . اضغط على مجموعة المفاتيح "CTRL + F" في نفس الوقت، أدخل العبارة التي نحتاجها ( على سبيل المثال: فئة =”حشوة") والتنقل عبر قائمة النتائج التي تم العثور عليها، مع عرض جميع الأنماط المرتبطة بالعناصر المطلوبة في الوقت نفسه على الجانب الأيمن من الصفحة.

كيفية عرض كود html للعنصر (العناصر) المحملة ديناميكيًا (على سبيل المثال: عبر Ajax)

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

عرض تغييرات نمط CSS في الوقت الحقيقي

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

عرض تأثير قواعد CSS بشكل تفاعلي على عرض علامات html

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

نقوم بتغيير هيكل عرض عناصر html بشكل سريع (مباشرة في المتصفح)

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

• اضف ميزة- يضيف سمة للعنصر المحدد. بمجرد أن يصبح المؤشر نشطا، نبدأ في تعيين الخاصية المطلوبة. على سبيل المثال: سنكتب name=”itemImage”، والذي سيتم إضافته فورًا إلى العنصر الخاص بنا.
• تحرير السمة- إذا نقرت بزر الماوس الأيمن على سمة عنصر، يصبح العنصر متاحًا يحرريصف. انقر وتحرير.

مثال الاستخدام:لقد نسينا كلمة المرور المحفوظة تحت العلامات النجمية في Google Chrome (إذا تم حفظ كلمة المرور في هذا المتصفح). انقر بزر الماوس الأيمن على العنصر الذي تم إدخال كلمة المرور فيه، وانقر على "عرض رمز العنصر" , في وحدة التحكم في علامة التبويب اليسرى عناصرانقر بزر الماوس الأيمن على السمة type=”password”، ثم انقر بزر الماوس الأيسر عليها يحرريصفتغيير السمة اكتب =”كلمة المرور"على اكتب =”نص"والآن، بدلاً من العلامات النجمية، يتم عرض نفس كلمة المرور في نموذج نصي.

• يحررلغة البرمجة- انقر بزر الماوس الأيمن على العنصر الموجود في وحدة التحكم عناصر، يختار يحررلغة البرمجة،قم بتغيير الكود حسب رغبتك.
• ينسخمثللغة البرمجة- نقوم بنسخ جزء HTML الذي نحتاجه لمزيد من البحث، على سبيل المثال، في المفكرة، أو لأغراض أخرى حيث نحتاج إلى تطبيق نفس التخطيط تمامًا. نحن نوفر الوقت.
• ينسخXPATH- نسخ تمثيل XPATH للبنية من جذر العنصر الأصلي إلى العنصر المحدد.
• يمسحالعقدة- إذا كنت بحاجة إلى إزالة العنصر المحدد حاليًا وجميع العناصر التابعة له من سياق صفحة الويب، ورؤية النتيجة.
• كلمةطَوّق- سيعرض عرض صفحة الويب في سياق وحدة التحكم عناصرأكثر قابلية للقراءة.

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