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