Kā lietot Firefox Web izstrādātāju rīkus

Satura rādītājs:

Kā lietot Firefox Web izstrādātāju rīkus
Kā lietot Firefox Web izstrādātāju rīkus

Video: Kā lietot Firefox Web izstrādātāju rīkus

Video: Kā lietot Firefox Web izstrādātāju rīkus
Video: Java Tech Talk: Telegram бот на java за 1 час - YouTube 2024, Aprīlis
Anonim
Firefox Web izstrādātāju izvēlnē ir instrumenti lapu pārbaudīšanai, patvaļīga JavaScript koda izpildei un HTTP pieprasījumu un citu ziņojumu skatīšanai. Firefox 10 pievienoja pilnīgi jaunu Inspector rīku un atjauninātu Scratchpad.
Firefox Web izstrādātāju izvēlnē ir instrumenti lapu pārbaudīšanai, patvaļīga JavaScript koda izpildei un HTTP pieprasījumu un citu ziņojumu skatīšanai. Firefox 10 pievienoja pilnīgi jaunu Inspector rīku un atjauninātu Scratchpad.

Firefox jaunās tīmekļa izstrādes funkcijas, apvienojumā ar lieliskiem tīmekļa pārveidotāju papildinājumiem, piemēram, Firebug un Web izstrādātāju rīkjoslai, padara Firefox par ideālu pārlūku, kas paredzēta tīmekļa izstrādātājiem. Visi rīki ir pieejami Firefox izvēlnē Web Developer.

Lapas inspektors

Pārbaudiet konkrētu elementu, peles labo pogu noklikšķinot uz tā un izvēloties Pārbaudiet (vai nospiediet Q.) Jūs varat arī palaist Inspektors no Web izstrādātāja izvēlnes.

Ekrāna apakšdaļā redzēsiet rīkjoslu, kuru jūs varat izmantot, lai kontrolētu inspektoru. Jūsu izvēlētais elements tiks izcelts, un citi lapas elementi būs bloķēti.
Ekrāna apakšdaļā redzēsiet rīkjoslu, kuru jūs varat izmantot, lai kontrolētu inspektoru. Jūsu izvēlētais elements tiks izcelts, un citi lapas elementi būs bloķēti.
Image
Image

Ja vēlaties izvēlēties jaunu elementu, noklikšķiniet uz Pārbaudiet pogas rīkjoslā, novietojiet peles kursoru virs lapas un noklikšķiniet uz sava elementa. Firefox uzsver elementu zem kursora.

Varat pārvietoties starp vecāku un bērna elementiem, noklikšķinot uz rīkjoslā esošajām rāmju rāmjiem.
Varat pārvietoties starp vecāku un bērna elementiem, noklikšķinot uz rīkjoslā esošajām rāmju rāmjiem.

HTML inspektors

Noklikšķiniet uz HTML pogu, lai apskatītu pašlaik atlasītā elementa HTML kodu.

Image
Image

HTML inspektors ļauj jums izvērst un sakļaut HTML tagus, tādēļ ir viegli vizualizēt īsumā. Ja jūs vēlaties redzēt HTML lapu plakanajā failā, varat to atlasīt Skatīt avota lapu no Web izstrādātāja izvēlnes.

Image
Image

CSS inspektors

Noklikšķiniet uz Stils pogu, lai skatītu atlasītajam elementam piemērotos CSS noteikumus.

Image
Image

Pastāv arī CSS īpašību panelis - pārslēdzieties starp diviem, noklikšķinot uz Noteikumi un Īpašības pogas. Lai palīdzētu jums atrast īpašas īpašības, īpašumu panelis ietver meklēšanas lodziņu.

Image
Image

Jūs varat no jauna rediģēt elementa CSS no Reglamenta paneļa. Noņemiet atzīmi no kādām no izvēles rūtiņām, lai deaktivizētu kārtulu, noklikšķiniet uz teksta, lai mainītu kārtulu, vai arī pievienojiet savus noteikumus elementam, kas atrodas paneļa augšpusē. Šeit esmu pievienojis fonta svars: treknrakstā; CSS noteikums, padarot elementa tekstu treknrakstā.

Image
Image

JavaScript scratchpad

Scratchpad arī redzēja atjauninājumu, izmantojot Firefox 10, un tagad tajā ir iekļauts sintakses izcelšana. Varat ierakstīt JavaScript kodu, kas palaists pašreizējā lapā.

Image
Image

Kad esat, noklikšķiniet uz Izpildīt izvēlieties un izvēlieties Palaist Kods darbojas pašreizējā cilnē.

Image
Image

Web konsole

Web konsoles aizstāj veco kļūdas konsoli, kas ir novecojusi un tiks noņemta nākamajā Firefox versijā.

Konsole parāda četrus dažādu veidu ziņojumus, kurus varat pārslēgt - tīkla pieprasījumus, CSS kļūdu ziņojumus, JavaScript kļūdu ziņojumus un tīmekļa izstrādātāju ziņojumus.
Konsole parāda četrus dažādu veidu ziņojumus, kurus varat pārslēgt - tīkla pieprasījumus, CSS kļūdu ziņojumus, JavaScript kļūdu ziņojumus un tīmekļa izstrādātāju ziņojumus.

Kas ir tīmekļa izstrādes ziņojums? Tas ir ziņojums, kas drukāts uz window.console objektu. Piemēram, mēs varētu palaist window.console.log ("Hello World"); JavaScript koda skrejcatos, lai izdrukātu izstrādātāja ziņojumu konsolē. Tīmekļa izstrādātāji var integrēt šos ziņojumus savā JavaScript kodā, lai palīdzētu ar atkļūdošanu.

Atsvaidziniet lapu un redzēsit izveidotos tīkla pieprasījumus un citus ziņojumus.
Atsvaidziniet lapu un redzēsit izveidotos tīkla pieprasījumus un citus ziņojumus.
Izmantojiet meklēšanas lodziņu, lai filtrētu ziņas; noklikšķiniet uz pieprasījuma, ja vēlaties redzēt sīkāku informāciju.
Izmantojiet meklēšanas lodziņu, lai filtrētu ziņas; noklikšķiniet uz pieprasījuma, ja vēlaties redzēt sīkāku informāciju.
Image
Image

No Firefox 10 Webkonsole var strādāt kopā ar lapas inspektoru. $ 0 mainīgais norāda inspektoram pašlaik atlasīto objektu. Tātad, piemēram, ja jūs vēlaties paslēpt pašlaik atlasīto objektu, jūs varētu palaist $ 0.style.display = "neviens" konsole.

Ja vēlaties uzzināt vairāk par konsoles un tā iebūvēto funkciju izmantošanu, skatiet tīmekļa konsoles lapu Mozilla izstrādātāju tīkla vietnē.
Ja vēlaties uzzināt vairāk par konsoles un tā iebūvēto funkciju izmantošanu, skatiet tīmekļa konsoles lapu Mozilla izstrādātāju tīkla vietnē.

Iegūstiet vairāk rīku

The Iegūstiet vairāk rīku iespēja pāriet uz Web izstrādātāja rīkjoslas papildinājumu kolekciju vietnē Mozilla Add-Ons. Tajā ir daži no labākajiem tīmekļa izstrādātāju papildinājumiem, tostarp Firebug un Web izstrādātāju rīkjosla.

Ja esat lietojis Firefox dažus gadus, jūs varat atcerēties DOM inspektoru. Kopš tā laika Firefox integrētie izstrādātāju rīki ir bijuši tālu.

Ieteicams: