Firebug for Firefox – installimine ja kasutamine. Pärast seda peate brauseri taaskäivitama. Firebugi pistikprogrammi kasutamise näide

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?

  1. Külastage ametlikku veebisaiti getfirebug.com
  2. Seal, saidi paremas servas, näete nuppu. Installimise alustamiseks klõpsake sellel.
  3. Pärast pildil klõpsamist ilmub järgmine dialoogiboks. Klõpsake nuppu "Installi kohe".


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üü.

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.


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

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.


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.)


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:


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:


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:


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.


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: