Firebug pro Firefox! Jak používat rozšíření Firebug? Jak používat Firebug pro práci s CSS. Vlastnosti a principy používání Firebugu

Měl jsem ho nainstalovaný dlouho a neměl jsem nejmenší chuť se pouštět do specifik dev verzí, zabývat se jejich instalací/testováním a sbírat všechny chyby, na které byly bohaté.

Z tohoto důvodu až do vydání verze s plnou podporu rozšíření, které jsem použil Google Chrome pouze jako rychlejší alternativu Mozilla Firefox- pokud jsem potřeboval rychle přejít na web, místo poměrně těžkého Firefoxu jsem otevřel rychlý chrom, sledoval potřebné informace a zavřel to. Levné a veselé - ale věci nešly dál.

Nicméně s vydáním nová verze, rozhodl jsem se blíže podívat na funkčnost pluginů. Zpočátku jsem do adresáře rozšíření pro Google Chrome přišel pouze kvůli těm doplňkům, na které jsem byl zvyklý ve Firefoxu - správa karet, blokování reklam a flashů, organizace záložek atd. S ohledem na poměrně pomalý proces vývoje zásuvných modulů pro Mozilla Firefox jsem očekával, že neuvidím více než alfa verze zásuvných modulů, ale byl jsem příjemně překvapen – téměř celý seznam rozšíření, které jsem v Mozilla Firefox použil, byl uveden i pro Chrome. Navíc mě nejvíce překvapilo, že některé pluginy pro Chrome byly ve funkčnosti lepší než jejich protějšky ve Firefoxu.

Například Twitter klient Cromed Bird již umí s listy na rozdíl od svého protějšku Echofon pracovat a podpora pro identifikaci odkazů je v něm již zabudována (v SeoQuake pro Firefox podobná funkce není).

Inspirován skutečně bohatým arzenálem pluginů mě napadlo posunout Google Chrome z kategorie „všech“ programů do kategorie „neustále používané“. Na základě toho jsem se znovu obrátil na úložiště pluginů - abych našel ty, které jsem zvyklý používat v procesu práce.

Zde je tedy seznam pluginů, které byly nalezeny a použity.

Frebug Lite

Firebug Lite – myslím, že tento plugin zná každý vývojář a je jedním z prvních v jeho arzenálu. Firebug pro Google Chrome vám umožňuje prohlížet a upravovat HTML, CSS a JavaScript jakékoli stránky za běhu, aniž byste museli opustit prohlížeč.

Stačí otevřít panel Firebug, kliknout na „Inspect“ a přesunout kurzor na požadovaný prvek- ve Firebugu se zobrazí kód HTML i CSS tohoto prvku. Zvláštní „šik“ je navíc skutečnost, že kód lze upravovat přímo v samotném Firebugu, aniž by bylo nutné měnit zdrojové soubory.

Je třeba poznamenat, že jeho funkčnost je stále poněkud omezenější ve srovnání s verzí stejného pluginu pro Mozilla Firefox, ale na jedné straně se stále jedná pouze o beta verzi a na druhé straně je hlavní funkčnost již přítomna a funguje bez chyb.

IE Tab

IE karta - Internet Explorer mezi vývojáři absolutně neoblíbený, protože je nejčastěji zdrojem nekonečné problémy. Však daný bod uživatelé nesdílejí tento pohled a dokonce i dnes, se všemi různými prohlížeči, zaujímá IE vedoucí pozici, což nutí vývojáře povinné vzít v úvahu všechna jeho „kouzla“.

IE Tab spouští engine Internet Exploreru přímo v rozhraní Google Chrome, který umožňuje vývojáři rychle zobrazit a najít problémové oblasti v rozložení webu.

Někdy navíc nastává opačná situace, kdy se stránka zobrazí adekvátně v Internet Exploreru, ale problematická je v Mozilla Firefox nebo Google Chrome (to platí hlavně pro staré stránky). Pro takové stránky poskytuje IE Tab režim automatické stahování konkrétní web okamžitě v prohlížeči Internet Explorer, čímž se vynechá jeho načítání v prohlížeči Google Chrome.

Oční kapátko

