در این مقاله همه چیز در مورد استفاده از Firebug در فایرفاکس را خواهید آموخت. فایرباگ افزونه ای است که برای همه وبلاگ نویسان، بهینه سازان، طراحان صفحه آرایی و وب مسترها مفید خواهد بود. قابلیت های مرورگر موزیلا را برای افرادی که در وب سایت ها کار می کنند گسترش می دهد.
کاری که Firebug می تواند انجام دهد
افزونه Firebug دارای ویژگی های زیر است:
- بازرسی و ویرایش HTML، کد جاوا اسکریپت، DOM
- اشکال زدایی و ثبت کد جاوا اسکریپت
- اجرای JS به طور مستقیم از طریق خط فرمان
- تشخیص خودکار خطا در جاوا اسکریپت، XML، CSS
- بررسی و ویرایش سبک های CSS
- نمایش معیارهای CSS
- نمایش درخواست های شبکه هنگام بارگذاری سایت
کاربران Google Chrome ممکن است توجه داشته باشند که اینها توابع استانداردی هستند که در Chrome تعبیه شده اند (با فشار دادن F12 قابل دسترسی هستند)، اما انتخاب مرورگر یک موضوع حساس و شخصی است، بنابراین برای برخی استفاده از فایرفاکس با افزونه Firebug راحت تر است.
نصب موفقیت آمیز با ظاهر شدن نماد اشکال نشان داده می شود.
استفاده از Firebug در Layout
برای مشاهده سریع بخشی از کد سایت (ویژگی های سبک CSS و غیره)، روی عنصر کلیک راست کرده، سپس روی "Analyze Element" کلیک کنید ("Inspect"، F12، Ctrl+F12 - برای باز کردن در یک پنجره جدید). این افزونه هم بخشی از کد و هم سبک های CSS را به شما نشان می دهد که ظاهر آن را تشکیل می دهند، در حالی که خود کد html با رنگ آبی برجسته می شود.
پس از این، ما می توانیم HTML را در پرواز ویرایش کنیم. این برای چیست؟ برای اینکه به سرعت ببینید کد تغییر یافته در سایت چگونه به نظر می رسد - برای اینکه فایل های منبع را 10 بار در سرور ذخیره نکنید، بلکه این کار را فقط پس از دستیابی به نتیجه مورد نیاز با استفاده از افزونه انجام دهید. و سپس تغییراتی ایجاد کنید.
همچنین، یک مزیت غیرقابل انکار این "ویرایش در مرورگر" این واقعیت است که تغییرات به صورت محلی رخ می دهند - فقط شما آنها را می بینید. این امر به ویژه برای وب سایت های پربازدید صادق است، جایی که ما نمی توانیم کد HTML + CSS را بدون بررسی خطاها (تحریف سایت) پیاده سازی کنیم.
دو گزینه برای استفاده از Firebug برای یافتن قطعه کد مورد نظر وجود دارد. اولین مورد این است که ماوس را روی سایت ببرید و سپس کد HTML مربوطه در پنجره افزونه هایلایت می شود. مورد دوم این است که ماوس را روی کد HTML در پنجره افزونه حرکت دهید و سپس عناصر موجود در سایت مربوط به کدی که ماوس به آن اشاره کرده است برجسته می شود. همه اینها به صورت آنی و پویا کار می کنند، که به شما امکان می دهد کد سایت خود یا شخص دیگری را به سرعت درک کرده و پیمایش کنید.
فقط به یاد داشته باشید که برای فعال کردن این ویژگی روی دکمه کلیک کنید:
سپس، هنگامی که عنصر مورد نیاز خود را پیدا کردید، روی آن کلیک چپ کرده و به پنجره Firebug بروید تا روی کد کار کنید.
در همان زمان، عناصر را می توان جمع کرد و گسترش داد - برای یک ظاهر فشرده، آنها توسط برچسب ها جمع می شوند: div، p، link و غیره.
نحوه استفاده از Firebug برای ویرایش CSS
بسیار ساده. اگر در پنجره سمت چپ کد HTML داریم، در پنجره سمت راست استایل‌های CSS را داریم که می‌توان آنها را به سرعت ویرایش کرد و تغییرات طراحی سایت را نظارت کرد.
استفاده از افزونه firebug برای کار با CSS شامل حالات زیر است:
1. با کلیک کردن بر روی دایره کلیک کنید تا سبک های CSS را غیرفعال کنید. 
2. فایل .css را جستجو کنید که استایل‌ها از آن برای یک عنصر خاص بارگیری می‌شوند (و همچنین یک خط خاص را در این فایل جستجو کنید تا تغییرات و ویرایش شیت‌های سبک آبشاری را راحت‌تر کنید):
چگونه از افزونه Firebug برای اندازه گیری سرعت بارگذاری سایت خود استفاده کنیم
سرعت بارگذاری وب سایت (وجود خطا در هنگام بارگذاری) یک شاخص مهم نه تنها هنگام بهینه سازی یک وب سایت برای موتورهای جستجو، بلکه برای راحتی کاربران است. هیچ‌کس نمی‌خواهد منتظر بارگذاری یک وب‌سایت کند باشد و کاربران باید مراقب باشند.
و یک افزونه فوق العاده در این مورد نیز به ما کمک خواهد کرد. چگونه آن را تماشا کنیم؟ به برگه «شبکه» در افزونه بروید و صفحه ای را که در آن هستید بازخوانی کنید. پس از این، یک طرح دریافت خواهید کرد - کدام عناصر بارگذاری شده اند، چه تعداد، به چه ترتیبی و چه پاسخی را سرور هنگام درخواست عناصر می دهد. این اطلاعات به شما این امکان را می دهد که سایت خود را بهینه کنید و روی بارگذاری سریعتر آن کار کنید.
این همه است، اکنون می دانید که چگونه از افزونه firebug استفاده کنید و با آن به عنوان یک ویرایشگر سایت بصری کار کنید. برای چی؟ وظایف متفاوت است: اصلاح فرم جستجو یا اشتراک، بازی با فونت ها و اندازه متن و عنوان، یافتن کد HTML یک عنصر برای حذف آن، و بسیاری از کارهای روزمره دیگر که مدیران وب و وبلاگ نویسان با آن روبرو هستند.
من خودم یکی از طرفداران قدیمی اپرا هستم و قدمت آن به روزهایی که پول پرداخت می شد برمی گردد. به نظر من شما نمی توانید برای گشت و گذار در شبکه پیدا کنید.
اما Opera برای کار در یک وب سایت بسیار کمتر از مرورگر معروف فایرفاکس مناسب است. البته اپرا را می‌توان برای طرح‌بندی وب‌سایت نیز طراحی کرد، اما هر چه که می‌توان گفت، چیزی به نام Firebug ندارد و این برای یک طراح چیدمان تازه کار چقدر مهم است. اگرچه زمان می گذرد و از زمان نوشتن این مقاله، توسعه دهندگان مرورگر، ظاهراً با شنیدن من، قابلیت های اساسی قهرمان مقاله امروز را به تمام ساخته های خود اضافه کرده اند، اما نسخه اصلی همچنان بهترین از بهترین ها باقی مانده است. .
پلاگین های مرورگر برای کمک به مدیران سایت
Firebug در ابتدا فقط یک پسوند برای آن بود و این امکان را به شما می داد تا زمان لازم برای یافتن و تصحیح قطعه مورد نیاز در کد Html را به میزان قابل توجهی کاهش دهید و اگر یک وب مستر تازه کار هستید یا ساختار فایل CMS (سیستم مدیریت محتوا) موتور کاملاً برای شما ناآشنا است، پس من نمی توانم تصور کنم که چگونه می توانید بدون او زندگی کنید.
بله، البته، شما می توانید کد منبع صفحه مورد نظر را باز کنید و به دنبال مکان مناسب بگردید، اما این زمان و روتین است که قهرمان ما به راحتی و به طور طبیعی می تواند از آن اجتناب کند. یک چیز راحت و غیر قابل تعویض و قبلاً مشابه آن وجود نداشت.
بنابراین من مجبور بودم در دو خانه زندگی کنم. در اپرا در اینترنت گشت و گذار می کردم و در فایرفاکس روی پروژه هایم کار می کردم و دائماً از قابلیت های افزونه استفاده می کردم که امروز در مورد آن صحبت خواهیم کرد.
اما علاوه بر افزونه‌های طرح‌بندی برای مرورگرها، احتمالاً هنگام کار با پروژه‌های خود، به افزونه‌های SEO نیز نیاز دارید که به شما امکان می‌دهد به سرعت PR و TIC صفحات باز شده در مرورگر را ردیابی کنید، ببینید آیا پیوندهای خارجی در این صفحات وجود دارد یا خیر. بسته یا نه برای نمایه سازی توسط موتورهای جستجو (این به ویژه هنگام نظر دادن به وبلاگ ها و جستجوی وبلاگ های به اصطلاح Dofollow جالب است) و موارد دیگر (پیوندهای آنها را در همان ابتدای مقاله ببینید).
اگر در مورد مرورگرها صحبت می کنیم، من واقعاً جدید را دوست داشتم - سریع است، حتی در مقایسه با Opera، راحت و زیبا است، اما من هنوز نفهمیدم که آیا چیزی برای آن وجود دارد یا خیر، که در زیر توضیح خواهم داد.
Firebug فقط یک افزونه نیست که برخی از عملکردهای پیشرفته را به فایرفاکس شما اضافه می کند. در این مورد در صفحه توسعه دهندگان بسیار درست نوشته شده است - این تکامل توسعه وب است.
بله دقیقا همینطوره تکامل زمانی است که شما از یک چوب حفاری به یک بیل مکانیکی می روید. اثر شگفت انگیز است و با شروع استفاده از این افزونه بلافاصله آن را احساس خواهید کرد. خوب، شاید همین ستایش آن کافی باشد، وقت آن رسیده که در مورد توانایی های آن صحبت کنیم. Firebug را دانلود کنیدمی توانید از صفحه افزونه ها در حال حاضر نسخه فعلی 1.11.4 است.
طبیعتاً باید این افزونه را در فایرفاکس نصب کنید، زیرا در آنجا بسیار راحت تر خواهد بود. اگر روی دکمه دانلود برای این افزونه در هر مرورگر دیگری کلیک کنید، یک گفتگوی دانلود استاندارد باز می شود که در آن این توزیع را در هارد دیسک خود ذخیره می کنید.
سپس باید به Mazila بروید، "File" - "Open file" را از منوی بالا انتخاب کنید و فایل دانلود شده را در هارد دیسک خود پیدا کنید. در نتیجه فرآیند نصب مجددا آغاز خواهد شد.
پس از راه اندازی مجدد مرورگر، نماد Firebug را به شکل سوسک در گوشه سمت راست پایین پنجره خواهید دید - این بدان معنی است که این افزونه با موفقیت نصب شده است و منتظر سفارشات شماست. ابتدا به قابلیت‌های آن که خودم هنگام کار با وب‌سایت‌ها استفاده می‌کنم نگاه می‌کنم و سپس به طور خلاصه در مورد کارهای دیگری که می‌توانید با آن انجام دهید به طور کلی صحبت خواهم کرد.
این اتفاق می افتد که شما باید چیزی را تغییر دهید، آن را به پایان برسانید، آن را تعمیر کنید، فقط برای اینکه ببینید چگونه به تنهایی یا منبع شخص دیگری اجرا می شود و چگونه کار می کند. بله، بله، درست شنیدید، از منبع شخص دیگری. اگر راه حل این یا آن وب مستر را دوست داشتید و می خواهید همین کار را برای خودتان انجام دهید، Firebug به شما کمک می کند.
در اصل، قبلاً گفته ام که می توانید کد منبع یک صفحه را بدون این پسوند مشاهده کنید (در هر مرورگر روی صفحه کلیک راست کنید و چیزی مانند "کد منبع صفحه" یا "کد منبع" را از منوی زمینه انتخاب کنید). اما این کدهای زیادی وجود خواهد داشت و یافتن مکان مناسب زمان می برد. سوسک آتش در این مورد چه چیزی به ما ارائه می دهد؟
نحوه استفاده از Firebug هنگام ساخت وب سایت
و او از شما دعوت می کند که دوباره با دکمه سمت راست روی مکان مورد علاقه در صفحه وب کلیک کنید و از منوی زمینه - "Analyze element" را انتخاب کنید (در نسخه انگلیسی افزونه "Inspect" خواهد بود). و ببینید، شما در پنجره آن فقط آن بخش از کد صفحه را خواهید دید که مسئول تشکیل دقیقاً عنصر مورد علاقه شما است. راحت؟
بی شک. فقط برای این کار باید این افزونه را دوست داشته باشید. اما او می تواند کارهای بیشتری انجام دهد. کد عنصر مورد نیاز خود را در پنجره ای از این افزونه که در پایین صفحه باز می شود، در شکل بالا مشاهده خواهید کرد. بخشی از کد که مسئول عنصر صفحه وب مورد نظر شما است با رنگ آبی مشخص می شود.
همچنین به خطی که در تصویر با خط قرمز زیر آن خط زدم توجه کنید که با کلمه Edit در پنجره Firebug شروع می شود. اگر روی این کلمه کلیک کنید، می توانید تغییراتی در قطعه انتخاب شده از کد Html ایجاد کنید که بلافاصله در صفحه ظاهر می شود.
به عنوان مثال، آدرس یک تصویر را در پنجره افزونه به یک نام عمداً ناموجود تغییر دهید و تصویر از صفحه وب ناپدید می شود، همه چیز را برگردانید و تصویر ظاهر می شود. اما لطفاً توجه داشته باشید که این تغییرات به هیچ وجه بر منبع شما تأثیر نمی گذارد. فقط شما همه تغییرات را خواهید دیدو فقط در این صفحه وب، تابع اشکال آتش قادر متعال است. به محض رفرش صفحه، تمام تغییرات ایجاد شده توسط افزونه ناپدید می شوند.
با استفاده از Firebug، می توانید اتفاقاتی را که هنگام تغییر کد Html یا CSS یک صفحه وب ممکن است رخ دهد، شبیه سازی کنید. بنابراین، با استفاده از قابلیت‌های آن، می‌توانید (بدون اتلاف وقت برای جستجوی فایل موتور CMS خود که مسئول خروجی این بخش است) گزینه‌های مختلف را جستجو کرده و مورد نیاز خود را انتخاب کنید، یا در صورت مشخص شدن گزینه فعلی، از تغییر کلا خودداری کنید. آنقدر بد نباش .
اما اگر هنوز می‌دانید که باید تغییراتی در کد Html ایجاد شود و این تغییرات منجر به بهبود ظاهر صفحه وب شما می‌شود، در این صورت آن لحظه دشوار فرا می‌رسد که متأسفانه حتی یک سوسک آتشین نیز به شما در درک آن کمک نمی‌کند. (او، متأسفانه، قادر مطلق نیست).
مشکل پیدا کردن کد مناسب در فایل های موتور
شما باید به طور مستقل فایلی را در موتور سایت، انجمن یا وبلاگ خود پیدا کنید که این بخش از کد Html را تولید می کند. این فایل به احتمال زیاد دارای پسوند .php، i.e. نوشته شده در زبان برنامه نویسی سرور PHP و بر این اساس، این بخش در آن ممکن است کاملاً متفاوت از آنچه در کد منبع صفحه وب می بینید به نظر برسد.
این، به نظر من، مشکل اصلی ویرایش ظاهر و محتوای صفحات وب سایت ساخته شده بر روی هر موتور (CMS) است. اگر یک وب مستر تازه کار هستید یا هرگز با چنین موتوری مواجه نشده اید، به سختی قادر خواهید بود فوراً تعیین کنید که قطعه صفحه وب مورد علاقه شما در کدام فایل تشکیل شده است.
سپس، با گذشت زمان، با کسب تجربه، این کار برای شما دشوار نخواهد بود، اما در حال حاضر پیشنهاد می کنم طبق طرح زیر عمل کنید. من در مورد موضوع صحبت می کنم، همانطور که آنها دوست دارند بگویند - این یک شوخی است، البته در اینجا هیچ رازی وجود ندارد.
ابتدا، باید به چیزی در کدی که Firebug مهربان برای شما باز کرد، توجه کنید. چیزی منحصر به فرد یا به ندرت دیده می شود که احتمالاً باید در فایل PHP موتور خود یکسان باشد.
هنگام جستجوی محتویات پرونده ها در Total Commander، ممکن است مشکلی با کلمات روسی یا بهتر بگوییم رمزگذاری آنها ایجاد شود. اگر Total commander چیزی برای درخواست شما به زبان روسی پیدا نکرد، کادر کنار "UTF-8" را در پنجره جستجو علامت بزنید و همه چیز پیدا خواهد شد.
ویژگی ها و اصول استفاده از Firebug
اجازه دهید بحث در مورد قابلیت های فایرباگ را که در این مقاله شروع کردیم ادامه دهیم. ما قبلاً به کار آن به طور کلی اشاره کرده ایم، یعنی اینکه چگونه می توانید از این افزونه برای تعیین تکه صفحه وب که مسئول یک عنصر طراحی خاص است استفاده کنید.
علاوه بر روشی که دقیقاً در بالا توضیح داده شد (روی مکان مورد نظر در صفحه وب کلیک راست کرده و "Analyze element" را از منوی زمینه انتخاب کنید)، این برنامه افزودنی می تواند به سادگی با کلیک کردن بر روی نماد عنکبوت در پایین، زنده شود. گوشه سمت راست پنجره مرورگر یا با استفاده از کلید F12. با فشردن مجدد این کلید پنجره Firebug بسته می شود.
اگر می خواهید افزونه در یک پنجره جداگانه باز شود، در حالی که Shift را روی صفحه کلید خود نگه داشته اید، روی عنکبوت کلیک کنید یا از میانبر صفحه کلید Ctrl+F12 استفاده کنید. شما خودتان راحت ترین گزینه را برای زنده کردن این شاهکار مهندسی انتخاب می کنید. پنجره شما چیزی شبیه به این خواهد بود:
دکمه های کنترل پنل در بالا قرار می گیرند و قسمت اصلی پنجره به دو نیمه چپ و راست تقسیم می شود. در نیمه سمت چپ می توانید ساختار کد HTML صفحه باز شده در مرورگر را ببینید و در نیمه سمت راست می توانید سبک های CSS را مشاهده کنید که برای تعریف یک یا آن ظاهر این سند وب استفاده می شوند.
نحوه استفاده از Firebug برای یادگیری HTML
Firebug به شما امکان می دهد دو ویژگی بسیار جالب را پیاده سازی کنید که به شما در درک ساختار کد صفحه باز شده در مرورگر کمک می کند. می توانید ماوس را روی خود تگ HTML در پنجره این افزونه حرکت دهید و در صفحه وب آن دسته از عناصری که این تگ وظیفه تشکیل آن ها را بر عهده دارد برجسته می شوند (مثلاً روی کانتینرهای Div کلیک کنید و بلافاصله موارد زیر را مشاهده خواهید کرد. برجسته کردن این ظرف در بالا در طراحی صفحه وب).
یا برعکس، می‌توانید در این برنامه افزودنی چنان حالت پیچیده‌ای را فعال کنید که ماوس خود را روی خود صفحه وب حرکت دهید و کد HTML مربوط به برچسب‌ها (که در زیر نشانگر ماوس قرار دارند) به‌صورت بلادرنگ در نشان داده می‌شوند. پنجره Firebug به سادگی یک چیز غیر قابل تعویض هنگام مطالعه ساختار یک منبع وب خاص، به ویژه برای مبتدیان.
برای پیاده سازی همه آنچه که من توضیح دادم، به اطلاعاتی نیاز داریم که در نیمه سمت چپ پنجره پلاگین نمایش داده می شود، جایی که برچسب های یک صفحه وب مشخص شده در مرورگر باز می شود. در آنجا می توانید به وضوح لانه سازی تگ های خاصی را مشاهده کنید، به عنوان مثال، ظروف DIV.
برای گسترش محتویات یک برچسب، می توانید روی علامت مثبت کنار آن کلیک کنید. با حرکت موس خود روی یک ظرف DIV خاص در سمت چپ پنجره Firebug، می توانید ببینید کدام عناصر صفحه وب در این ظرف DIV گنجانده شده است.
محتویات ظرف DIV توسط افزونه با یک الگوی آبی آبی در صفحه وب نقاشی می شود که از طریق آن می توانید ببینید کدام عناصر طراحی در این ظرف DIV وجود دارد. درست است، صفحه وبی که باز می‌کنید ممکن است بسیار بزرگ باشد، و سپس باید پیمایش کنید تا قطعه طراحی برجسته شده با moiré آبی را پیدا کنید.
همانطور که از اسکرین شات بالا می بینید، ظرف
مسئول نمایش یک بلوک با عنوان و توضیحات وبلاگ وردپرس من است.اما می‌توانید از طریق Firebug اطلاعاتی را در مورد اینکه کدام برچسب مسئول خروجی کدام بلوک در یک صفحه وب است، برعکس بروید. در این حالت، ماوس را نه به بلوک های DIV با کد، بلکه مستقیماً به عناصر مورد علاقه خود در صفحه وب باز شده در مرورگر منتقل می کنیم. در این صورت در پنجره افزونه، در قسمت نمایش کدهای HTML، آن دسته از تگ ها (مثلاً کانتینرهای DIV) که وظیفه تشکیل این بلوک را بر عهده دارند با رنگ آبی مشخص می شوند.
همه اینها به صورت پویا در پنجره این افزونه مطابق با حرکت ماوس در صفحه وب نمایش داده می شود. یک روش بسیار بصری و راحت برای استفاده از اشکال آتش برای مطالعه ویژگی‌های ساخت پروژه وب خود یا شخص دیگری.
برای اجرای این روش، تنها باید با کلیک بر روی دکمه پانل نشان داده شده در شکل، حالت مربوطه را فعال کنید:
پس از کلیک بر روی این دکمه، ماوس خود را بر روی بخش های مورد نظر صفحه وب حرکت دهید و در سمت چپ پنجره افزونه می توانید بخش هایی از کد Html که مسئول تولید این عناصر طراحی هستند را مشاهده کنید. آبی). در این حالت، قطعه صفحه ای که نشانگر ماوس روی آن قرار دارد در یک قاب آبی محصور می شود:
پس از یافتن قطعه مورد نظر، می‌توانید روی آن کلیک چپ کرده و به قسمت سمت چپ پنجره Firebug بروید تا با تگ‌های این عنصر طراحی کار کنید. شما می توانید هر گونه دستکاری را با برچسب ها در پنجره افزونه انجام دهید و نتیجه را بلافاصله در صفحه باز شده در مرورگر مشاهده خواهید کرد.
در این صورت البته هیچ تغییری در فایل های موتور واقعی سایت ایجاد نخواهد شد. اما از طرف دیگر شما قادر خواهید بود تا گزینه های مختلفی را برای ساخت یک طراحی صفحه وب در زمان واقعی شبیه سازی کنید. اگر نسخه جدید مدل‌سازی شده با استفاده از Firebug برای شما مناسب است، باید در فایل‌های موتور واقعی تغییراتی ایجاد کنید که می‌توانید با استفاده از روش توضیح داده شده در بالا با مشارکت Total commander آن را بیابید.
نحوه استفاده از Firebug برای کار با CSS
پنجره سمت راست این افزونه تمام خصوصیات CSS را که مسئول طراحی قطعه کد انتخاب شده در پنجره سمت چپ هستند نمایش می دهد. این ویژگی های CSS ظاهر این بلوک Html را تعیین می کند. این می تواند موقعیت آن نسبت به بلوک های دیگر در یک صفحه مشخص، اندازه، نوع و رنگ فونت مورد استفاده در یک بلوک خاص برای نمایش رنگ یا پیوندها و موارد دیگر باشد.
برای نشان دادن واضح قابلیت‌های CSS در طراحی هر عنصر از یک صفحه وب، می‌توانید نشانگر ماوس را به هر قانون سبکی که در سمت راست پنجره نشان داده شده است حرکت دهید. یک دایره خاکستری با خطی در کنار این قانون ظاهر می شود. با کلیک بر روی آن، این ویژگی CSS را در این صفحه وب غیرفعال کرده و یک دایره قرمز رنگ در کنار آن ظاهر می شود.
در عین حال قادر خواهید بود تغییرات ایجاد شده در صفحه باز سایت را به صورت لحظه ای مشاهده کنید. که سوسک آتش به شما کمک می‌کند تا بفهمید دقیقا کدام قانون در فایل شیوه نامه آبشاری مسئول چه چیزی در طراحی یک عنصر طراحی است. برای فعال کردن مجدد ویژگی CSS غیرفعال شده، باید دوباره روی دایره خط قرمز رنگ کنار آن کلیک کنید.
ویژگی های واقع در سمت راست را می توان به همان روشی که تگ های سمت چپ پنجره این افزونه را ویرایش کردیم ویرایش کرد. تمام تغییرات ایجاد شده در ویژگی ها از ناحیه سمت راست فوراً در صفحه وب باز شده در Mazil نمایش داده می شود، اما به هیچ وجه بر ویژگی های CSS واقعی نوشته شده در فایل شیوه نامه آبشاری، که نام آن را در بالا می بینید، تأثیر نمی گذارد. مسدود کردن:
پنجره Firebug خطی را در فایل شیوه نامه آبشاری نشان می دهد که این ویژگی CSS روی آن نوشته شده است. بنابراین، اگر تغییرات شبیه سازی شده در طراحی وب سایت را دوست دارید، برای ایجاد همین تغییرات در شیوه نامه های سایت خود، تنها کافی است فایل مورد نظر را باز کنید و خط پیشنهادی در پنجره افزونه را در آنجا پیدا کنید. همه چیز بسیار ساده تر از تغییر در کد HTML صفحه است.
نحوه اندازه گیری سرعت بارگذاری سایت در فایرباگ
و در آخر، من می خواهم در مورد نحوه اندازه گیری سرعت سایت با استفاده از این پسوند صحبت کنم (با آن اشتباه گرفته نشود).
سرعت بارگیری منابع شما یک شاخص بسیار مهم است که بر موفقیت و سهولت ارتقاء جستجوی آن تأثیر می گذارد. اگر سرعت بارگذاری پروژه شما مناسب نباشد، این امر می تواند منجر به عواقب بسیار ناخوشایندی شود، هم از طرف موتورهای جستجو و هم از طرف وفاداری بازدیدکنندگان.
و مهمترین چیز این است که بازدیدکنندگان می توانند از کار با منبع شما خودداری کنند، زیرا ... صفحات وب زمان زیادی برای بارگذاری نیاز دارند. علاوه بر این، موتورهای جستجو، به ویژه گوگل، هنگام ارزیابی سودمندی کلی یک منبع، سرعت بارگذاری را در نظر می گیرند و همچنین می تواند بر موقعیت پروژه وب شما در نتایج جستجو تأثیر بگذارد.
برای شناسایی و از بین بردن تنگناها در سرعت بارگیری عناصر منبع خود، می توانید از خدمات ویژه ای استفاده کنید که به شما امکان می دهد این موضوع را اندازه گیری کنید. من در مقاله اول در مورد تعیین و افزایش سرعت بارگذاری سایت در این مورد صحبت کردم (می توانید آن را بخوانید).
کافی است آدرس صفحه وب مورد نظر را وارد کنید و پس از مدتی یک تفکیک کامل دریافت کنید که کدام عنصر چقدر طول می کشد تا بارگذاری شود. به این ترتیب می توان عناصری را که به وضوح کاهش می دهند شناسایی کرد و برای سرعت بخشیدن به بارگذاری آنها اقداماتی انجام داد.
اما همین کار را می توان بدون مراجعه به خدمات شخص ثالث انجام داد. افزونه مورد علاقه ما Firebug این ویژگی را دارد. به سادگی روی دکمه "شبکه" کلیک کنید و صفحه وب باز شده را بازخوانی کنید.
در نتیجه اطلاعات کاملی در مورد بارگذاری تمام عناصر صفحه وب در اختیار شما قرار می گیرد. تجزیه و تحلیل و اقدامات لازم برای افزایش سرعت بارگذاری در صورت لزوم. این احتمالاً برای امروز تمام است. در مقاله بعدی می خواهم موضوع را ادامه دهم و همچنین در مورد یک افزونه فوق العاده دیگر برای مرورگر فایرفاکس صحبت کنم که هنگام کار با طراحی صفحات وب سایت به ما کمک می کند.
این افزونه نامیده می شود و تعداد زیادی از انواع ابزار دارد که این امکان را به شما می دهد تا کار طرح بندی یا تنظیم قالب منبع وب خود را ساده کنید. خوب، سپس ما به بررسی افزونه های SEO برای فایرفاکس و اپرا می رویم.
همچنین می توانید ویدیویی در مورد موضوع تماشا کنید که مطمئناً اضافی نخواهد بود:
موفق باشی! به زودی شما را در صفحات سایت وبلاگ می بینیم
با رفتن به اینجا می توانید ویدیوهای بیشتری را تماشا کنید");">
ممکن است علاقه مند باشید
توسعه دهنده وب برای فایرفاکس - نصب و قابلیت های پلاگین برای طراحان صفحه آرایی و وب مسترها 
SEObar - یک افزونه راحت و آموزنده SEO برای Opera نحوه جستجوی محتویات فایل ها در Total Commander 
برنامه‌های افزودنی و طرح‌های زمینه برای Google Chrome
سلام به همه!
امروز در مورد یک افزونه بسیار مفید برای مرورگرهای Firebug به شما خواهم گفت! افزونه Firebug، یا از انگلیسی به عنوان "سوسک آتش" ترجمه شده است، یک پیشرفت واقعی تکاملی در دنیای اینترنت است و شایسته توجه ویژه است!
شاید این افزونه هیچ سودی برای کاربران عادی وب جهانی نداشته باشد. اما، اگر شما یک استاد وب هستید و منبع خود را دارید، فایرباگ را دوست خواهید داشت! و اگر شما نیز یک طراح چیدمان مبتدی هستید، به سادگی یک دستیار ضروری برای شما خواهد بود. بنابراین، چه چیزی در مورد این اشکال آتش سوزی عالی است؟
افزونه Firebug به شما این امکان را می دهد که به راحتی هر کد HTML یا CSS را پیدا و ویرایش کنید، حتی اگر در پیمایش این دو زبان مشکل دارید. به عنوان مثال، باید کدی را که مسئول خروجی و نمایش تاریخ و ساعت پست‌هایتان است پیدا کنید یا به بخشی از کد که منوی اصلی منبع شما را نمایش می‌دهد نگاه کنید.
یا شاید از موقعیت بلوک ها در نوار کناری راضی نیستید و می خواهید آنها را متفاوت قرار دهید و اندازه و رنگ آنها را تغییر دهید. شاید در آینده طرح رنگی طرح منبع خود را تغییر دهید و بخواهید رنگ پیوندها را مطابق با آن تغییر دهید.
و لحظات جالب تر وجود دارد. در یکی از منابع موجود در شبکه، یکی از عناصری را که نویسنده در سایت خود پیاده سازی کرده بود، دوست داشتید و واقعاً می خواستید کاری مشابه در وبلاگ خود انجام دهید. اما چگونه می توانید ببینید که او از چه کدی برای پیاده سازی این عنصر استفاده می کند؟ پاسخ ساده است - افزونه Firebug به شما کمک خواهد کرد! بله، بله، درست شنیدید، با استفاده از افزونه Firebug می توانید کدهای HTML نه تنها صفحات منبع خود، بلکه سایر صفحات را نیز مشاهده کنید.
افزونه Firebug به شما کمک می کند تا با همه این موارد و موارد دیگر مقابله کنید. و من فقط مسائل اصلی کاری را که استادان وب اغلب باید با آنها سر و کار داشته باشند فهرست کرده ام. در واقع، این افزونه دارای بسیاری از ویژگی های دیگر است، اما من در این مقاله در مورد آنها صحبت نمی کنم. شاید مدتی بعد، اما امروز نه.
البته، شما می توانید تمام کارهایی را که من لیست کرده ام بدون افزونه انجام دهید. به عنوان مثال، اگر نیاز به یافتن بخشی از کد دارید که مسئول نمایش زمان و تاریخ است، می‌توانید روی صفحه مرورگر مربوطه کلیک راست کرده و از لیست کشویی گزینه «Page Source Code» را انتخاب کنید یا از کلید میانبر Ctrl + U استفاده کنید. .
اما در این حالت، HTML - کد کل محتوای صفحه باز را خواهید دید و فقط به بخشی که مسئول نمایش زمان و تاریخ است نیاز دارید. پس باید چه کار کرد؟ شما باید تمام کدها را با دقت بررسی کنید تا آنچه را که نیاز دارید پیدا کنید. و اگر اصلاً HTML را درک نمی کنید، جستجو بی فایده خواهد بود. سوسک آتش در این مورد چه چیزی به ما ارائه می دهد؟
همه چیز بسیار ساده است، بلافاصله یک بخش آماده از کدی را که به دنبال آن هستید به شما می دهد. برای انجام این کار، کافی است ماوس خود را روی عنصری که دوست دارید نگه دارید، کلیک راست کرده و "Inspect element using Firebug" را از همان لیست کشویی انتخاب کنید (نام در مرورگرهای مختلف کمی متفاوت است):
Firebug همچنین بخشی از کد مورد نظر شما را نمایش می دهد و آن را با رنگ آبی برجسته می کند:
اما این همه ماجرا نیست. شما می توانید بدون ترس از بهم خوردن، بلافاصله تغییرات لازم را در کد ایجاد کنید! واقعیت این است که این افزونه به شما امکان می دهد کدهای HTML و CSS را ویرایش کنید و تمام تغییراتی که رخ می دهد را در زمان واقعی مشاهده کنید. و بزرگترین مزیت این است که فقط شما آنها را خواهید دید.
و سپس، اگر از تغییرات ایجاد شده راضی هستید، می توانید آنها را به واقعیت تبدیل کنید، اگر نه، پس از رفرش کردن صفحه، تمام تغییرات فورا ناپدید می شوند! بچه ها همینطوره اکنون با استفاده از یک مثال ملموس به شما نشان خواهم داد که چگونه همه چیز اتفاق می افتد. اما قبل از شروع، بیایید افزونه Firebug را دانلود و بر روی رایانه خود نصب کنیم. همچنین لازم است به چند نکته دیگر مربوط به مرورگرهای مختلف اشاره کنیم.
هر کاربر اینترنتی یکی از مرورگرهای مورد علاقه خود را ترجیح می دهد. مرورگر نرم افزاری برای درخواست و مشاهده صفحات وب است. امروزه رایج ترین آنها موزیلا فایرفاکس و گوگل کروم هستند.
من شخصاً از طرفداران قدیمی مرورگر موزیلا فایرفاکس هستم، اگرچه به نظر من Google Chrome بسیار سریعتر و کاربردی تر است. احتمالاً این یک عادت است.
بنابراین، در ابتدا افزونه Firebug به طور خاص برای مرورگر موزیلا فایرفاکس توسعه داده شد، اما زمان ثابت نمی ماند و توسعه دهندگان "firebug" را به مرورگرهای دیگر گسترش داده اند. اما با این حال، اصل اصلی باقی ماند.
و اگر نصب این افزونه در موزیلا فایرفاکس بسیار آسان است، پیدا کردن صفحه ای با پسوند نصب برای Google Chrome کمی دشوار است. بنابراین تصمیم گرفتم هر دو گزینه را برای نصب این افزونه فوق العاده نشان دهم. پس بیایید تخطی کنیم.
من یک دستیار ضروری برای هر وبمستر را به شما معرفی می کنم. کار با سبک ها با چنین ابزاری چندین بار ساده شده است.
افزونه Firebug، مانند هر افزونه دیگری، در خدمت افزایش قابلیت های مرورگر است. در این مقاله به شما خواهم گفت که Firebug را برای مرورگرهای محبوب موزیلا فایرفاکس، گوگل کروم و اپرا از کجا دانلود کنید، چگونه آن را نصب کنید، و همچنین سعی خواهم کرد نحوه استفاده از Firebug را به تفصیل شرح دهم.
در ابتدا افزونه یا افزونه Firebug توسط گروهی از توسعه دهندگان برای موزیلا فایرفاکس ایجاد شد، بنابراین افزونه قدرتمندترین عملکرد را در این مرورگر دارد.
برای سایر مرورگرهای اینترنتی محبوب مانند گوگل کروم، اپرا و اینترنت اکسپلورر، یک نسخه ساده شده ایجاد شده است - Firebug Lite، که به طور قابل توجهی از نسخه اصلی پایین تر است، اما با این وجود کاملاً کاربردی است.
من می خواهم تأکید کنم که در این مقاله تمام ویژگی های Firebug را شرح نمی دهم، بلکه فقط به کار با HTML و CSS می پردازم، زیرا خوانندگان اصلی وبلاگ من وب مسترهای تازه کار هستند و یادگیری عملکردهایی از این قبیل برای آنها دشوار خواهد بود. به عنوان «اشکال‌زدای جاوا اسکریپت» یا «کاوش DOM».
با استفاده از افزونه، نیازی به جستجو در فایل‌های قالب نیست و سعی می‌کنید مشخص کنید کدام کلاس یا شناسه برای بخش خاصی از صفحه مشخص شده است.
به طور کلی، کار با ظاهر سایت بسیار آسان تر، سریع تر و لذت بخش تر می شود. برو!
از کجا دانلود کنیم و چگونه افزونه Firebug را نصب کنیم
برای دانلود افزونه Firebug برای موزیلا فایرفاکس، باید این مرورگر را باز کنید و این لینک را دنبال کنید. به صفحه ای می رسیم که باید روی دکمه کلیک کنیم - "افزودن به فایرفاکس":
سپس پنجره زیر باز می شود:
بر روی دکمه "Install Now" کلیک کنید و مراحل نصب کوتاه شروع می شود. اگر پس از راه اندازی مجدد مرورگر، نماد سوسک در گوشه سمت راست بالا ظاهر شد، Firebug با موفقیت نصب شده است.
نصب بر روی کروم و اپرا بسیار شبیه است و فکر می کنم شما متوجه خواهید شد. در اینجا لینک صفحات دانلود وجود دارد
Firebug را برای کروم بارگیری کنید
Firebug را برای Opera دانلود کنید
قبلاً در بالا نوشتم که در مرورگرهای گوگل کروم و اپرا ، افزونه به صورت کوتاه شده ارائه می شود و به منظور توصیف کاملتر عملکرد Firebug ، آن را در مرورگر موزیلا فایرفاکس راه اندازی می کنم.
کار با سبک ها نحوه استفاده از Firebug
بیایید با ساده ترین مثال شروع کنیم. فرض کنید باید فرم اشتراک فیدبرنر را اصلاح کنیم. افراد مبتدی اغلب در این مورد با مشکلات زیادی روبرو هستند.
اخیراً نامه‌ای از یکی از خوانندگان همیشگی‌ام دریافت کردم که در آن از من می‌خواست کمک کنم تا با فرم اشتراک «سرکش» کنار بیایم. خوب، اکنون یک فرصت عالی دارم تا نشان دهم Firebug چگونه کار می کند و در عین حال به یک شخص کمک کند.
فرم در حال حاضر در وبلاگ نویسنده نامه به این صورت است:
فقط این است که شخصی می خواست یک فرم اشتراک را مستقیماً در مقاله قرار دهد و در عرض کل صفحه کشیده شد. اکنون سعی می کنم با استفاده از افزونه Firebug "جادویی" وضعیت را اصلاح کنم.
در مرورگر، روی نماد سوسک کلیک می کنم و "منطقه کاری" برنامه افزودنی در پایین صفحه باز می شود:
بعد، در کنترل پنل، آیکون با تصویر یک فلش را انتخاب می کنم (در تصویر آن را با رنگ قرمز دایره کردم). با استفاده از این تابع، می توانید هر شی را در صفحه انتخاب کنید و کد آن در تب “HTML” نمایش داده می شود.
پس از کلیک بر روی نماد مسئول انتخاب ها، مکان نما را به لبه فرم اشتراک منتقل می کنم و مرزهای منطقه توسط یک قاب مشخص می شود:
خب، اینجا کد فرم اشتراک است که باید با آن کار کنم. برای پین کردن ناحیه انتخاب شده، باید روی کادری که با دکمه سمت چپ ماوس ظاهر می شود کلیک کنید و سپس کد فرم باید با رنگ آبی هایلایت شود:
اکنون فرم اشتراک را، به اصطلاح، در زمان واقعی ویرایش خواهم کرد.
بنابراین، در هر قالب یک فایل وجود دارد style.cssو به عنوان یک قاعده، همه سبک ها در این فایل نوشته می شوند، اما استثناهایی وجود دارد. در فرم اشتراک فیدبرنر، استایل ها در خود کد تعبیه شده اند و باید کلمه را پیدا کنم سبک(از انگلیسی - سبک)، پس از آن انتخابگرها و مقادیر آنها نوشته می شود، مسئول پارامترهای مختلف:
بیایید ببینیم چه نوع انتخابگرهایی برای این فرم مشخص شده است.
حاشیه: 2px جامد #00B344;
انتخابگر مرز(از انگلیسی - حاشیه) یک قاب را در اطراف فرم به ضخامت نشان می دهد 2 پیکسل(دو پیکسل).
معنی جامد(می تواند به صورت یک خط ثابت ترجمه شود) نوع قاب را مشخص می کند، i.e. اگر مقدار دیگری را تنظیم کنید، برای مثال: نقطه چین(خط نقطه چین)، قاب نقطه چین می شود.
و آخرین معنی #00B344رنگ قاب است.
padding: 3px;
انتخابگر لایه گذاری(از انگلیسی - padding) مسئول تورفتگی های داخلی است، یعنی. در این حالت انتخابگر فاصله خود فرم تا فریم را بر حسب پیکسل مشخص می کند.
Text-align: center;
انتخابگر متن تراز کردن(از انگلیسی - text alignment) متن را نسبت به صفحه تراز می کند. مرکز ارزش (از انگلیسی - center) به مرورگر می گوید که عنصر داده را در مرکز صفحه تراز کند.
البته من تمام انتخابگرهایی که در CSS استفاده می شوند را لیست نمی کنم. من این کار را، به اصطلاح، برای وضوح و سهولت درک انجام می دهم. در آینده قطعا یک نسخه رایگان منتشر خواهم کرد، برای مشترکین شما، یک دوره ویدیویی در زمینه مبانی HTML و CSS.
بنابراین، ما به سبک های داده شده پرداختیم، اکنون فرم اشتراک را به شکل مناسب می آورم.
برای این کار از انتخابگر دیگری استفاده خواهم کرد لبه(از انگلیسی - edge)، که مسئول تورفتگی های خارجی است، یعنی. فاصله از قاب تا لبه های عناصر مجاور.
مشاهده می شود که فرم کشیده شده است و با کمک تورفتگی های خارجی می توانید آن را کمی فشرده تر کنید.
من با دکمه سمت چپ ماوس روی قسمت مورد نظر کد دوبار کلیک می کنم و اکنون، درست در ناحیه کاری افزونه Firebug، می توانید تغییراتی در پارامترهای موجود ایجاد کنید یا موارد جدیدی را تنظیم کنید:
در انتهای کد فرم اشتراک یک انتخابگر اضافه می کنم لبهمن مقادیر زیر را به آن می دهم:
حاشیه: 0 180px 0 180px;
در مورد اعدادی که اینجا نوشتم کمی توضیح بدهم. اعداد فاصله حاشیه های بیرونی بر حسب پیکسل هستند که از بالا شروع می شود و سپس در جهت عقربه های ساعت. آن ها برای حاشیه بالا و پایین مقدار صفر و برای سمت چپ و راست فاصله روی 180 پیکسل تنظیم شده است.
اگر مقادیر یکسانی وجود داشته باشد، می توان آنها را "به هم چسباند" و در نتیجه کد را کمی کوتاه کرد:
حاشیه: 0 180 پیکسل;
این چیزی است که شما باید به آن پایان دهید:
و اینجا یک معجزه است! فرم اشتراک فوراً ظاهری متفاوت به خود گرفت.
تمامی تغییرات ظاهری سایت که با استفاده از افزونه فایرباگ انجام می شود برای کاربران نامرئی بوده و پس از به روز رسانی صفحات ناپدید می شوند.
اگر نشانگر خود را روی پس‌زمینه آبی کد قرار دهید، صفحه برجسته می‌شود: تورفتگی‌های بیرونی به رنگ زرد، تورفتگی‌های داخلی به رنگ بنفش.
یک چیز دیگر! فقط اکنون دکمه "اشتراک" به نوعی در قسمت ورودی ایمیل فشرده شده است، شما باید آن را کمی پایین بیاورید. من دکمه را با استفاده از مراحل توضیح داده شده در بالا انتخاب می کنم و کد آن در اینجا است:
اما اکنون، برای وضوح، به راه دیگری می روم و از برگه "ویرایش" استفاده می کنم، جایی که تورفتگی های زیر را برای دکمه تنظیم می کنم:
حاشیه: 7px 0 3px 0;
من مقادیر یکسانی را برای حاشیه راست و چپ دریافت کردم و باید صفرها را به هم بچسبانم:
حاشیه: 7px 0 3px;
بیایید به نتیجه نگاه کنیم:
همانطور که در بالا نوشتم، پس از بارگذاری مجدد صفحه، تمام تغییرات ناپدید می شوند و برای اینکه واقعا اعمال شوند، باید فایل قالب را ویرایش کنید.
Firebug نه تنها یافتن کدهای مسئول بخش خاصی از یک صفحه وب را آسان می کند، بلکه امکان پیش نمایش تغییرات آینده را نیز فراهم می کند.
اما اگر استایل ها در یک فایل جداگانه نوشته شده باشند چه باید کرد؟ بیایید به این وضعیت نیز نگاه کنیم.
حالا به عنوان مثال، یک بلوک با پودر سوخاری از وبلاگم انتخاب کردم. من آن را انتخاب می کنم و استایل هایی که در فایل نوشته شده اند در پنجره سمت راست ناحیه کاری نمایش داده می شوند style.css:
پس ما چه می بینیم؟ من تمام استایل هایی که در فایل style.css برای شناسه نوشته شده بود را دیدم پودرهای سوخاری.
فرض کنید می خواهم رنگ متن و اندازه فونت را تغییر دهم. برای انجام این کار، باید تغییراتی در مقادیر انتخابگرها ایجاد کنم: رنگ(از انگلیسی - رنگ) و اندازه فونت(از انگلیسی - اندازه فونت).
من روی مقدار انتخابگر دوبار کلیک می کنم و فیلدی برای ویرایش ظاهر می شود:
حالا سایه های فونت را دوست ندارم، باید آنها را حذف کنم. انتخابگر مسئول سایه ها است سایه متن(از انگلیسی - سایه متن). مکان نما را روی انتخابگر حرکت می دهم و یک نماد قرمز در سمت چپ آن ظاهر می شود:
اگر روی این نماد کلیک کنید، انتخابگر ناپدید می شود و تمام مقادیر آن لغو می شود. بیایید نگاه بیندازیم:
سایه ها انگار هرگز اتفاق نیفتاده اند! به دنبال هوس های ناگهانی ام، تصمیم گرفتم متن را کمی جسورتر کنم. بله، اما چنین انتخاب کننده ای در اینجا وجود ندارد. خوب، ما باید آن را اضافه کنیم.
انتخابگر مسئول "ضخامت" متن در CSS است وزن فونت(از انگلیسی - سبک قلم).
من یک دوتایی روی علامت ";" انجام می دهم. (می توانید روی هر خطی کلیک کنید)، که در انتهای هر خط یا روی نماد ")" قرار دارد و فیلدی برای وارد کردن یک انتخابگر جدید و مقادیر آن ظاهر می شود:
ابتدا در فیلدی که ظاهر می شود خود انتخابگر را وارد می کنم سپس کلید Tab را فشار داده و مقدار را وارد می کنم پررنگ(از انگلیسی - متمایز):
احتمالاً متوجه شده اید که Firebug شماره سریال خط را نشان می دهد که از آنجا استایل های شناسه یا کلاس انتخاب شده در فایل style.css نوشته می شود:
و اگر روی عدد کلیک کنید، فایل style.css در پنجره سمت راست ناحیه کاری باز می شود و استایل های شناسه ای که من با آن کار کردم با پس زمینه مایل به آبی هایلایت می شوند.
همچنین می‌توانید از تب CSS برای ویرایش استایل‌ها استفاده کنید، جایی که کل فایل style.css نمایش داده می‌شود:
اگر یک شی را انتخاب کرده و از تب "Market" واقع در پنجره سمت راست محل کار استفاده کنیم، تصویر زیر را مشاهده خواهیم کرد:
همانطور که حدس زده اید، این برگه به وضوح ابعاد انتخاب شده ترین عنصر (690x41 پیکسل)، و همچنین: padding داخلی را نشان می دهد. (لایه گذاری)، قاب (مرز)و حواشی (لبه).
من باید این را جمع بندی کنم، در غیر این صورت هرگز این مقاله را تمام نمی کنم. امیدوارم به وضوح نحوه استفاده از Firebug برای کار با استایل ها را توضیح داده باشم، اما اگر هنوز برخی از نکات برای شما مبهم است، سوالات خود را در نظرات بپرسید و من سعی خواهم کرد به وضوح وضعیت را تجزیه و تحلیل کنم.
P.S. همانطور که می بینید، اگر کمی انگلیسی بلد باشید، تغییر سبک کار چندان سختی نخواهد بود.
این تمام چیزی است که برای امروز دارم! مقاله را چگونه دوست دارید؟
خالصانه، ویتالی کیریلف
به شما اجازه می دهد که ببینید بدون ایجاد تغییرات در کد قالب وردپرس، ظاهر وبلاگ چگونه به نظر می رسد . طرح تنظیم شده فقط به صورت آنلاین و فقط در یک صفحه مرورگر باز در دسترس خواهد بود. اگر می‌خواهید فونت یا اندازه کاراکتر جدیدی را امتحان کنید، به لطف Firebug Chrome می‌توانید فوراً تغییرات را مشاهده کنید: smile:.
البته این امکان وجود دارد که بدون برنامه افزودنی برای Google Chrome انجام دهید و خودتان کد را با پیدا کردن مکان مناسب تغییر دهید. و با این حال به یاد دارم که سعی کردم یک وبلاگ وردپرس را دوباره طراحی کنم بدون اینکه چیزی در مورد کد بفهمم. مجبور بودم به طور مرتب این کار را انجام دهم، اما خوب است که تمام تغییرات اولیه عمداً انجام شده است.
به طور کلی، شما قطعا باید Firebug Lite را نصب کنید و نحوه استفاده از آن را نیز یاد بگیرید. این افزونه بسیار ضروری و مفید برای کروم بیش از یک بار به کارتان می آید؛). من شخصاً آن را به دلیل سادگی و اثربخشی آن دوست دارم.
چگونه فایرباگ را در کروم نصب کنیم؟
برای کاربران مرورگر فایرفاکس، افزونه Mozilla FireBug خود نیز وجود دارد. می توانید Firebug را برای فایرفاکس به صورت رایگان در وب سایت رسمی دانلود کنید. به هر حال، این افزونه عملکرد بسیار بیشتری نسبت به مرورگر کروم دارد.
چگونه از افزونه FireBug در کروم استفاده کنیم؟
یادگیری نحوه استفاده از FireBug دشوار نیست. به نظر من، حتی با حداقل دانش می توانید به سرعت ظاهری زیبا ایجاد کنید. FireBug برای Chrome یک چیز بسیار راحت و ضروری است، من به همه وب مسترهای مبتدی توصیه می کنم که در کار با آن مسلط باشند.
هنگام کار بر روی طراحی، بیش از یک بار به این افزونه ارزشمند باز خواهیم گشت و برای اینکه همیشه از آخرین اخبار مطلع شوید، مشترک به‌روزرسانی‌ها شوید.
بیایید ارتباط با روسای جمهور را یاد بگیریم! شما باید با رئیس جمهور روسیه خوب صحبت کنید و سریع تلفن را قطع کنید؛)، چیزی شبیه به این:
