9 vastust
Mul õnnestus Firebugi uuesti tööle panna, nii et ma tegin järgmist.
Kõik teavad, et Firebugi enam ei arendata ega toetata, kuna see ei tööta e10-ga, seega on siin minu lahendus:
Lae alla Firefoxi arendaja versioon nii et saate lubada XPI-l installida.
firefox-53.0a2.en-US.win64.installer.exe või firefox-53.0a2.en-US.win32.installer.exe
Pärast installimist käivitage Firefoxi arendajaväljaanne ja minge aadressile about:config(sisestage URL-i string)
Otsi xpinstall.signatures.required (seatud valeks)
Otsi browser.tabs.remote.autostart
(määra kõik valeks: browser.tabs.remote.autostart.1 ja browser.tabs.remote.autostart.2)
MÄRGE. Mitme protsessiga arhitektuur parandab brauseri stabiilsust, jõudlust ja turvalisust, eraldades ülesanded protsessideks ja keelates need.
Pärast seda peate brauseri taaskäivitama.
- Nüüd saate minna Firebugi hoidlasse ja installida soovitud versiooni
Valisin uusima firebug-2.0b8.xpi ja see töötab suurepäraselt.
P.S. Saate Firefoxi arendajaversiooni värskendused keelata.
Loodan, et see aitab.
Värskendus 2
Mul oli sama probleem Firefoxi värskendamisel. Olen Firebugist nii sõltuv, kuid läksin üle Firefoxi arendajaversioonile – https://www.mozilla.org/en-US/firefox/developer/
Sellel on ka Firebugi teema, mis meenutab Firebugi liidest ja selle tõhusust. Lihtsalt installige FDE ja aktiveerige firebugi teema, nagu on näidatud alloleval pildil:
Sellel lehel öeldakse, et [minu tähelepanu]:
Firebug 2 ei tööta mitme protsessoriga brauserites (nt e10s) ja teisendamine on liiga keeruline, mistõttu lakkab see töötamast, kui Firefoxis e10s aktiveeritakse. . Firebug 2 kasutamise ajal saate e10-d keelata, kuid see ei kesta igavesti.
Asjaolu, et Firebug tegelikult ei tööta mitme protsessiga Firefoxis, võetakse arvesse erinevad inimesed erineva kogemusega Firebugiga või ei tööta konkreetne versioon Firefox. Multitöötluse automaatne lubamine Firefox sõltub mitmest tegurist, sealhulgas sellest, millised muud lisandmoodulid on profiili installitud.
Firebugi kasutamine Firefoxi uutes versioonides
Niisiis, Firebugi kasutamiseks uuemates Firefoxi versioonid, peate keelama Firefoxi mitmetöötlusrežiimi sisenemise. Seda saab teha lehel about:preferences (juurdepääsetav ka menüüst Tööriistad➞Valikud). See suvand asub vahekaardi Üldine all kui "Luba mitme protsessoriga Firefox...". Kui multiprotsessor pole saadaval, siis seda valikut ei kuvata. Seda valikut saab muuta ka brauseri.tabs.remote.autostart eelistuse määramisega umbes:config . [Märkus: browser.tabs.remote.autostart.2 ja browser.tabs.remote.autostart.1 kuvatakse ka vaikeolekute näitamiseks, seega soovitan selle valiku muutmiseks kasutada lehekülge about:preferences.]
Saate kindlaks teha, kas teie Firefox töötab mitme protsessori režiim vaadates umbes: support . Jaotises Rakenduse põhitõed olev rida Multiprocessing Windows näitab, kas multitöötlus on lubatud või keelatud.
Seadistage testimiseks spetsiaalselt profiilid
Isiklikult on mul seadistatud erinevad profiilid iga selgesõnaliselt keelatud mitme protsessi ja selgesõnaliselt lubatud mitme protsessi jaoks (seadke brauser.tabs.remote.force-enable väärtuseks true), et saaksin testida mõlemas olukorras, kus mitme protsessi olek on lubatud/keelatud . ette teada.
Mind tabas sama ootamatu üllatus, kui ubuntu värskendas FFX-i ja äkki lakkasid sellised asjad nagu skriptipaneel töötamast. Kuna ma töötasin millegi kallal lühiajaline Ma ei kavatsenud seda luksust õppida firefoxi arendaja tööriistakomplekti ja tahtsin meeleheitlikult firebugiga tööle asuda. Parandus, mis lõpuks minu jaoks töötas, oli seada Firefoxi eelistused mitte värskendama. Seejärel laadige alla v49.0.2
Olen Firebugi kasutanud juba aasta ja see laiendus on mulle väga mugav. Paljud inimesed ei tea ikka veel, kuidas seda kasutada.
Nad sooviksid, et Firebugiga töötamiseks oleks käepärast õpetus koos näidetega. Seega otsustasin kirjutada see juhend. Üritasin oma parima, et rääkida Firebugiga töötamise keerukusest ja neid kuvada, tuues näiteid lähtekoodist ja töö ekraanipiltidest.
Miks Firebug?
Firebug on üks populaarsemaid laiendusi Mozilla Firefox. See on ka tööriist, mis aitab veebiarendaja tööd lihtsamaks teha. See sisaldab palju häid tööriistu, mis aitavad silumisel, HTML-i kontrollimisel, profiilide koostamisel jne, mis on programmeerijatele kasulikud.
Tööriistad
- Javascripti silumine
- Javascripti käsurida
- Javascripti jõudluse ja XmlHttpRequesti kontrollimine
- Logi sisse logimise kaudu
- Jälgimine
- HTML-i valideerimine ja HTML-i redigeerimine
- CSS-i redigeerimine
Kust Firebugi hankida?
- Külastage ametlikku veebisaiti getfirebug.com
- Seal, saidi paremas servas, näete nuppu. Installimise alustamiseks klõpsake sellel.
- Pärast pildil klõpsamist ilmub järgmine dialoogiboks. Klõpsake nuppu "Installi kohe".
![](https://i2.wp.com/great-world.ru/wp-content/uploads/ustanovka-firebag.png)
Firebugi menüü ja tõrkekonsool avanevad Firefoxis menüü Tööriistad all. Kui klõpsate meie veakonsoolil, avaneb aken süsteemivigade, hoiatuste ja teadete loendiga. Tegelikult on see veakonsool sama, mis Firebugi jaotis.
Firebugi menüü
Pärast menüüs "Tööriistad" "Firebug" klõpsamist avaneb järgmine alammenüü.
![](https://i2.wp.com/great-world.ru/wp-content/uploads/menu-firebag.jpg)
Lehe sisu kontrollimine
See on ainus menüü nimega "Inspect Element" - klõpsake lihtsalt parem nupp hiirega kõikjal lehel. See on väga kasulik menüü.
Firebugi konsool
Allolev pilt näitab Firebugi konsooli.
![](https://i2.wp.com/great-world.ru/wp-content/uploads/konsole.png)
See koosneb kuuest vahekaardilt: vahekaart Console, HTML, CSS, Script, DOM ja Net.
- Konsooli vahekaart: sisselogimise loomiseks, profiili seadistamiseks, käsurea käskude jälgimiseks ja täitmiseks.
- HTML-i vahekaart: HTML-i elementide kontrollimiseks HTML-i lisamine ja stiilide muudatused käivitamisel. Lisaks asuvad siin CSS, Layout ja DOM konsooli alamjaotised.
- CSS-i vahekaart: siin saate hõlpsalt kontrollida, kui palju css failid lisatud saidi lehele. Saate valida mis tahes css-faili ja teha selles muudatusi. (Ma ei kasuta seda jaotist palju, kuna sama asi on HTML-i jaotises).
- Skripti vahekaart: kasutatakse Javascripti koodi silumiseks. Siia on lisatud ka skripti täitmise vaatamise ja peatamise funktsioonid.
- DOM-i vahekaart: kasutatakse DOM-i vaatamiseks. (Ma ei kasuta seda funktsiooni tegelikult. Siiski kasutan seda HTML-i ja Scripti konsoolist).
- Vahekaart Võrk: kasutatakse võrgutegevuse jälgimiseks. See annab teile teada, miks teie lehe (või kogu saidi) laadimine brauseris liiga kaua aega võtab.
Kiirklahvid ja hiirenupud
![](https://i2.wp.com/great-world.ru/wp-content/uploads/klavishi.png)
F12. Kasutatakse Firebugi konsooli avamiseks/sulgemiseks.
Saate lugeda kõigi kiirklahvide kohta.
Siin on kaks videoõpetust FireBagi kasutamise kohta
Kas teil on probleeme?
Lugege KKK lehte. Kui probleem ikka ei lahene, kirjutage siia kommentaar. Püüan sellele võimalikult kiiresti vastata. Võite võtta ühendust ka Firebugi arendusmeeskonnaga.
Alumine joon
See on kõik! Ma arvan, et nüüd on teil aimu, mis firebug on, kuidas see välja näeb ja kuidas seda installida. Kui olete firebugiga juba tuttav, on see jaotis kasulik ka teie teadmiste kinnistamiseks. Ma käsitlen iga funktsiooni üksikasjalikumalt järgmistes jaotistes. Jätke artikli kohta kommentaare ja avaldage selles küsimuses oma ideid. Teie kommentaarid muudavad selle artikli ainult paremaks. Ja ma olen neile väga tänulik.
Head tervist kõigile minu blogi lugejatele! Olen juba pikka aega tahtnud puudutada laienduste kasutamise teemat veebihaldurite huvides ja nüüd lõpuks esitan ühe populaarseima laienduse funktsionaalsuse kirjelduse, nimelt Firebugi pistikprogramm
. Muide, kui te pole veel lõplikku valikut veebibrauseri kasuks teinud, võib-olla materjal kõige rohkem populaarsed brauserid() aitab teid selles.
Pean tunnistama, et eelistan veebihaldurite tööriista Google Chrome(), mis tundub mulle kiirem ja funktsionaalsem ning kasutan seda ka internetis surfates. Ehkki võib-olla pole harjumuse jõud saidiga töötamiseks brauseri valimisel vähetähtis.
See jõud on mõnikord vastuolus meile pakutavate ilmsete eelistega alternatiivsed võimalused, kuid Firebugi pistikprogrammi puhul oli kõik erinev, sain kohe aru selle tähtsusest veebihalduri jaoks kõige olulisemana.
Kust alla laadida ja kuidas Firefoxi Firebugi laiendust installida
Ja hoolimata asjaolust, et selle pistikprogrammiga sarnased tööriistad on nüüd saadaval ka teistes populaarsetes brauserites (näiteks sees või sees), jääb Firebug minu jaoks prioriteediks, kuna mõnes aspektis on see mugavam ja funktsionaalsem. Mis selles pistikprogrammis head on?
Esiteks võimaldab see käigu pealt leida ja toimetada vajalikud elemendid ja kood. See on eriti kasulik algajatele veebimeistritele, kuna see võimaldab teil redigeerida lehtede plokke isegi ilma korraliku keeleoskuseta hüperteksti märgistus(HTML) ja CSS (Cascading Style Sheets).
Vaatame nüüd Firebugi installimist. Pistikprogrammi saate alla laadida ametlikult lehelt, kust leiate kõige rohkem Uusim versioon. Pealegi on selle laienduse installimine otse Masila abil palju lihtsam. Sel juhul, kui liigutate kursori lingi kohale uusimale versioonile (mille peaksite alla laadima), ilmub sellest paremale roheline nupp „+Lisa Firefoxi“. Sellel nupul klõpsates algab installimine otse. Pärast seda peate laienduse aktiveerimiseks brauseri taaskäivitama.
Kui kasutate mõnda muud veebibrauserit, ilmub paremale hiirevärvi nupp "Laadi kohe alla", millele peaksite klõpsama. Pärast seda ilmub silt linkidega "Lisateave Firefoxi kohta" ja "Laadi sellegipoolest alla". Kui järgite esimest linki, saate Lisainformatsioon brauseri kohta, kui klõpsate teisel, kuvatakse see standardne aken alla laadida, kus teil palutakse fail oma arvutisse salvestada. Valige asukoht, kuhu fail paigutada, ja klõpsake nuppu "Salvesta". Siis see algab standardne protsess allalaadimised.
Pärast laadimise lõpetamist avage Firefox, klõpsake vasakul ülemine nurk"Fail" - "Ava fail". Leidke oma arvuti kõvakettalt asukoht, kus olete allalaaditud faili leidnud, ja aktiveerige see. Installimine algab, pärast mida peate brauseri taaskäivitama. Pärast taaskäivitamist näete Firefoxi brauseri paremas ülanurgas pilti mardikast, mis on Firebugi sümbol. See tähendab, et pistikprogramm on installitud ja kasutamiseks valmis.
![](https://i0.wp.com/goldbusinessnet.com/wp-content/uploads/2012/07/simvol-firebug.jpg)
See on kogu allalaadimise ja installimise protsess. Nagu näete, pole midagi keerulist. Nüüd räägin teile, kuidas Firebugi pistikprogrammi kasutada. Põhirõhk on loomulikult nendel funktsioonidel, mida veebihaldur kõige rohkem vajab ja mida ma ise kasutan. Lugege hoolikalt edasi ja proovige mõista; Uskuge mind, sellised tööriistad muudavad veebihalduri elu palju lihtsamaks.
Kuidas kasutada Firebugi pistikprogrammi HTML-koodi muutmiseks
Ütlen kohe, et Firebug suudab palju ära teha. Kõige nõutav valik, milleta ehk ükski veebihaldur hakkama ei saa, on redigeerimisvõimalus HTML parameetrid ja CSS-i otse veebibrauseri aknas, jälgides samal ajal, kuidas vastav element muutub.
Seega äratage pistikprogramm ellu, klõpsates mardikaikoonil ja allservas avaneb aken, mille asukohta saab vastavalt soovile muuta, lihtne pukseerimine(selleks liigutage hiirekursor Firebugi akna ülemisse serva, kuni see näeb välja selline topeltnooled ja hoides vasak nupp lohistage äärist üles ja alla.)
![](https://i0.wp.com/goldbusinessnet.com/wp-content/uploads/2012/07/granitca-oqna-firebug.png)
Lisaks saab kõige vasakpoolsemal punasel nupul klõpsates akna minimeerida, keskmisele vajutades saab laienduse avada eraldi aknas, kõige parempoolsemal klõpsates saab Firebugi plugina keelata. Nüüd vaatame, kuidas näeb välja Firefoxi brauseris plugina aken:
![](https://i1.wp.com/goldbusinessnet.com/wp-content/uploads/2012/07/oqno-plagina-firebug.png)
Vasakul küljel asub HTML struktuur, paremal on CSS Cascading Style Sheets elemendid. Nüüd lühike ekskursioon hüperteksti märgistuskeele põhitõdedesse. Fakt on see, et oma ala kogenud spetsialistid (plokipaigutus) määravad konteinerite abil (div-märgendi abil) veebilehe konkreetse ala soovitud sisu. Ja siin välimus paigutuselemendid on loodud laadilehtede määratlemiseks.
Lisaks kasutatakse pesastamise põhimõtet, see tähendab, et suuremad konteinerid võivad sisaldada mitut elementi. Nagu näete ekraanipildi näitest, peate selle või selle elemendi laiendamiseks klõpsama järjestikku selle või selle HTML-i fragmendi kõrval vasakul asuval plussmärgil ja saate järjestikku üksteise sees pesastatud plokke.
Kui viia hiirekursor HTML-i struktuuri ühele või teisele elemendile, siis samal ajal värvitakse need lehe piirkonnad, mis vastavad sellele koodilõigule muaree tooniga ja siis on näha, millised elemendid sisalduvad. see konteiner. Näiteks ülaltoodud ekraanipildil on selline ala üks elemente ülemine menüü. Veelgi enam, kui klõpsate konkreetsel HTML-i real, kuvatakse selle elemendiga sobivad CSS-reeglid paremas alanurgas.
Nii saate otse Firebugi aknas katsetada brauseris lehe erinevaid alasid, muutes neid vastavalt oma soovile, kuni saavutate soovitud tulemuse. Ja tohutu pluss seda meetodit Asi on selles, et saate seda teha minimaalsete teadmistega hüperteksti märgistamise ja kaskaadlaadilehtede kohta.
Lisaks on võimalik sarnaseid katseid läbi viia mis tahes ressursi veebilehega, muretsemata, et midagi sassi ajate, kuna kõiki neid muudatusi ei salvestata ja lehe uuesti laadimisel võtab kõik oma eelmise. vormi. Kui teile meeldis näiteks mõni ressurss Internetis, saate mõne selle leheküljega katsetada, et teada saada, milliseid märgistusvalikuid ja milliseid stiiliväärtusi seal kasutatakse.
Nii saate teada, milline rida HTML dokument või mis CSS-i atribuut tuleb soovitud tulemuse saavutamiseks muuta. Lisaks mugavuse huvides ülemine rida näitab järjestikku pesastatud konteinereid, milles see element sisaldub:
![](https://i1.wp.com/goldbusinessnet.com/wp-content/uploads/2012/07/qonteinery-html-qoda.png)
Jällegi, kui liigutate hiirekursorit nende konteinerite kohale, värvitakse ka neid sisaldavad elemendid. Nagu näete, säästavad Firebugi võimalused teie projekti täiuslikku vormi viimisel palju aega ja seda saab teha isegi algaja veebihaldur.
Kuid see pole veel kõik. Laiendusel on funktsioon, mille abil saate teha ülalkirjeldatud vastupidiseid toiminguid. See tähendab, et kui liigutate hiirekursori lehe kohal, muutuvad Firebugi pistikprogrammi aknas olevad HTML-elemendid ise siniseks:
![](https://i1.wp.com/goldbusinessnet.com/wp-content/uploads/2012/07/aqtivatciia-funqtcii-firebug.png)
Selle funktsiooni rakendamiseks peate klõpsama kaldus noolt. Nüüd liigutage kursorit lehe kohal ja vasakpoolses alumises osas näete, kuidas HTML-i vastavad jaotised, mis vastutavad lehe elementide loomise eest, on raamiga ümbritsetud.
![](https://i0.wp.com/goldbusinessnet.com/wp-content/uploads/2012/07/html-qod.jpg)
Nüüd saate minna vasak pool Firebugi laienduse aken otse redigeerimiseks. Ma näitan sulle edasi konkreetne näide. Selle või teise elemendi muutmiseks, näiteks oma ajaveebi ülemise navigeerimisriba asukoha muutmiseks, muudan ühe sildi ID-d div. Selleks liigutan kursori valitud konteinerisse:
ja klõpsan sellel hiirega, et see valida (te ei pea rida ise valima, seda on lihtsalt lihtsam redigeerida). See muutub Sinine värv. Seejärel klõpsan hiire vasaku nupuga "juurdepääs", mille tulemusena muutub sõna ise siniseks ja on redigeerimiseks saadaval.
![](https://i0.wp.com/goldbusinessnet.com/wp-content/uploads/2012/07/izmenenie-html-qoda.png)
Nüüd, kui eemaldate lihtsalt atribuudi "id juurdepääs", näete seda üleval navigeerimisriba omandab esindusliku välimuse. Kasutame teistsugust "id" väärtust ja "access" asemel "access1". Näete kohe, et minu ajaveebi ülamenüü välimus on põhjalikult muutunud:
![](https://i2.wp.com/goldbusinessnet.com/wp-content/uploads/2012/07/redaqtirovanie-v-firebug.png)
Saate seda selle näite abil kohe proovida, et mõista, kuidas see toimib. Firebugi laiendus(Kui keegi pole veel aru saanud või pole artiklit hoolikalt lugenud, saate seda teha ükskõik millise Interneti-saidi veebisaidiga!). Sel juhul, nagu ma juba ütlesin, CMS-i (saidimootori) failides tegelikke muudatusi ei toimu, seega muutke neid julgelt. Ja alles pärast seda, kui olete tulemusega äsja simuleeritud HTML-koodi kujul rahul, saate jätkata tegeliku muudatusega.
Siin tuleb aga algajate veebimeistrite peamine raskus. Asi on selles, et teie teemafailid WordPressi mootor, nagu iga teine CMS, on sisse kirjutatud PHP keel, mis teisendatakse saidi lehe brauseris kuvamisel HTML-koodiks. Seetõttu peate mootorifailid läbi uurima, et leida täpselt see, mida tuleb redigeerida.
Siin on vaja mingit vihjet, mis selles asjas aitaks. Näete mida CSS klass või ID on registreeritud ühes või teises konteineris (see sisaldub DIV silt). Muide, ma juhtisin sellele juba eelmises näites tähelepanu (otsime PHP-dokumentidest faile id="access"-ga).
Nüüd, kus meil on aimu, tuleb kuidagi leida vajalik WordPressi teemafail, mida muutes saavutame vajaliku tulemuse. Arutleme järgmiselt. Fail HEADER.PHP vastutab tavaliselt kõigi ajaveebi päises olevate teemaelementide moodustamise eest, seega otsime selle koostisest id="access".
Kui fail on väike, nagu minu puhul, ei ole õiget kohta käsitsi lihtne leida. Kui teie teema on keeruline, tuleb appi valik "Otsi", mis suudab soovitud faili leida.
Selleks ühendame läbi FTP protokoll serveriga, kasutades eelnimetatud Notepadi redaktorit ja laadige oma arvutisse dokument HEADER.PHP. Pärast seda valige ülemisest menüüst "Otsi" - "Leia" ja sisestage väljale "Otsi" sõna või fraas, mille järgi otsime (tuletan teile meelde, et see näide see on id="juurdepääs"):
![](https://i1.wp.com/goldbusinessnet.com/wp-content/uploads/2012/07/poisq-v-notepad-plus-plus.png)
Ja mõne aja pärast lõpeb otsing edukalt, NotePad pluss kuvab kõik otsitava sõnaga koodiread, mis on erilisel viisil esile tõstetud:
![](https://i0.wp.com/goldbusinessnet.com/wp-content/uploads/2012/07/rezultat-poisqa.png)
Nüüd saate turvaliselt ja kohe id-väärtust korralikult muuta (meie puhul muutke "access" väärtuseks "access1"). Salvestame faili, misjärel jõustuvad tegelikud muudatused. Muidugi, see on lihtne näide, sagedamini juhtub, et otsitava sõnaga on rohkem kui üks või kaks faili ja peate tegema mitu muudatust.
Sel juhul peate kasutama (või sarnast), et laadida arvutisse kõik saidi mootori failid ja seejärel kasutada NotePadi redaktor++ nende otsimiseks ja muutmiseks. Aga ma arvan, et otsingu põhimõte vajalikud failid nende hilisemaks muutmiseks saite sellest aru.
Kuidas kasutada Firebugi CSS-stiilide muutmiseks
Võrreldes HTML-i redigeerimisega on siin kõik palju lihtsam. Nagu ma juba artikli alguses kirjutasin, vastab Firebugi laienduse akna vasakus pooles valitud hüperteksti märgistuse tükk paremal asuvatele CSS-i omadustele. Need määravad, kuidas see ala brauseris välja näeb. Selleks, et mõistaksite stiili atribuutide muutmist, viige hiirekursor mõnele koodiosale. Lähedusse ilmub kohe läbikriipsutatud punane ring:
![](https://i1.wp.com/goldbusinessnet.com/wp-content/uploads/2012/07/redaqtirovanie-css.png)
Kui klõpsate sellel hiire vasaku nupuga, muutub see värv halliks, samuti kogu seda kirjeldav rida CSS-i reegel, muutub kahvatuhalliks. Sel viisil saate loomulikult selle või selle omaduse keelata, muudatused kuvatakse kohe brauseris. Lubamiseks kasutame pöördtoimingut. Konkreetse elemendi väärtuse muutmiseks tehke sellel ka vasakklõps:
![](https://i1.wp.com/goldbusinessnet.com/wp-content/uploads/2012/07/izmenenie-css.png)
Lisaks pange tähele, et just ülalpool on link dokumendile, milles tuleb muudatusi teha, ja on näidatud isegi rida, kus see nõutav element asub. On ütlematagi selge, et enne redigeerimist näete kõiki tulemusi Firefoxi brauseris.
Noh, see on ilmselt kõik, millest ma täna rääkida tahtsin. Loodan, et esitatud teave oli üksikasjalikult kirjeldatud funktsionaalsust selline kasulik tööriist veebihalduritele nagu Firebugi laiendus Firefoxi brauser. Muidugi ei võetud arvesse kõiki selle pistikprogrammi valikuid, vaid ainult neid, mida ma ajaveebiga töötades kasutan.
Võib-olla pöördun oma järgmistes väljaannetes selle teema juurde rohkem kui korra. Ja sina, kallid lugejad, Loodan, et märgite minu tööd nuppude abil sotsiaalsed võrgustikud. Lisaks soovitan teil tellida uusimad artiklid, kasutades allolevat vormi.
Vigade parandamine on iga töö vajalik tingimus, olgu selleks siis artikli kirjutamine ajalehele või veebilehe loomine. Arvutiajastul on vigade kallal töötamine juba ammu automatiseeritud. Näiteks grammatiliste vigade parandamiseks on kontoritestide redaktoris õigekirjakontroll, mis aitab kirjutaval vennaskonnal kirjutada romaane, lugusid, artikleid, isegi, võib öelda, kogu tähestikku tundmata. Hüperteksti kirjutajatele – veebiarendajatele – on sarnased tööriistad. Kõige populaarsema sellise tööriista näide on praegu Firefoxi Firebugi laiendus.
Esimesed asjad kõigepealt Firebug
Firebugist on saanud üks veebidisainerite ja programmeerijate lemmikrakendusi. Selle laienduse populaarsus sundis omakorda ka konkureerivate brauserite loojaid oma veebilehitsejatesse sarnaseid funktsioone lisama. Kuid kuna Firebug, nagu öeldakse, on nüüd "trendilooja", tutvume selles artiklis esmalt sellega ja seejärel kaalume selle taustal analooge teistes brauserites.
Firebugi lõi programmeerija Joe Hewitt ja nagu me juba ütlesime, on see mõeldud veebilehtede vigade kontrollimiseks - HTML märgistus, CSS-stiilid, JavaScripti skriptid. Samuti saate selle laienduse abil hinnata probleemseid piirkondi lehe brauserisse laadimisel.
Firebug (getfirebug.com) installib Firefoxi laiendusena. Pärast installimist ilmub brauseri alumisse paremasse nurka veaikoon, millel klõpsates avaneb brauseri allosas spetsiaalne aken. Olenevalt töörežiimist võib paremale küljele ilmuda teine lisaaken. Firebugi saab käivitada ka eraldiseisva rakendusena, mis on mugav neile, kellel on kaks monitori.
Peamist silumisrežiimi on kuus – HTML, CSS, JavaScript, konsool, DOM ja võrk. Igal režiimil on veebisiluri peamenüüs oma vahekaart. Muide, Firebug on venestatud.
Vaatame lähemalt igas režiimis töötamist.
HTML-i silumine. Fireburgiga HTML-lehe kontrollimine on rõõm. Klõpsake peamenüüs nooleikooni, hõljutage kursorit veebilehe elemendi kohal ja selle elemendi esiletõstetud kood ilmub kohe HTML-aknas. Ja enam pole vaja valusalt pikka aega otsida koodi sügavalt peidetud probleemset elementi. Samuti ilmub parempoolsesse abiaknasse lisateave elemendi stiili, asukoha ja DOM-i omaduste kohta.
Esiletõstetud elemendi sisu saab kerge käeliigutusega koheselt redigeerida ja tehtud muudatused on kohe näha.
Koodi voltimine on toetatud. Firebug võimaldab ka aktiivselt kasutada Tab ja üles-alla nuppe. Tabulaatorit kasutatakse redigeerimise ajal elemendi atribuutide vahel liikumiseks. Ja "üles" ja "alla" klahvide abil saate atribuutide väärtusi muuta. See tähendab, et Firebug suurendab või vähendab numbrilise atribuudi väärtust 1 võrra, kui vajutate vastavalt "üles" või "alla".
Oluline on spetsiaalne vahekaart täiendavas teiseses aknas nimega "Paigutus". Veebilehe iga element sisaldub järjestikku pesastatud veerise, äärise ja polsterduse konteinerites. Vahekaart "Paigutus" kajastab neid konteinereid endid sümboolsete mitmevärviliste ristkülikute kujul. Saate muuta nende väärtusi samamoodi nagu teiste html-elementide väärtusi ja kohe näha, kuidas lehe välimus muutub.
CSS-i redigeerimine. Remont CSS-stiilid Seda saab teha kas teiseses HTML-režiimi aknas või eraldi natiivses režiimis. CSS-i redigeerimine on samuti väga mugav: siin saate ja peaksite kasutama üles-alla klahve. See võimaldab teil muuta mitte ainult CSS-i valijate väärtusi, vaid ka valijaid endid, kuna Firebug sisaldab täielikku Cascading Style Sheets märksõnade sõnastikku.
Kõik CSS-i atribuudid saab kiiresti keelata ja uuesti lubada, klõpsates halli nuppu, mis kuvatakse vasakul, kui hõljutate kursorit CSS-i atribuudi kohal.
Kui hõljutate kursorit värvi või pildi omaduse kohal, kuvatakse selle värvi või pildi väike eelvaate aken. Veelgi enam, pildi puhul kuvatakse selle mõõtmed.
Võrgurežiim. See režiim võimaldab teil kontrollida kõigi veebilehe moodustavate failide laadimisaega. See hõlmab bännerite, piltide, js-skriptide ja stiilifailide allalaadimist. On väga oluline, et oleks võimalik vaadata iga üksiku faili allalaadimist.
"Ognezhuk" näitab iga faili allalaadimisgraafikut. Graafikud näitavad HTTP päringu aega, andmete vastuvõtmise aega ja andmete ooteaega erinevates värvides.
Iga allalaadimise puhul saate vaadata http-päist, klõpsates iga päringu kõrval oleval ristil.
JavaScripti silur. Firebug on võimas JavaScripti skriptide silur. Selle silumise jaoks on spetsiaalne eraldi režiim "Skriptid". Siin saate määrata katkestuspunktid ühe klõpsuga koodirea numbril. Pealegi võivad katkestuspunktid olla tingimuslikud, st käivituvad näiteks ainult siis, kui lehel nuppu vajutatakse.
Katkestuspunktide ajal silumisel kuvatakse täiendavas aknas hulk funktsioonikutseid, mis ootavad naasmist. Ja lisaakna vahekaardil "Vaatlused" kuvatakse DOM-objektide väärtused.
konsool. Väga lahe asi. Fireburgi konsool on peaaegu nagu bash Linuxis. Esindab käsurida. Siin saate sisestada ja käivitada JavaScripti käske üksikult või tervete skriptidena.
Lisaks on Firebugi konsoolil oma spetsiaalsed käsud. Näiteks on olemas käsk console.log, mis sarnaneb C-s olevale printf-ile:
>>> console.log("Tere, maailm!") Tere, maailm!
Konsoolil on väga oluline funktsioon – profileerija. See tööriist aitab teil mõõta skripti jõudlust. Konsoolirežiimis peate lihtsalt klõpsama vastavat nuppu ja pärast lehe uuesti laadimist uuesti nuppu "Profiil". Selle tulemusel kuvatakse üksikasjalik aruanne teie js-i skripti iga funktsiooni tööaja kohta.
DOM režiim ( Dokumendi objekt Mudel). Dokumendiobjekti mudel on see, milleks brauser laaditud veebilehe sisemiselt muudab. DOM on programmeerimisliides, mis võimaldab JavaScripti skriptidel nähtavas brauseriaknas muudatusi teha. See Firebugi režiimi aken sisaldab veebileheobjektide hierarhiat ja võimaldab nendega reaalajas manipuleerida ilma sama konsooli kasutamata.
Ja veel üks peamine omadus Firebug on laiendused, mis väärivad eraldi artiklit. Nagu Firefoxi brauser ise, saab Firebug täiustada oma võimalusi täiendavate laiendustega, alates süntaksi esiletõstmisest kuni sisseehitatud HTML-viiteni. See laiendusvõimalus teeb Firebugi praegu teiste brauseritega võrreldes vaieldamatuks liidriks.
Alternatiivne
Loomulikult ei istu ka Firefoxi konkurendid käed rüpes, nemad tegutsevad aktiivselt selles suunas ja pakuvad oma brauserites Firebugile sarnast funktsionaalsust. Seda funktsionaalsust täiustatakse pidevalt, mistõttu võivad allolevad kirjeldused olla juba aegunud isegi ajalehe selle numbri ilmumise ajaks. Seetõttu teen lühidalt ja loobun holivaride võrdlustest.
PRL Internet Explorer 8.
Firebugi analoog IE 8-s kordab oma funktsionaalsuses enamikku Firefoxi laiendusrežiimidest. Seal on voltimise ja CSS-iga HTML-režiim, mis võimaldab valida lehel ühe klõpsuga redigeerimiseks vajaliku elemendi ning jälgida ka muudatusi reaalajas. Saadaval täiendav paigutus- analoog vahekaardil "Paigutus". Unixi saki üles ja alla klahve siiski ei kasutata.
Sest JavaScripti silumine Seal on vastavad režiimid "stsenaarium" ja "profiil". Samuti on konsool tagasihoidlikul lisakaardil. Console.log käske aga ei toetata. Võimalik, et pole veel toetatud. Ja üsna tüütu on see, et puudub režiim “Võrk”, mis võimaldab hinnata veebilehe laadimiskiirust. Samuti puudub mugav tööriist DOM-i kontrollimiseks.
IE 8 arendustööriistal on aga brauserirežiimi vahetamine IE 7 ja IE 8 vahel. See on paljude veebidisainerite jaoks oluline funktsioon.
Apple Safari. Safari brauser uhkeldab ka Firebugiga sarnase tööriistaga ja stiilsema disainiga kui inetu IE 8. Seal on vaade HTML-i, CSS-i ja „Element Layout” jaoks. Kuid navigeerimine ja soovitud elemendi otsimine toimub eranditult html-koodis. Leitud elemendi atribuutide redigeerimine on ka ilma "üles-alla" tabeldusklahvideta väga primitiivne. Kuid on ka DOM-i elemendi omaduste vaatamine ja muutmine.
Režiim "Võrk" on olemas. Kaasatud on JavaScripti silumine ja profiilide koostamine. Ja seal on täiustatud konsool koos automaatse lõpetamisega, samuti käsk console.log.
Google Chrome. Chrome'i arendustööriist on välimuselt peaaegu sarnane Apple Safari analoogiga. Google'i brauseri kolmandas versioonis on see funktsioon oluliselt vähenenud. Seal on ainult koodi vaatamine, võrgurežiim ja konsool. Kuid võime öelda, et Google Chrome'i ja Apple Safari silumistööriistad on nii väliselt kui ka sisemiselt täiesti identsed, kuna need kasutavad sama WebKiti mootorit.
Ooper Dragonfly. Opera brauseri "Dragonfly" kordab praktiliselt pea- ja lisaaknaga "Fire Bug" liidest. Html-koodi ja stiilide vaatamine toimub ühel DOM-i vahekaardil. Koodi voltimine on olemas. Samal ajal sisaldab lisaaken ka vahekaardi ja üles-alla klahvide pakutavaid funktsioone, nagu Firebugis. Vahekaart Konteiner on mõeldud ainult informatiivsel eesmärgil.
Konsool on olemas ja sisaldab käsurida, mis võimaldab teil käivitada JavaScripti skriptid interaktiivselt. Seal on silur ja skripti täitmise logimine. Funktsioon console.log aga puudub.
Režiimis "Võrk" sisaldavad üksikute veebilehtede failide allalaadimisgraafikud ainult tegelikke allalaadimis- ja ooteaegu – mis on põhimõtteliselt enamikul juhtudel piisav.
Seega jäävad alternatiivid nii funktsionaalsuse kui ka mugavuse poolest alla Firefbugile, kuid nagu sellistel juhtudel öeldakse, sobivad need maapiirkondadesse üsna hästi. Esimene tutvus brauseritesse sisseehitatud silumistööriistadega peaks kindlasti algama Firebug for Firefoxist.
Mihhail ASTAPCHIK
FireBugi otse brauserisse installimiseks minge siia ja klõpsake nuppu "Laadi alla". FireBug integreerub Firefoxiga ja pakub lai valik arendustööriistad, mis on teile käeulatuses. Saate redigeerida, siluda ja lihtsalt vaadata CSS-i dokumendid, HTML ja JavaScript on saadaval igal lehel. Laienduse saate alla laadida ja kasutada täiesti tasuta.
Peamised omadused ja funktsioonid
- ainult teile sobival viisil...
FireBugi saate avada eraldi aknas või brauseri allosas oleva ribana. FireBug pakub saidi multifunktsionaalset "punktist-punkti" juhtimist;
- HTML-dokumentide uurimine ja redigeerimine.
FireBug teeb selle leidmise lihtsaks HTML elemendid, mis asub suurte dokumentide keskel. Kui olete otsitava leidnud, annab FireBug teile elemendi kohta täpsemat teavet ja saate seda otse redigeerida;
- CSS-i lihvimine täiuslikkuseni.
FireBug CSS-i tabelid annavad teile kogu teabe teie veebilehe stiilide kohta ja kui te pole millegagi rahul, saate seda muuta ja efekti koheselt eelvaadata;
- CSS-i mõõtmete visualiseerimine.
Kui CSS-i plokid ei renderdata õigesti, võib olla raske mõista, miks see juhtub. Laske FireBugil olla teie silmad ning see mõõdab ja kuvab kõik nihked, polstrid, äärised, polstrid ja kõik mõõtmed;
- võrgu aktiivsuse jälgija.
Teie lehtede laadimine võtab kaua aega, aga miks? Kas olete kirjutanud palju stsenaariume? Unustasite pilte tihendada ja need kaaluvad palju? FireBug aitab teil kõiki neid probleeme mõista ja lahendada;
- JavaScripti silumine.
FireBug sisaldab võimsat JavaScripti silurit, mis võimaldab teil täitmise igal ajal peatada, skripti mõista ja lihvida. Kui tunnete, et teie kood on aeglane, kasutage toimivuse mõõtmiseks ja nõrkade kohtade leidmiseks JavaScripti profileerijat;
- kiiresti vigu leida.
Kui midagi läheb valesti, teatab FireBug sellest kohe ja edastab maksimaalse veateabe JavaScripti kood, CSS ja XML;
- DOM-i uurimine.
Dokumendiobjektimudel on suur objektide ja funktsioonide hierarhia, mis ootavad Java-skriptide kasutamist. FireBug aitab teil kiiresti leida vajalikud DOM-objektid ja neid seejärel käigult redigeerida;
- Käivitage JavaScripti käigu pealt.
Command Line on FireBugi paketi üks vanimaid tööriistu, kuid seal on ka võimalus;
- JavaScripti teabe logimine.
Hea JavaScripti siluri omamine on kindlasti hea, kuid mõnikord kõige rohkem kiire tee probleemide otsimiseks - see on konsooli nii palju kui võimalik rohkem informatsiooni. FireBug pakub teile võimsaid logimisfunktsioone, mis aitavad probleemidele lahendusi leida.