Eye Dropper je rozšíření, které vám umožní zjistit barvu libovolného prvku na stránce. Kliknutím na prvek kapátkem získáte informaci o této barvě v RGB a HTML kódu.

V podstatě je tento plugin analog Nástroj kapátko Nástroj v Adobe Photoshop. Pro mě je plugin užitečný ve vývoji, protože mi umožňuje nehledat v souboru CSS barvu žádného prvku, stejně jako možnost otevřít na další kartě grafické rozvržení a pomocí Eye Dropper rychle vytvářet CSS, aniž byste museli pokaždé používat Adobe Photoshop.

Test rozlišení

Test rozlišení - hlavní funkčnost pluginu je naznačena již v jeho samotném názvu. Test rozlišení pro Google Chrome umožňuje emulovat změnu rozlišení monitoru změnou velikosti okna prohlížeče.

To znamená, že aniž byste změnili skutečné rozlišení vašeho monitoru, můžete vidět, jak se stránka bude zobrazovat v jiném rozlišení.

Seznam dostupných obsahuje téměř všechna potenciálně možná oprávnění, a pokud je vyžadováno nějaké nestandardní, lze je zadat do pole „Vlastní“.

Můžete také zaškrtnout všechna požadovaná rozlišení a emulace se otevřou v nových oknech.

MeasureIt!

MeasureIt! — z funkčního hlediska je tento plugin velmi jednoduchý a nemá ani nastavení. Do prohlížeče Google Chrome přidává pravítko, které vám umožňuje měřit v pixelech jakýkoli prvek nebo blok na webu.

Stejný plugin používám i pro Mozilla Firefox a pamatuji si, jak jsem byl šťastný, když jsem ho našel. Velmi často nastávají situace, kdy je nutné změřit velikost bloku skládajícího se z několika prvků - ale dělat to bez takového „pravítka“ je téměř nemožné.

Kyvadlo

Pendule – tento plugin připomíná Web Developer pro Mozilla Firefox, ale prozatím s mnohem menší funkčností. V momentálně Plugin umí pracovat s CSS, formuláři, obrázky a validátory. Navíc má vestavěné funkce MeasureIt a Eye Dropper.

Speed ​​​​Tracer

Speed ​​​​Tracer - Tento plugin vám umožní analyzovat, zjišťovat a opravovat problémy s výkonem na vašem webu. Rozšíření se zobrazí v ve vizuální podobě— co a kolik času stráví prohlížeč, zejména: analýza a spouštění Javascriptu, spouštění CSS, načítání síťové zdroje, práce s prvky DOM, vykreslování rozvržení webu atd.

Voliéra Screen Capture

Aviary Screen Capture – dává vám možnost pomocí nástrojů webu Aviary.com vytvořit snímky obrazovky libovolných stránek. Kromě toho vám rozšíření umožňuje:

• uložte přijatý snímek obrazovky na svůj počítač nebo web Aviary.com;
• použití jednoduché funkceúpravy obrázků.
• vybrat oblasti, otočit a oříznout obrázek;
• rychlé spuštění 6 doplňkové nástroje z balíčku Aviary: Editor obrázků, editor značek, vektorový editor, editor palety barev, editor efektů a editor zvuku.

Chrome Sniffer

Chrome Sniffer – umožňuje vám zjistit, které frameworky, CMS a knihovny JavaScriptu jsou na webu používány. Použití je velmi jednoduché – při načítání stránek, v adresní řádek zobrazí se ikona jedné nebo druhé aplikace.

V současné době dokáže rozšíření detekovat až 50 oblíbených CMS a JavaScriptové knihovny a v budoucích aktualizacích vývojáři slibují rozšíření tohoto seznamu.

Generátor Lorem Ipsum

Lorem Ipsum Generator - rozšíření je navrženo pro generování náhodných textů na základě Lorem Ipsum jedním kliknutím. Z nastavení jsou pouze 2 možnosti - „slova na řádek“ a „počet řádků“. Ale, jak sám vývojář říká: "K zabití krysy nepotřebujete bazuku, že?"

SeoQuake

SeoQuake - velmi pohodlný plugin, ukazující ukazatele SEO webu:

• Google PageRank
• Index Google
• Odkazy na Yahoo
• odkazová doména Yahoo
• Bing index
• Alexa Rank
• Věk webarchivu
• Lahodný index
• Whois odkaz
• zdrojový kód stránky
• Hodnost SEMRush
• zvýraznění odkazů Nofollow.

Verze SeoQuake pro Google Chrome má oproti verzi pro Mozilla Firefox aktuálně horší funkcionalitu, ale autoři žádají, abyste vzali v úvahu, že se stále jedná pouze o beta verzi.

Chrome SEO

Chrome SEO je rozšíření s vážnější funkčností než předchozí. Pokud lze SeoQuake považovat za SEO plugin, pak Chrome SEO je vhodnější označení SEO/SMO. Umožňuje:

• Nástroj pro výzkum klíčových slov (alfa verze);
• Zvýraznění odkazů NoFollow;
• Počet indexovaných stránek;
• Aktuální návštěvnost a hodnocení;
• Demonstrace grafů;
• Definice souborů Robots.txt a Sitemap.xml;
• Indikátory sociálních záložek;
• Verze stránky uložená v mezipaměti;
• Informace o doméně: DNS, IP, Whois, Umístění serveru

Yandex TIC & PR Viewer

Yandex TIC & PR Viewer - zobrazuje PR a TIC webu a také počet stránek indexovaných Googlem a Yandexem a Alexa Rank.

iPage Rank

iPage Rank - podle vývojáře, na rozdíl od všech ostatních pluginů pro jednoduché PR a TIC kontroly, iPage Rank vám řekne - kolik PR a TIC bude převedeno na váš web používáním Dofollow odkazy na stránce. Tento přístup je dostatečně pohodlný na to, aby se zjistilo, zda má smysl přijímat zpětný odkaz z tohoto webu.

Kromě toho ukazuje, kolik odkazů, následných odkazů, externích následných odkazů a interních následných odkazů je na stránce. Plugin také používá náhodný server Google k získání hodnot PR, aby se zabránilo blokování ze strany společnosti Google.

Pasterbin

Pasterbin - plugin umožňuje vložit a zvýrazňovat kód (C, Python, Ruby, HTML, CSS
...) ve službách pastebin. Velmi vhodné pro vkládání kódu na fóra, IRC nebo sociální sítě(např. Twitter). Provozováno na paste.pocoo.org.

— plugin-harvester, který vám umožní přijímat různé informace o vašem webu:

Jaká zajímavá rozšíření pro Google Chrome používáte?

Firebug je debugger webových aplikací, který se používá jako samostatné rozšíření pro prohlížeč Mozilla Firefox, což je konzole, debugger a inspektor DOM pro JavaScript, DHTML, CSS, XMLHttpRequest.

Je nepravděpodobné, že tento článek bude zajímat zkušené webové vývojáře, protože mezi nimi je stěží člověk, který neví, co je Firebug a jak jej používat.

Ale webmasteři se nerodí, jsou tvořeni. A každý guru tvorby webových stránek byl kdysi také začátečník, který se pilně nořil do děsivě složitých technických složitostí procesu tvorby webových stránek.

Právě pro takové lidi, kteří teprve začínají chápat základy tvorby webových stránek, byl napsán tento článek, kde se pokusíme mluvit o jednom skvělém nástroji a nepostradatelném pomocníkovi v takových není snadný úkol jako vytváření internetových stránek.

Budete moci upravovat, ladit a prozkoumávat CSS, HTML a Javascript živě na jakékoli webové stránce.

Firebug

Mluvíme o pluginu Firebug, nebo jak se také v ruštině nazývá „Firebug“, „Firebug“, což v překladu z angličtiny znamená „ohnivý brouk“.

Zásuvný modul Firebug je zabudován do prohlížeče softwarový produkt, který je určen pro prohlížení a úpravu struktury webových stránek (html kód, CSS styly, skripty atd.). Tento nástroj není vůbec zajímavý běžní uživatelé World Wide Web, ale pro ty, kteří zkouší tvorbu webových stránek, je to naprosto nenahraditelná věc.

Všeobecně se uznává, že nejpohodlnější a ve výsledku i nejoblíbenější Firebug je prohlížeč Mozilla Firefox. Obecně, přísně vzato, samotný název Firebug je značkou od Mozilly. Náhodou se ale stalo, že podobným produktům jiných výrobců z celého světa se také začalo říkat firebugs.

Které prohlížeče podporují Firebug

Prohlížeč Google Chrome má kromě Firefoxu také Firebug.

Firebugy těchto dvou prohlížečů jsou v současnosti mezi vývojáři webových stránek i samotnými prohlížeči nejoblíbenější.

K dispozici je také Firebug Prohlížeč Opera, ale používá to mnohem méně lidí.

Použití Plugin Firebug vypadá složitě jen na první pohled. Jakmile tomuto nástroji víceméně porozumíte, bude vyvstávat stále méně a méně otázek.

Firebug volejte standardně ve všech prohlížečích - stisknutím tlačítka F12, popř klikněte pravým tlačítkem myši odkud kontextové menu V závislosti na vašem prohlížeči musíte vybrat „kontrola prvku“ nebo „kontrola prvku“.

Poté se zobrazí na monitoru pracovní okno firebug, ve kterém můžeme vidět celý html kód otevřené stránky a také její další prvky včetně css stylů.

A teď, ve skutečnosti, pojďme mluvit o tom, proč je to všechno potřeba.

A to vše je potřeba k tomu, aby mohl webmaster přímo z prohlížeče upravovat svůj web v testovacím režimu a v reálném čase sledovat všechny změny, ke kterým na stránce dojde.

Řekněme, že jste chtěli změnit design některého prvku na jedné ze stránek vašeho webu. Pomocí Firebug to lze provést přímo z prohlížeče v " zkušební režim“, aniž by to ovlivnilo skutečné soubory vašeho webu na serveru. Jednoduše řečeno, Firebug je bezpečné testovací místo, kde můžete experimentovat s kódem svého webu, aniž byste se museli bát, že něco rozbijete.

Jak používat

Zde je tedy naše webová stránka. Naším úkolem je změnit barvu oblasti tohoto nadpisu z modré na jinou. Tento úkol lze samozřejmě provést změnou kódu přímo v souboru stylů na serveru. Ale po změně chceme vidět výsledek, a pokud nám nebude vyhovovat, budeme muset jít do souboru znovu a upravit kód. A tak několikrát, dokud nedosáhneme požadovaný výsledek. Souhlaste, že je to nepohodlné. S Firebugem je úkol značně zjednodušen.

V zásadě vám tento nástroj umožňuje experimentovat s mnoha dalšími parametry webu nebo vám dává možnost vidět, jak je nápad, který se vám líbí, implementován na jiném zdroji – ostatně Firebug vám umožňuje nahlížet do kódu nejen vašich vlastních webů, ale i jakýchkoli jiných.

Pochopit spletitost Firebugu není tak těžké, jak se na první pohled zdá. A věřte, že to stojí za to. Od prvního objevení Firebugu uplyne jen pár týdnů a bude pro vás těžké si představit, jak jste se bez tohoto nástroje mohli obejít dříve.

Firebug 1.4 vyžaduje Firefox 3.0 nebo vyšší.

Seznámím vás s nepostradatelným pomocníkem pro každého webmastera. Práce se styly s takovým nástrojem se několikrát zjednoduší.

Rozšíření Firebug, jako každé rozšíření, slouží ke zvýšení možností prohlížeče. V tomto článku vám řeknu: kde stáhnout Firebug populární prohlížeče Mozilla Firefox, Google Chrome a Opera, jak jej nainstalovat, a pokusím se také podrobně popsat, jak používat Firebug.

Původně byl plugin nebo rozšíření Firebug vytvořeno skupinou vývojářů pro Mozilla Firefox, takže rozšíření má v tomto prohlížeči nejvýkonnější funkce.

Pro zbytek populární internet prohlížečů jako Google Chrome, Opera a Internet Explorer byla vyvinuta zjednodušená verze - Firebug Lite, která je výrazně horší než původní, ale přesto je plně funkční.

Chci zdůraznit, že v tomto článku nebudu popisovat vše Funkce Firebug, ale dotknu se pouze práce s HTML a CSS, protože hlavními čtenáři mého blogu jsou začínající webmasteři a bude pro ně obtížné naučit se takové funkce, jako je „debugger JavaScriptu“ nebo „explorace DOM“.

Pomocí doplňku není nutné procházet soubory šablon a snažit se určit, pro kterou třídu nebo id je zadáno určitou oblast stránky.

Obecně se práce se vzhledem stránek stává mnohem jednodušší, rychlejší a příjemnější. Jdeme na to!

Kde stáhnout a jak nainstalovat rozšíření Firebug

Chcete-li stáhnout rozšíření Firebug pro Mozilla Firefox, musíte otevřít tento prohlížeč a následujte tento odkaz. Dostaneme se na stránku, kde musíme kliknout na tlačítko - „Přidat do Firefoxu“:

Poté se otevře následující okno:

Klikněte na tlačítko „Instalovat nyní“ a spustí se krátký proces instalace. Pokud se po restartu prohlížeče objeví v pravém horním rohu ikona brouka, Firebug byl úspěšně nainstalován.

Instalace na Chrome a Opeře je velmi podobná a myslím, že na to přijdete. Zde jsou odkazy na stránky ke stažení

Stáhněte si Firebug pro Chrome

Stáhněte si Firebug pro Operu

Už jsem to psal výše Prohlížeče Google Chrome a Opera, rozšíření je prezentováno ve zkrácené podobě a pro úplnější popis funkčnosti Firebugu jej spustím v Prohlížeč Mozilla Firefox.

Práce se styly. Jak používat Firebug

Začněme úplně od začátku jednoduchý příklad. Řekněme, že potřebujeme opravit formulář předplatného feedburneru. Začátečníci s tím mají často velké potíže.

Nedávno jsem dostal dopis od jednoho z mých pravidelných čtenářů, ve kterém mě žádal, abych mu pomohl vyrovnat se s „neposlušným“ předplatitelským formulářem. No, teď mám skvělou příležitost to předvést Firebug práce a zároveň člověku pomoci.

Jak aktuálně vypadá formulář na blogu autora dopisu:

Prostě člověk chtěl umístit formulář předplatného přímo do článku a roztáhl se na šířku celé stránky. Nyní se pokusím situaci napravit pomocí „magického“ doplňku Firebug.

V prohlížeči kliknu na ikonu brouka a ve spodní části stránky se otevře „pracovní oblast“ rozšíření:

Dále na ovládacím panelu vyberu ikonu s obrázkem šipky (na snímku jsem ji zakroužkoval červeně). Pomocí této funkce můžete vybrat libovolný objekt na stránce a jeho kód se zobrazí v záložce „HTML“.

Po kliknutí na ikonu odpovědnou za výběry přesunu kurzor na okraj formuláře předplatného a hranice zóny jsou ohraničeny rámečkem:

Tady je kód formuláře předplatného, ​​se kterým musím pracovat. Chcete-li připnout vybranou oblast, musíte kliknout na rámeček, který se zobrazí levým tlačítkem myši, a poté by měl být kód formuláře zvýrazněn modře:

Nyní budu upravovat formulář předplatného takříkajíc v reálném čase.

Takže v každé šabloně je soubor styl.css a zpravidla jsou v tomto souboru zapsány všechny styly, ale existují výjimky. Ve formuláři předplatného feedburneru jsou styly vloženy do samotného kódu a potřebuji najít slovo styl(z angličtiny - styl), po kterém jsou napsány selektory a jejich hodnoty, zodpovědné za různé parametry:

Podívejme se, jaké selektory jsou pro tento formulář určeny.

Ohraničení: 2px plné #00B344;

Volič pohraniční(z angličtiny - border) zobrazí rámeček kolem formuláře o tloušťce 2px(dva pixely).

Význam solidní(lze přeložit jako plná čára) specifikuje typ rámu, tzn. pokud nastavíte jinou hodnotu, například: čárkovaná(tečkovaná čára), rámeček se změní na tečkovaný.

A poslední hodnota #00B344 je barva rámu.

Výplň: 3px;

Volič vycpávka(z angl. - stuffing) zodpovídá za vycpávka, tj. PROTI v tomto případě Selektor určuje vzdálenost v pixelech od samotného formuláře k rámu.

Zarovnání textu: na střed;

Volič zarovnání textu(z angličtiny - zarovnání textu) zarovná text vzhledem ke stránce. Střed hodnoty (z angličtiny - center) říká prohlížeči, aby zarovnal datový prvek na střed stránky.

Samozřejmě nebudu vypisovat všechny selektory, které se v CSS používají. Dělám to, abych tak řekl, pro jasnost a snadnost vnímání. V budoucnu určitě vydám jeden zdarma, pro vaše předplatitele, video kurz na základy HTML a CSS.

Takže s dané styly Přišli jsme na to, teď dám formulář předplatného do správné podoby.

K tomu použiji jiný selektor okraj(z angl. - edge), který zodpovídá za okraje, tj. vzdálenosti od rámu k okrajům sousedních prvků.

Je vidět, že forma je natažená a pomocí vnějších prohlubní ji můžete udělat trochu kompaktnější.

Dvakrát kliknu se zapnutým levým tlačítkem myši požadovanou oblast kódu a nyní, přímo v pracovní oblasti rozšíření Firebug, můžete provádět změny již stávající parametry nebo nastavit nové:

Na úplný konec kódu formuláře předplatného přidávám selektor okraj Dám tomu následující hodnoty:

Okraj: 0 180px 0 180px;

Dovolte mi trochu vysvětlit čísla, která jsem zde napsal. Čísla jsou vzdálenosti vnějších okrajů v pixelech, počínaje shora a poté ve směru hodinových ručiček. Tito. pro horní a dolní okraj je hodnota nula a pro levý a pravý okraj je vzdálenost nastavena na 180 pixelů.

Pokud existuje stejné hodnoty, pak je lze „slepit“ dohromady, čímž se kód trochu zkrátí:

Okraj: 0 180px;

U toho byste měli skončit:

A tady je to zázrak! Formulář předplatného okamžitě získal jiný vzhled.

Všechny změny vzhledu webu provedené pomocí rozšíření Firebug budou pro uživatele neviditelné a po aktualizaci stránky zmizí.

Pokud přejedete myší modré pozadí kód, pak se stránka zvýrazní: vnější okraje - žluť, vnitřní - fialové.

Další věc! Jen teď je tlačítko „Přihlásit se“ nějak moc přitisknuté na pole pro zadávání e-mailu, je potřeba ho trochu snížit. Vyberu tlačítko pomocí výše popsaných kroků a zde je jeho kód:

Nyní ale pro názornost půjdu jinou cestou a použiji záložku „Upravit“, kde nastavím následující odsazení tlačítka:

Okraj: 7px 0 3px 0;

Mám stejné hodnoty pro pravý a levý okraj a potřebuji „slepit“ nuly dohromady:

Okraj: 7px 0 3px;

Podívejme se na výsledek:

Jak jsem psal výše, po opětovném načtení stránky všechny změny zmizí a aby se skutečně projevily, budete muset upravit soubor šablony.

Firebug nejen usnadňuje nalezení kódů odpovědných za konkrétní část webové stránky, ale také poskytuje možnost náhledu budoucích změn.

Ale co dělat, když jsou styly napsané samostatný soubor? Podívejme se i na tuto situaci.

Nyní k příkladu, který jsem zvolil blok strouhanky z mého blogu. Vyberu to a v pravém okně pracovní oblast zobrazí se styly zapsané v souboru styl.css:

Co tedy vidíme? Viděl jsem všechny styly zapsané v souboru style.css pro identifikátor strouhanka.

Řekněme, že chci změnit barvu textu a velikost písma. K tomu musím provést změny hodnot pro selektory: barva(z angličtiny - barva) a velikost písma(z angličtiny - velikost písma).

Dvakrát kliknu na hodnotu selektoru a objeví se pole pro úpravy:

Teď se mi nelíbí stíny písma, musím je odstranit. Za stíny je zodpovědný volič stín textu(z angličtiny - textový stín). Přesunu kurzor nad volič a nalevo od něj se objeví červená ikona:

Pokud kliknete na tuto ikonu, volič zmizí a všechny jeho hodnoty budou zrušeny. Podívejme se:

Stíny jsou, jako by se nikdy nestaly! Po svých náhlých rozmarech jsem se rozhodl udělat text trochu odvážnější. Jo, ale tady žádný takový selektor není. No, budeme to muset přidat.

Selektor je zodpovědný za „tučnost“ textu v CSS tloušťka písma(z angličtiny - styl písma).

Dělám dvojku na symbolu „;“ (můžete kliknout na libovolný řádek), který se nachází na konci každého řádku nebo na symbolu „“)“ a objeví se pole pro zadání nového selektoru a jeho hodnot:

Nejprve do pole, které se objeví, zadám samotný volič, poté stisknu klávesu Tab a zadám hodnotu tučně(z angličtiny - odlišné):

Pravděpodobně jste si všimli, že se zobrazuje Firebug sériové číslořádek, od kterého se zapisují styly pro vybraný identifikátor nebo třídu v souboru style.css:

A pokud kliknete na číslo, otevře se soubor style.css v pravém okně pracovní oblasti a styly pro identifikátor, se kterými jsem pracoval, se zvýrazní namodralým pozadím.

Pro úpravu stylů můžete také použít záložku CSS, kde se zobrazí celý soubor style.css:

Pokud vybereme objekt a použijeme záložku „Market“ umístěnou v pravém okně pracovní oblasti, uvidíme následující obrázek:

Jak jste možná uhodli, tato karta jasně ukazuje rozměry nejvíce vybraného prvku (690 x 41 pixelů) a také: vnitřní výplň (vycpávka), rám (pohraniční) a okraje (okraj).

Musím to zabalit, jinak tento článek nikdy nedočtu. Doufám, že jsem jasně vysvětlil, jak používat Firebug pro práci se styly, ale pokud vám některé body stále nejsou jasné, zeptejte se v komentářích a pokusím se situaci jasně analyzovat.

P.S. Jak vidíte, pokud trochu víte anglický jazyk, pak změna stylů nebude tak náročný úkol.

To je vše, co pro dnešek mám! Jak se vám článek líbí?

Upřímně, Vitalij Kirillov

Umožňuje vám to vidět jak to bude vypadat vzhled blog bez provádění změn v kódu WordPress témata . Opravený design bude dostupný online pouze vám a pouze na otevřít stránku prohlížeč. Pokud chcete zkusit nové písmo nebo velikosti postav, pak díky Firebug Chrome můžete okamžitě vidět změny: úsměv:.

Samozřejmě je možné se obejít bez rozšíření pro Google Chrome a upravit kód sami vyhledáním správné místo. A přesto si pamatuji, jak jsem se snažil změnit design, když jsem absolutně ničemu v kódu nerozuměl WordPress blog. Musel jsem pravidelně, ale je dobře, že všechno předběžné změny udělal to schválně.

Obecně platí, že si rozhodně musíte nainstalovat Firebug Lite a naučit se jej také používat. To je velmi potřebné a užitečné rozšíření pro Chrome se vám bude hodit více než jednou;). Osobně ho miluji pro jeho jednoduchost a účinnost.

Jak nainstalovat Firebug na Chrome?

Pro uživatele Prohlížeč Firefox má také svůj vlastní doplněk Mozilla FireBug. Firebug pro Firefox si můžete zdarma stáhnout na oficiálních stránkách. Mimochodem, toto rozšíření má mnohem víc funkčnost než v prohlížeči Chrome.

Jak používat rozšíření FireBug v Chrome?

Naučit se používat FireBug není těžké. Podle mého názoru i s minimálními znalostmi můžete rychle vytvořit krásný vzhled. FireBug pro Chrome je velmi pohodlná a potřebná věc, doporučuji všem začínajícím webmasterům, aby si práci s ním osvojili.

Při práci na designu se k tomuto cennému rozšíření vrátíme více než jednou a abychom byli vždy aktuální nejnovější zprávy, přihlaste se k odběru aktualizací.

Naučme se komunikovat s prezidenty! Musíte si dobře promluvit s prezidentem Ruska a rychle zavěsit;), něco takového: