Kaip naudotis "Firefox" žiniatinklio kūrimo įrankiais

Turinys:

Kaip naudotis "Firefox" žiniatinklio kūrimo įrankiais
Kaip naudotis "Firefox" žiniatinklio kūrimo įrankiais

Video: Kaip naudotis "Firefox" žiniatinklio kūrimo įrankiais

Video: Kaip naudotis
Video: How to add appimage to Linux menu - YouTube 2024, Balandis
Anonim
"Firefox" žiniatinklio kūrėjų meniu yra įrankiai, skirti puslapių patikrinimui, pasirinktinio JavaScript kodo vykdymui ir HTTP užklausų bei kitų pranešimų peržiūrai. "Firefox 10" pridėjo visiškai naują Inspector įrankį ir atnaujintą "Scratchpad".
"Firefox" žiniatinklio kūrėjų meniu yra įrankiai, skirti puslapių patikrinimui, pasirinktinio JavaScript kodo vykdymui ir HTTP užklausų bei kitų pranešimų peržiūrai. "Firefox 10" pridėjo visiškai naują Inspector įrankį ir atnaujintą "Scratchpad".

"Firefox" naujos žiniatinklio kūrėjo funkcijos kartu su nuostabiais interneto kūrėjų papildais, pvz., "Firebug" ir "Web Developer" įrankių juosta, "Firefox" yra ideali naršyklė, skirta interneto kūrėjams. Visos priemonės yra prieinamos "Web Developer" "Firefox" meniu.

Puslapio inspektorius

Patikrinkite konkretų elementą, jį dešiniuoju pelės klavišu spustelėdami ir pasirinkdami Patikrink (arba spausdami Q.) Taip pat galite paleisti Inspektorius iš žiniatinklio kūrėjų meniu.

Ekrano apačioje pamatysite įrankių juostą, kurią galėsite valdyti inspektorius. Jūsų pasirinktas elementas bus paryškintas ir kiti elementai puslapyje bus švelni.
Ekrano apačioje pamatysite įrankių juostą, kurią galėsite valdyti inspektorius. Jūsų pasirinktas elementas bus paryškintas ir kiti elementai puslapyje bus švelni.
Image
Image

Jei norite pasirinkti naują elementą, spustelėkite jį Patikrink mygtukas įrankių juostoje, užveskite pelę ant puslapio ir spustelėkite elementą. "Firefox" žymi elementą po kursoriumi.

Galite naršyti tarp tėvų ir vaiko elementų spustelėdami įrankių juostos dėžutes.
Galite naršyti tarp tėvų ir vaiko elementų spustelėdami įrankių juostos dėžutes.

HTML inspektorius

Spustelėkite HTML mygtuką, norėdami peržiūrėti šiuo metu pasirinkto elemento HTML kodą.

Image
Image

HTML inspektorius leidžia jums išplėsti ir sutraukti HTML žymes, kad būtų lengviau vizualizuoti iš pirmo žvilgsnio. Jei norite, kad puslapio HTML būtų plokščiajame faile, galite pasirinkti Rodyti puslapio šaltinį iš žiniatinklio kūrėjų meniu.

Image
Image

CSS inspektorius

Spustelėkite Stilius mygtuką, kad pamatytumėte pasirinkto elemento taikomas CSS taisykles.

Image
Image

Taip pat yra CSS savybių skydas - perjunkite abu, spustelėdami Taisyklės ir Savybės mygtukai. Norėdami padėti rasti konkrečias savybes, savybių skydelyje yra paieškos laukelis.

Image
Image

Galite redaguoti elemento CSS "fly" iš "Rules" skydo. Jei norite išjungti taisyklę, nuimkite bet kurias žymės langelius, spustelėkite tekstą, kad pakeistumėte taisyklę, arba pridėkite savo taisykles elemento viršuje. Čia pridėjau šrifto svoris: paryškintas; CSS taisyklė, elemento tekstas paryškintas.

Image
Image

JavaScript "Scratchpad"

"Scratchpad" taip pat matė "Firefox 10" naujinį ir dabar yra sintaksės paryškinimo. Galite įvesti "JavaScript" kodą, kuris būtų rodomas dabartiniame puslapyje.

Image
Image

Kai turėsite, spustelėkite mygtuką Vykdyti meniu ir pasirinkite Paleisti Kodas prasideda dabartiniame skirtuke.

Image
Image

Interneto konsolė

"Web Console" pakeičia seną klaidų konsolę, kuri buvo nebeaktualus ir bus pašalinta būsimoje "Firefox" versijoje.

Konsole rodo keturis skirtingus pranešimų tipus, kuriuos galite perjungti - tinklo užklausų, CSS klaidų pranešimų, "JavaScript" klaidų pranešimų ir žiniatinklio kūrėjų pranešimų matomumą.
Konsole rodo keturis skirtingus pranešimų tipus, kuriuos galite perjungti - tinklo užklausų, CSS klaidų pranešimų, "JavaScript" klaidų pranešimų ir žiniatinklio kūrėjų pranešimų matomumą.

Kas yra žiniatinklio kūrėjo pranešimas? Tai pranešimas, atspausdintas lango.konsole objektui. Pavyzdžiui, galėtume paleisti window.console.log ("Hello World"); "JavaScript" kodą "Scratchpad", kad spausdintumėte kūrėjo pranešimą konsolėje. Interneto kūrėjai gali integruoti šiuos pranešimus į savo "JavaScript" kodą, kad padėtų derinti.

Atnaujinkite puslapį ir pamatysite sugeneruotus tinklo užklausas ir kitus pranešimus.
Atnaujinkite puslapį ir pamatysite sugeneruotus tinklo užklausas ir kitus pranešimus.
Naudokite paieškos laukelį, norėdami filtruoti pranešimus; spustelėkite užklausą, jei norite pamatyti daugiau informacijos.
Naudokite paieškos laukelį, norėdami filtruoti pranešimus; spustelėkite užklausą, jei norite pamatyti daugiau informacijos.
Image
Image

Kaip "Firefox 10", "Web Console" gali veikti kartu su "Page Inspector". Kintamasis $ 0 žymi šiuo metu pasirinktą objektą inspektoriuje. Pavyzdžiui, jei norite paslėpti šiuo metu pasirinktą objektą, galite paleisti $ 0.style.display = "none" konsolėje.

Jei norite sužinoti daugiau apie konsolės ir jos integruotų funkcijų naudojimą, apsilankykite "Web Console" puslapyje Mozilla "Developer Network" svetainėje.
Jei norite sužinoti daugiau apie konsolės ir jos integruotų funkcijų naudojimą, apsilankykite "Web Console" puslapyje Mozilla "Developer Network" svetainėje.

Gaukite daugiau įrankių

The Gaukite daugiau įrankių pasirinkimas perkelia jus į "Web Developer" įrankių rinkinio papildinį rinkinį "Mozilla Add-ons" svetainėje. Jame yra keletas geriausių priedų, skirtų žiniatinklio kūrėjams, įskaitant "Firebug" ir "Web Developer" įrankių juostą.

Jei per keletą metų naudojate "Firefox", galite prisiminti DOM inspektorių. Integruoti "Firefox" kūrėjo įrankiai nuo to laiko jau seniai.

Rekomenduojamas: