Firebug pro Firefox! Jak používat rozšíření Firebug? Jak používat rozšíření FireBug v Chrome? Instalace firebug chrome

Ahoj všichni!

Dnes vám o jednom velmi povím užitečné rozšíření Pro Prohlížeče Firebug! Firebug plugin nebo přeložený z v angličtině„Fire Beetle“ je skutečný evoluční průlom ve světě internetu a zaslouží si zvláštní pozornost!

Snad pro běžné uživatele Celosvětová Síť plugin nebude poskytovat žádné výhody. Ale pokud jste webmaster a máte svůj vlastní vlastní zdroj, Firebug si zamilujete! A pokud jste také začínající designér layoutů, pak to pro vás bude snadné nepostradatelným pomocníkem. Takže, co je na té ohnivé brouce tak skvělého?

Plugin Firebug vám umožňuje snadno najít a upravit jakoukoli část kódu HTML nebo CSS, i když máte potíže s orientací v těchto dvou jazycích. Například musíte najít kód odpovědný za výstup a zobrazení data a času vašich příspěvků nebo se podívat na sekci kódu, která zobrazuje hlavní nabídku vašeho zdroje.

Nebo možná nejste spokojeni s umístěním bloků v postranním panelu a chcete je umístit jinak, změnit jejich velikost a barvu. Možná se v budoucnu změníte barevné schéma design vašeho zdroje a budete chtít změnit barvu odkazů, aby tomu odpovídala.

A jsou tu momenty ještě zajímavější. Na jednom ze zdrojů na síti se vám líbil jeden z prvků, které autor implementoval na své stránky, a opravdu jste chtěli udělat něco podobného na svém blogu. Ale jak můžete vidět, jaký kód používá k implementaci tohoto prvku? Odpověď je jednoduchá – pomůže vám plugin Firebug! Ano, ano, slyšeli jste dobře, pomocí rozšíření Firebug můžete prohlížet HTML kódy nejen stránek vašeho zdroje, ale i jakýchkoli jiných.

S tím vším a ještě více vám pomůže vypořádat se plugin Firebug. A to jsem uvedl pouze hlavní pracovní problémy, se kterými se weboví mistři často musí potýkat. Ve skutečnosti má plugin spoustu dalších funkcí, ale v tomto článku o nich nebudu mluvit. Možná někdy později, ale ne dnes.

Vše, co jsem uvedl, můžete samozřejmě dělat i bez pluginu. Pokud například potřebujete najít část kódu zodpovědnou za zobrazení času a data, můžete kliknout pravým tlačítkem myši na příslušnou stránku prohlížeče a z rozevíracího seznamu vybrat „Zdrojový kód stránky“ nebo použít klávesová zkratka Ctrl+U.

V tomto případě však uvidíte HTML - kód pro celý obsah otevřené stránky a potřebujete pouze sekci zodpovědnou za zobrazení času a data. Co byste tedy měli dělat? Budete muset pečlivě prozkoumat celý kód, abyste našli to, co potřebujete. A pokud HTML vůbec nerozumíte, bude hledání zbytečné. Co nám v tomto případě nabízí brouk ohnivý?

Vše je velmi jednoduché, okamžitě vám poskytne hotovou část kódu, kterou hledáte. Chcete-li to provést, najeďte myší na prvek, který se vám líbí, klikněte pravým tlačítkem myši a ze stejného rozevíracího seznamu vyberte možnost „Zkontrolovat prvek pomocí Firebug“ (v různé prohlížeče název je trochu jiný):

Firebug také zobrazí sekci kódu, která vás zajímá, a zvýrazní ji modře:

Ale to není všechno. Můžete okamžitě vstoupit potřebné změny do kódu beze strachu, že se pokazíte! Faktem je, že plugin umožňuje upravovat HTML a CSS kódy, v reálném čase pozorovat všechny změny, ke kterým dochází. A největší plus je, že je uvidíte jen vy.

A pak, pokud jste spokojeni provedené změny, budete je moci proměnit ve skutečnost, ale pokud ne, po obnovení stránky všechny změny okamžitě zmizí! Tak to je chlapi. Teď jsem na konkrétní příklad Ukážu vám, jak se všechno děje. Ale než začneme, pojďme si stáhnout a nainstalovat plugin Firebug do vašeho počítače. Musíme také zmínit několik dalších bodů souvisejících s různými prohlížeči.

Každý uživatel internetu preferuje některý ze svých oblíbených prohlížečů. Prohlížeč je software požadovat a prohlížet webové stránky. V dnešní době jsou z nich nejčastější Mozilla Firefox A Google Chrome.

Osobně jsem dlouholetý fanoušek. Prohlížeč Mozilla Firefox, i když Google Chrome se mi zdá být docela rychlejší a funkčnější. Asi je to o zvyku.

Původně bylo rozšíření Firebug vyvinuto speciálně pro prohlížeč Mozilla Firefox, ale čas se nezastavil a vývojáři rozšířili „firebug“ na další prohlížeče. Ale přesto originál zůstal originálem.

A pokud na Mozille plugin pro Firefox Instalace je velmi snadná, ale najít stránku s instalačním rozšířením pro Google Chrome je trochu obtížné. Proto jsem se rozhodl ukázat obě možnosti instalace tohoto nádherného pluginu. Tak pojďme přestoupit.

Měl jsem to nainstalované docela dlouho, 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 plná podpora rozšíření, které jsem použil Google Chrome pouze jako rychlejší alternativa k 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, pozorovala nezbytné 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. nicméně 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á rozlišení, a pokud je požadováno nějaké nestandardní, lze jej 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 také pod 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 tento moment 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ě— na čem a kolik času prohlížeč stráví, 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 dalších nástrojů 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ší funkčnost, ale autoři vás žádají, abyste vzali v úvahu, že se 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 se pro označení SEO/SMO hodí spíše Chrome SEO. 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 užitečné pro vkládání kódu na fóra, IRC nebo v sociálních sítích(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?

Prohlížeč Chrome vám umožňuje používat různá rozšíření které zvyšují jeho schopnosti. Jedním z takových rozšíření je Firebug. pro Google Chrome. Proč je to potřeba? Tento doplněk usnadňuje vyhledávání a úpravy požadovaný kód tvoje webová stránka. Tito. Po spuštění této aplikace můžete v klidu používat myš, ukazovat na jakýkoli prvek webu (odkaz, text, obrázek - cokoli) a okamžitě vidět část programového kódu, na kterou jste ukázali myší.

Tito. toto rozšíření vám umožní vidět, jak to bude vypadat vzhled svůj blog při vstupu různé změny PROTI programový kód webové stránky.

Zároveň nedochází k žádné skutečné změně kódu – vše se děje v otevřeném okně prohlížeče.

Na obrázku je myš namířena na datum 11/02/2011. Tento doplněk zvýraznil toto místo modrým čtvercem a ve svém okně ukázal (zvýrazněný a zvýrazněný modře) na kód programu, který vytvořil příslušný prvek (v v tomto případě- datum).

Instalace firebug chrome

Otevírací Prohlížeč Chrome a v pravém horní roh Klikněte na ikonu nastavení prohlížeče.

Dále vyberte „ Další nástroje“ a poté „Rozšíření". Přejděte úplně dole na stránku a klikněte na odkaz „Další rozšíření". V okně, které se otevře, vyhledejte „Firebug Lite for Goole Chrome“ a klikněte na tlačítko „Instalovat“.

Pokud jste to najednou nenašli, stačí projít a stisknout zelené tlačítko.

Objeví se obrázek s otázkou: Mám nainstalovat Lite pro Goole Chrome? Klikněte na tlačítko „Instalovat“. V pravém horním rohu prohlížeče se objeví obrázek brouka.

Je černobílý a ještě není aktivován. Jakmile jej aktivujeme, zbarví se.

Všechno. Náš malý program je nainstalován a připraven k použití. Upozorňujeme, že „chyba“ je šedá (neaktivní). Chcete-li s tímto rozšířením pracovat, stačí na něj kliknout, „chyba“ se vybarví Světlá barva a „chyba“ je připravena jít!

Nebo jej vyvolejte stisknutím F12.

Mimochodem existuje i Firebug pro Firefox (jak jej nainstalovat a používat je popsáno v článku).

Sám jsem dlouholetým fanouškem Opery, ještě z dob, kdy se platilo. Na surfování na netu podle mě nenajdete.

Opera se ale pro práci na webu hodí mnohem méně než všichni ostatní slavný prohlížeč Firefox. Operu lze samozřejmě také upravit pro rozvržení webových stránek, ale ať už někdo říká cokoli, nemá takovou věc jako Firebug, a to je pro začínajícího návrháře rozvržení tak důležité. I když čas letí a od napsání tohoto článku vývojáři prohlížečů, očividně mě slyšeli, přidali ke všem svým výtvorům základní schopnosti hrdinou dnešního článku, ale originál stále zůstává tím nejlepším z nejlepších. .

Zásuvné moduly prohlížeče, které pomohou webmasterům

Firebug bylo původně rozšíření pouze pro a umožnilo výrazně zkrátit čas potřebný k vyhledání a opravě požadovaného fragmentu v Html kódu, a pokud jste začínající webmaster nebo souborová struktura CMS (content management system) motor je vám úplně neznámý, pak si nedovedu představit, jak se bez něj obejdete.

Ano, samozřejmě, můžete kód open source požadovanou stránku a hledat takto Správné místo, ale to je čas a rutina, které se náš hrdina snadno a přirozeně nechá vyhnout. Pohodlná a nenahraditelná věc a dříve k ní neexistovala obdoba.

Takže jsem musel bydlet ve dvou domech. V Opeře jsem surfoval po internetu a ve Firefoxu jsem pracoval na svých projektech a neustále využíval možnosti rozšíření, o kterém si dnes povíme.

Ale kromě doplňků pro rozvržení pro prohlížeče budete pravděpodobně při práci se svými projekty potřebovat také rozšíření SEO, která vám umožní rychle sledovat PR a TIC stránek otevřených v prohlížeči, zjistit, zda jsou zavřené nebo ne pro indexování pomocí vyhledávačů externí odkazy na těchto stránkách (to je zajímavé zejména při komentování blogů a vyhledávání tzv. Dofollow blogů) a mnoho dalšího (viz odkazy na ně hned na začátku článku).

Pokud se bavíme o prohlížečích, tak ten nový se mi moc líbil - je rychlý, i oproti Opeře pohodlný a krásný, ale zatím jsem nepřišel na to, jestli na to něco je, což popíšu níže.

Firebug není jen doplněk, který do vašeho Firefoxu přidává pokročilé funkce. Velmi správně se o tom píše na stránce vývojářů - to je evoluce vývoje webu.

Ano, to je přesně ono. Evoluce je, když přejdete z kopací tyče na rypadlo. Efekt je úžasný a hned ho pocítíte, když tento plugin začnete používat. No, možná to stačí, je čas mluvit o jeho schopnostech. Stáhněte si Firebug můžete ze stránky doplňků. Pro teď současná verze je 1.11.4.

Přirozeně musíte toto rozšíření nainstalovat ve Firefoxu, protože tam to bude mnohem jednodušší. Pokud jste klikli na tlačítko stahování tohoto rozšíření v jakémkoli jiném prohlížeči se otevře standardní dialog stažení, ve kterém si tuto distribuci uložíte na pevný disk.

Pak budete muset jít do Mazily, od horní menu vyberte „Soubor“ - „Otevřít soubor“ a najděte stažený soubor na pevném disku. V důsledku toho začne proces instalace znovu.

Po restartu prohlížeče uvidíte v pravém dolním rohu okna ikonu Firebug v podobě brouka – to znamená, že tento doplněk byl úspěšně nainstalován a čeká na vaše objednávky. Nejprve se podívám na jeho možnosti, které sám využívám při práci s webovými stránkami, a poté stručně pohovořím o tom, co dalšího s ním můžete obecně dělat.

Stává se, že potřebujete něco změnit, dokončit, opravit, jen abyste viděli, jak je to implementováno a funguje na vašem nebo cizím zdroji. Ano, ano, slyšeli jste dobře, na zdroji někoho jiného. Pokud se vám líbí to či ono řešení webmastera a chcete udělat totéž pro sebe, Firebug vám pomůže.

V zásadě jsem již řekl, že si můžete prohlédnout zdrojový kód stránky bez tohoto rozšíření (klikněte klikněte pravým tlačítkem myši umístěte kurzor myši na stránku v libovolném prohlížeči a vyberte si z kontextová nabídka něco jako „Zdroj stránky“ nebo „Zdrojový kód“), ale tohoto kódu bude hodně a nalezení správného místa bude chvíli trvat. Co nám v tomto případě nabízí brouk ohnivý?

Jak používat Firebug při vytváření webu

A vyzve vás, abyste klikli na místo zájmu na webové stránce, opět pravým tlačítkem, az kontextové nabídky vybrali - „Analyzovat prvek“ (v anglická verze plugin bude „Inspect“). A ejhle, v jeho okně uvidíte pouze tu část kódu stránky, která je zodpovědná za vytvoření přesně toho prvku, který vás zajímá. Komfortní?

Nepochybně. Jen kvůli tomu musíte milovat tento plugin. Ale umí toho mnohem víc. Kód prvku, který potřebujete, uvidíte v okně tohoto doplňku, které se otevře ve spodní části stránky, jak je znázorněno na obrázku výše. Část kódu, která je zodpovědná za prvek webové stránky, o který se zajímáte, bude zvýrazněna modře.

Věnujte také pozornost řádku, který jsem na obrázku podtrhl červenou čarou, začínající slovem „Edit“ v okně Firebug. Pokud kliknete na toto slovo, můžete provést změny ve výběru HTML kód, který se okamžitě objeví na stránce.

Změňte například url obrázku v okně pluginu na záměrně neexistující a obrázek z webové stránky zmizí, vše vrátíte zpět a obrázek se objeví. Upozorňujeme však, že tyto změny žádným způsobem neovlivní váš zdroj. pouze vy uvidíte všechny změny a pouze na této webové stránce, podřízené všemohoucímu ohnivému broukovi. Jakmile stránku obnovíte, všechny změny provedené pluginem zmizí.

S Firebugem můžete simulovat, co se kdy může stát změna HTML nebo CSS kód webové stránky. Můžete se tak pomocí jeho možností podívat (aniž byste ztráceli čas hledáním souboru vašeho CMS enginu zodpovědného za výstup této sekce) různé varianty a vyberte ten, který potřebujete, nebo změnu úplně odmítněte, pokud současná verze se ukáže, že to není tak špatné.

Pokud ale stále chápete, že je potřeba provést změny v Html kódu a povedou ke zlepšení vzhledu vaší webové stránky, pak nastává ta těžká chvíle, kterou vám bohužel nepomůže zjistit ani ohnivý brouk ven (on, bohužel, není všemocný).

Problém najít správný kus kódu v souborech motoru

Budete muset nezávisle najít soubor v enginu vašeho webu, fóra nebo blogu, který generuje tuto sekci Html kódu. Tento soubor bude mít nejspíš příponu .php, tzn. napsané v jazyce serveru PHP programování a v souladu s tím může tato oblast v něm vypadat úplně jinak, než v čem vidíte zdrojový kód webové stránky.

To je podle mého názoru hlavní úskalí úpravy vzhledu a obsahu webových stránek postavených na jakémkoli enginu (CMS). Pokud jste začínající webmaster nebo jste se s takovým enginem nikdy nesetkali, pak jen stěží dokážete okamžitě určit, ve kterém souboru se generuje fragment webové stránky, který vás zajímá.

Poté, po získání zkušeností, to pro vás nebude obtížné, ale nyní vám doporučuji jednat podle následujícího schématu. Mluvím o tématu, jak se rádi říká - jde o vtip, tady samozřejmě není žádné tajemství.

Nejprve budete muset zachytit něco v kódu, který vám otevřel ten druh Firebug. Najděte něco jedinečného nebo zřídka viděného, ​​co by pravděpodobně vypadalo stejně soubor PHP váš motor.

Při prohledávání obsahu souborů v Total Commanderu může nastat problém s ruskými slovy, respektive jejich kódováním. Pokud Total commander nenašel nic pro váš požadavek v ruštině, zaškrtněte políčko vedle „UTF-8“ v okně vyhledávání a vše bude nalezeno.

Vlastnosti a principy používání Firebugu

Pokračujme v diskuzi o schopnostech firebugu, kterou jsme zahájili v tomto článku. Už jsme uvnitř obecný obrys se dotkl jeho práce, konkrétně jak můžete tento plugin použít k určení fragmentu webové stránky odpovědné za konkrétní designový prvek.

Kromě výše popsané metody (klikněte pravým tlačítkem myši na místo zájmu na webové stránce a z kontextového menu vyberte „Analyzovat prvek“) lze toto rozšíření uvést do života a jednoduchým kliknutím na ikoně pavouka v pravém dolním rohu okna prohlížeče nebo pomocí klávesy F12. Dalším stisknutím této klávesy zavřete okno Firebug.

Pokud chcete, aby se plugin otevřel v samostatné okno, poté klikněte na pavouka a podržte Shift na klávesnici nebo použijte klávesovou zkratku Ctrl+F12. Sami si vyberete tu nejpohodlnější možnost, jak uvést toto mistrovské inženýrské dílo k životu. Vaše okno bude vypadat nějak takto:

Tlačítka ovládacího panelu budou umístěna nahoře a hlavní část okna bude rozdělena na levou a pravou polovinu. Na levé polovině můžete pozorovat HTML struktura kód stránky otevřené v prohlížeči a v pravé polovině - CSS styly, které se používají k určení jednoho nebo druhého typu tohoto webového dokumentu.

Jak používat Firebug k učení HTML

Firebug umožňuje implementovat dva velmi zajímavé příležitosti, který pomáhá pochopit strukturu kódu stránky otevřené v prohlížeči. Můžete pohybovat myší HTML tag v okně tohoto pluginu a na webové stránce budou zvýrazněny ty prvky, za jejichž vytvoření je tento tag zodpovědný (klikněte například na kontejnery Div a okamžitě uvidíte zvýraznění tohoto kontejneru nahoře v design webové stránky).

Nebo naopak můžete v tomto rozšíření aktivovat tak záludný režim, že najedete myší na samotnou webovou stránku a HTML kód odpovídající značkám (umístěný pod kurzorem myši) se zobrazí v reálném čase v okno Firebug. Prostě nenahraditelná věc při studiu struktury konkrétního webového zdroje, zvláště pro začátečníky.

K implementaci všeho, co jsem právě popsal, potřebujeme informace zobrazené v levé polovině okna pluginu, kde se zobrazují tagy dané webové stránky otevřené v prohlížeči. Zde můžete jasně vidět vnoření určitých značek, například kontejnerů DIV.

Chcete-li rozbalit obsah značky, můžete kliknout na znaménko plus vedle ní. Když najedete myší na konkrétní kontejner DIV na levé straně okna Firebug, uvidíte, které prvky webové stránky jsou zahrnuty v tomto kontejneru DIV.

Plugin vybarví obsah DIV kontejneru na webovou stránku modrým moaré vzorem, pomocí kterého můžete vidět, které designové prvky se v tomto DIV kontejneru nacházejí. Je pravda, že webová stránka, kterou otevřete, může být velmi velká, a pak budete muset posouvat, abyste našli fragment návrhu zvýrazněný modrým moaré.

Jak můžete vidět na výše uvedeném snímku obrazovky, kontejner

je zodpovědný za zobrazení bloku s názvem a popisem mého blogu WordPress.

Ale můžete jít opačnou cestou a získat přes Firebug informace o tom, která značka je zodpovědná za výstup toho kterého bloku na dané webové stránce. V tomto případě nepřejdeme myší na bloky DIV s kódem, ale přímo na prvky, které nás zajímají na webové stránce otevřené v prohlížeči. V tomto případě budou v okně pluginu v oblasti pro zobrazení HTML kódu modře zvýrazněny ty značky (například kontejnery DIV), které jsou zodpovědné za vytvoření tohoto bloku.

To vše se bude dynamicky zobrazovat v okně tohoto rozšíření v souladu s pohybem myši po webové stránce. Velmi vizuální a pohodlný způsob pomocí firebugu ke studiu funkcí vytváření vlastního nebo cizího webového projektu.

K implementaci této metody stačí aktivovat odpovídající režim kliknutím na tlačítko panelu zobrazené na obrázku:

Po kliknutí na toto tlačítko přesuňte kurzor myši potřebné oblasti webové stránky a na levé straně okna pluginu můžete vidět části Html kódu zodpovědné za generování těchto prvků návrhu (budou zvýrazněny modře). V tomto případě bude fragment stránky, nad kterým je umístěn kurzor myši, uzavřen v modrém rámečku:

Po nalezení požadovaného fragmentu na něj můžete kliknout levým tlačítkem a přejít do levého pole okna Firebug další práce označený tímto designovým prvkem. V okně pluginu můžete provádět jakékoli manipulace se značkami a výsledek okamžitě uvidíte na stránce otevřené v prohlížeči.

V tomto případě samozřejmě nebudou provedeny žádné změny ve skutečných souborech vyhledávače webu. Ale na druhou stranu můžete simulovat v reálném čase různé možnosti tvorba designu webových stránek. Pokud vám nová verze modelovaná pomocí Firebug vyhovuje, budete muset provést změny již v skutečné soubory engine, který můžete najít pomocí výše popsané metody za účasti Total commander.

Jak používat Firebug pro práci s CSS

Pravé okno tohoto rozšíření zobrazuje všechny vlastnosti CSS, které jsou zodpovědné za návrh fragmentu kódu vybraného v levém okně. Tyto vlastnosti CSS určují vzhled Blokovat HTML. Může to být jeho poloha vzhledem k ostatním blokům na dané stránce, velikost, typ a barva písma použitého v daném bloku k zobrazení barvy nebo odkazů a mnoho dalšího.

Pro názornou ukázku Možnosti CSS v návrhu libovolného prvku webové stránky můžete přesunout kurzor myši na jakékoli pravidlo stylu zobrazené na pravé straně okna. Vedle tohoto pravidla se objeví šedý kruh s procházející čárou. Kliknutím na něj toto zakážete Vlastnost CSS Na této webové stránce a vedle ní se zobrazí červený kruh.

Zároveň budete moci pozorovat otevřít stránku změny, ke kterým došlo v reálném čase. Že. Firebug vám pomůže přesně zjistit, které pravidlo je v souboru tabulky kaskádové styly za co je v designu odpovědné tohoto prvku design. Chcete-li zakázanou vlastnost CSS znovu povolit, budete muset znovu kliknout na červený přeškrtnutý kroužek vedle ní.

Vlastnosti umístěné na pravé straně lze upravovat stejným způsobem, jakým jsme upravovali tagy na levé straně okna tohoto rozšíření. Všechny změny provedené ve vlastnostech z pravé oblasti se okamžitě zobrazí na webové stránce otevřené v Mazil, ale žádným způsobem neovlivní skutečné vlastnosti CSS zapsané v souboru kaskádových stylů, jehož název můžete vidět výše blok:

Okno Firebug bude indikovat řádek v souboru kaskádových stylů, na kterém je tato vlastnost CSS zapsána. Pokud se vám tedy líbí simulované změny v designu webu, pak pro provedení stejných změn ve stylech vašeho webu stačí otevřít požadovaný soubor a najít řádek navržený v okně pluginu. Vše je mnohem jednodušší než v případě provádění změn v HTML kódu stránky.

Jak měřit rychlost načítání webu ve Firebugu

A nakonec bych chtěl mluvit o tom, jak měřit rychlost webu pomocí tohoto rozšíření (nezaměňovat).

Rychlost načítání zdrojů je velmi vysoká důležitý ukazatel, ovlivňující jeho úspěšnost a snadnost propagace vyhledávače. Pokud rychlost načítání vašeho projektu není v pořádku, může to vést k docela nepříjemným důsledkům, a to jak ze strany vyhledávačů, tak z loajality vašich návštěvníků.

A nejdůležitější je, že návštěvníci mohou odmítnout pracovat s vaším zdrojem, protože... Webové stránky se načítají velmi dlouho. kromě vyhledávače, zejména Google, vzít v úvahu rychlost načítání, když celkové hodnocení užitečnost konkrétního zdroje a může také ovlivnit pozici vašeho webového projektu ve výsledcích vyhledávání.

K identifikaci a odstranění úzkých míst v rychlosti načítání prvků vašeho zdroje můžete použít speciální služby, což umožňuje tuto záležitost měřit. O tom jsem mluvil v prvním článku o stanovení a zvýšení rychlosti načítání stránek (můžete si přečíst).

Stačí zadat adresu požadované webové stránky a po chvíli obdržíte kompletní rozpis, jak dlouho se který prvek načítá. Tímto způsobem je možné identifikovat prvky, které zřetelně zpomalují, a přijmout opatření k urychlení jejich načítání.

Ale totéž lze udělat, aniž byste se obrátili na služby třetích stran. U našeho milovaného Plugin Firebug existuje taková možnost. Jednoduše klikněte na tlačítko „Síť“ a obnovte otevřenou webovou stránku.

V důsledku toho vám bude poskytnuto úplné informace k načtení všech prvků webové stránky. V případě potřeby analyzujte a přijměte opatření k urychlení načítání. To je pro dnešek asi vše. V příštím článku chci pokračovat v tématu a také mluvit o dalším skvělém pluginu pro Prohlížeč Firefox, který nám pomůže při práci s designem webových stránek.

Tento plugin se nazývá a má jen obrovské množství všech druhů nástrojů, které umožňují zjednodušit práci s rozložením nebo úpravou šablony vašeho webového zdroje. No, pak se přesuneme k pohledu na SEO pluginy pro FireFox a Opera.

Můžete se také podívat na video k tématu, které jistě nebude zbytečné:

Hodně štěstí! Brzy se uvidíme na stránkách blogu

Na další videa se můžete podívat na

");">

Mohlo by vás to zajímat

Web Developer pro Firefox - instalace a možnosti pluginu pro návrháře rozvržení a webmastery
SEObar - pohodlný a informativní SEO plugin pro Operu Jak hledat obsah souborů v Total Commander
Rozšíření a motivy pro Google Chrome