"Inspect Element" یک ابزار توسعه دهنده در مرورگر Firefox است که می توانید از آن برای ردیابی کد HTML در هر صفحه وب استفاده کنید. شیوه نامه های HTML و CSS یک صفحه وب را می توان با "Inspect Element" ویرایش کرد. می توانید سعی کنید صفحه ای را که دوست دارید ویرایش کنید و به سادگی با بارگذاری مجدد صفحه وب ویرایش شده ، آن را به حالت قبل بازگردانید.
گام
قسمت 1 از 2: بررسی عناصر
مرحله 1. Firefox را به روز کنید (اختیاری)
اگر از نسخه قدیمی Firefox استفاده می کنید ، امکان دسترسی به ویژگی های مورد بحث در این مقاله وجود نخواهد داشت. هنگامی که بررسی می کنید از کدام نسخه Firefox استفاده می کنید ، به روز رسانی به طور خودکار نصب می شود.
فایرفاکس 9 و نسخه های قبلی آن اصلاً ابزار "Inspect Element" را ندارند
مرحله 2. روی هر عنصر صفحه وب راست کلیک کنید
می توانید روی هر تصویر ، متن ، پس زمینه یا عنصری راست کلیک کنید. اگر موس شما فقط یک دکمه داشته باشد ، ترکیبی از چپ کلیک و کلید Control منجر به کلیک راست می شود.
مرحله 3. از منوی کشویی روی "Inspect Element" کلیک کنید
یک نوار ابزار در پایین پنجره ظاهر می شود. پانلی در زیر نوار ابزار نیز ظاهر می شود و کد HTML را در صفحه فعال نمایش می دهد.
مرحله 4. نوار ابزارها و پانل های موجود را بشناسید
وقتی از "Inspect Element" استفاده می کنید ، چندین پنل در زیر پنجره مرورگر باز می شود. موارد زیر نام و عملکرد نوار ابزار و پانل های موجود در "Inspect Element" را شرح می دهد:
- در ردیف بالا نوار ابزار جعبه ابزار است. در اینجا چندین ابزار وجود دارد ، اما ما روی دکمه Inspector در سمت چپ تمرکز می کنیم. مطمئن شوید که این دکمه در این راهنما فعال است (که با رنگ دکمه که هنگام فعال شدن آبی می شود نشان داده می شود).
- در زیر آن ، خطی از خرده نان عناصر HTML وجود دارد که محل عنصر انتخاب شده فعلی را نشان می دهد.
- پنجره زیر اعلان های ناوبری درخت HTML یا "نمای نشانه گذاری" صفحه وب را نشان می دهد. HTML عنصر انتخاب شده در این قسمت علامت گذاری و مرکز می شود.
- پنجره سمت راست ، شیوه نامه CSS صفحه وب فعلی را نشان می دهد.
مرحله 5. عنصر دیگری را انتخاب کنید
هنگامی که نوار ابزار باز است ، می توانید عناصر دیگر را به راحتی انتخاب کنید. سه راه برای انجام این کار وجود دارد:
- نشانگر را روی یک خط HTML برای علامت گذاری عنصر انتخاب شده نگه دارید (این ویژگی به Firefox 34+ نیاز دارد). برای انتخاب آن عنصر روی HTML کلیک کنید.
- روی ابزار "Select Element" در گوشه سمت چپ نوار ابزار کلیک کنید: این نماد به شکل مکان نما در بالای یک کادر قرار دارد. مکان نما را برای علامت گذاری یک عنصر در صفحه وب حرکت دهید و برای انتخاب آن کلیک کنید.
مرحله 6. ردیابی کد HTML
روی هر نقطه در پنجره HTML کلیک کنید. از کلیدهای جهت چپ و راست روی صفحه کلید برای انتقال از کد به کد استفاده کنید (این ویژگی به Firefox 39+ نیاز دارد). این روش برای انتخاب عناصری بسیار کوچک است که نمی توانند با مکان نما انتخاب شوند.
- HTML خاکستری عناصری را نشان می دهد که در صفحه نمایش داده نمی شوند. عناصر موجود در این عبارت ، مانند گره ها ، و سایر عناصر پنهان شده توسط ویژگی نمایش CSS هستند.
- برای نشان دادن یا پنهان کردن محتوا روی پیکان سمت چپ کادر کلیک کنید. برای نمایش کل محتوا ، alt="Image" یا گزینه را در حالی که روی پیکان کلیک می کنید نگه دارید.
مرحله 7. عنصر را پیدا کنید
در گوشه سمت راست ردیف آرد سوخاری ، قسمت جستجو (نماد حلقه شکل) را جستجو کنید. برای گسترش فیلد جستجو کلیک کنید و کد HTML مورد نظر خود را تایپ کنید. هنگام تایپ کردن ، یک پنجره بازشو نمایش داده می شود که نتایج جستجوی منطبق را نشان می دهد. روی عنصری از نتایج جستجو کلیک کنید و پنجره HTML را به کدی که بدنبال آن هستید بروید.
قسمت 2 از 2: ویرایش HTML
مرحله 1. صفحه را دوباره بارگذاری کنید تا از نو شروع شود
اگر با ابزارهای توسعه وب سایت تازه کار هستید ، توجه داشته باشید که تغییرات دائمی در صفحاتی که ویرایش می کنید ایجاد نمی کنید. تا زمانی که صفحه را بارگیری یا بسته نکنید ، ویرایش های شما فقط روی صفحه نمایش داده می شود. با خیال راحت آزمایش کنید حتی اگر نمی دانید چه اتفاقی می افتد.
مرحله 2. برای ویرایش روی HTML دوبار کلیک کنید
روی HTML درون خطی دوبار کلیک کنید. متن جدید را تایپ کرده و Enter را فشار دهید تا تغییرات ذخیره شوند.
مرحله 3. روی ابزار کلیک کنید و نگه دارید تا گزینه های بیشتری ظاهر شود
توجه داشته باشید که نوار ابزار breadcrumb بین درخت HTML و نوار ابزار بالای آن قرار دارد. برای باز کردن منوها ، روی ابزاری در این ردیف کلیک کرده و نگه دارید. در زیر اشاره ای به گزینه های موجود است (جامع نیست):
- "ویرایش به عنوان HTML" به شما امکان می دهد به جای ویرایش هر خط ، تمام محتوای HTML را از درخت HTML مستقیماً ویرایش کنید.
- "Copy Inner HTML" کل محتوای داخل گره را کپی می کند ، در حالی که "Copy Outer HTML" محتویات و گره ها (مانند یا
- "Paste" چندین گزینه برای محل چسباندن نسخه ارائه می دهد ، مانند قبل از گره یا پس از اولین فرزند گره.
- : hover،: active و: focus هنگام تعامل کاربر ظاهر عنصر را تغییر می دهد. جلوه های تغییر یافته از شیوه نامه CSS (قابل ویرایش از پنل سمت راست) تعریف می شود.
مرحله 4. کشیدن و رها کردن
برای تنظیم مجدد عناصر در کد ، روی HTML کلیک کرده و نگه دارید تا یک خط نقطه دار ظاهر شود. خط را به سمت بالا و پایین درخت حرکت دهید و دکمه موس را هنگامی که خط مورد نظر شما قرار دارد رها کنید.
این ویژگی به Firefox 39 و نسخه های بالاتر نیاز دارد
مرحله 5. نوار ابزار توسعه دهنده را ببندید
برای بستن کل پنجره Inspect Element ، روی دکمه X در گوشه سمت راست بالای نوار ابزار واقع در بالای پنل CSS کلیک کنید.
نکات
- همچنین می توانید نوار ابزار را از گزینه های منو در بالای پنجره باز کنید:
- Windows: Firefox → Web Developer → Toggle Tools
- Mac یا Linux: Tools → Web Developer → Toggle Tools
- Firefox 40 این گزینه را دارد که پنل CSS را پنهان کند تا فضای بیشتری برای ویرایش HTML داشته باشید. در گوشه سمت راست ردیف آرد سوخاری و در سمت راست قسمت جستجو ، به دنبال نماد پیکان باشید. روی این نماد کلیک کنید تا پانل CSS پنهان شود و دوباره برای نمایش آن کلیک کنید.
- همچنین می توانید پانل های CSS را ویرایش کنید ، اما در این مقاله ذکر نشده است. می توانید دستورالعمل های ویرایش کد CSS را در اینترنت پیدا کنید.
