Alat za razvojne programere Inspect Element u Firefoxu omogućuje vam da točno odredite HTML kôd za sve što vidite na svojoj web stranici. HTML i pripadajuća CSS stilska tablica mogu se potpuno uređivati nakon što su ti alati otvoreni. Eksperimentirajte sa svim promjenama koje volite, a zatim osvježite stranicu da biste se vratili na predviđeni izgled web stranice.
Koraci
1. dio 2: Pregled elemenata
Korak 1. Desnom tipkom miša kliknite bilo koji element web stranice
Možete desnom tipkom miša kliknuti slike, tekst, pozadinu ili bilo koji drugi element. Ako nemate miš s dvije tipke, pritisnite lijevu tipku miša dok držite tipku Control.
Korak 2. Pritisnite Inspect Element na padajućem izborniku
Alatna traka trebala bi se pojaviti pri dnu prozora. Ispod alatne trake pojavit će se i okvir koji prikazuje HTML kôd stranice.
Korak 3. Identificirajte alatne trake i okna
Kad pritisnete Inspect Element, otvorit će se nekoliko okvira na dnu prozora. Evo podjele njihove uporabe i naziva:
- Gornji red je Toolbox Toolbar. Ovo ima nekoliko razvojnih alata, ali zanima nas Inspector s lijeve strane. Neka ovo bude odabrano (označeno plavom bojom) za cijeli vodič.
- Ispod alatne trake nalazi se jedan niz HTML elemenata u obliku krušnih mrvica koji prikazuje puni put koji se odnosi na odabrani element.
- Okno ispod ovog retka prikazuje HTML stablo ili "Prikaz oznaka" stranice. HTML za odabrani element istaknut je i centriran u ovom oknu.
- Okno s desne strane prikazuje CSS tablicu stilova za ovu stranicu.
Korak 4. Odaberite drugi element
Nakon što se alatna traka otvori, odabir drugog elementa je jednostavan. Evo tri načina za to:
- Zadržite pokazivač miša iznad retka HTML -a kako biste označili odgovarajući element (potreban je Firefox 34+). Pritisnite HTML za odabir tog elementa.
- Kliknite alat Odabir elementa krajnje lijevo na alatnoj traci: ikona je pokazivač iznad kvadrata. Pomaknite pokazivač miša preko stranice kako biste označili elemente, a zatim kliknite za odabir elementa.
Korak 5. Krećite se kroz kôd
Kliknite bilo gdje u HTML oknu. Za kretanje po kodu koristite strelice lijevo i desno na tipkovnici (potreban je Firefox 39+). Ovo je korisno za premale elemente za ručni odabir.
- Sivi HTML odnosi se na elemente koji nisu prikazani na stranici. To uključuje komentare, određene čvorove poput, i elemente koji su skriveni sa svojstvom prikaza CSS -a.
- Pritisnite strelicu lijevo od spremnika da biste proširili ili sakrili njegov sadržaj. Da biste proširili sav sadržaj, držite pritisnutu tipku alt="Slika" ili opciju.
Korak 6. Potražite element
Potražite traku za pretraživanje (ikona povećala) krajnje desno u retku Krušne mrvice. Kliknite ovo za proširenje, a zatim upišite HTML kôd koji tražite. Dok tipkate, pojavit će se skočni prozor s popisom odgovarajućih elemenata. Pritisnite jedan za odabir tog elementa i pomaknite HTML okno do njegovog koda.
2. dio od 2: Uređivanje HTML -a
Korak 1. Osvježite stranicu za početak u bilo kojem trenutku
Ako ste tek počeli s alatima za web razvojne programere, shvatite da oni ne unose nikakve trajne promjene. Vaše izmjene bit će vidljive samo na vašem zaslonu i to samo dok ne zatvorite stranicu ili je osvježite. Ne ustručavajte se eksperimentirati čak i ako niste sigurni što će se dogoditi.
Korak 2. Dvaput kliknite HTML za uređivanje teksta
Dvaput kliknite redak HTML -a. Upišite novi tekst i pritisnite enter za spremanje promjena.
Korak 3. Pritisnite i držite mrvicu za više opcija
Zapamtite, alatna traka Breadcrumb smještena je između cijelog HTML stabla i gornje alatne trake. Pritisnite i držite bilo koji element u ovom retku da biste otvorili opsežan izbornik. Evo nepotpunog vodiča za ove opcije:
- "Uredi kao HTML" čini čvor i sav njegov sadržaj uređivim u HTML stablu, umjesto da svaki redak treba uređivati zasebno.
- "Copy Inner HTML" kopira sav sadržaj čvora, dok "Copy Outer HTML" također kopira čvor (kao što je ili
- "Zalijepi →" vodi do nekoliko mogućnosti za mjesto lijepljenja, na primjer prije ovog čvora ili nakon prvog djeteta čvora.
- : hover,: active i: focus mijenjaju izgled elementa kada korisnik stupi u interakciju s njim. Točan učinak određuje CSS stilska tablica (može se uređivati s desnog okna).
Korak 4. Povucite i ispustite
Za preuređivanje elemenata u kodu kliknite i držite HTML dok se ne pojavi isprekidana linija. Pomaknite ga gore ili dolje po drvetu i pustite ga kad je isprekidana linija na željenom mjestu.
Za to je potreban Firefox 39 ili noviji
Korak 5. Zatvorite alatnu traku za razvojne programere
Da biste zatvorili sve ove otmjene prozore, samo pritisnite X u krajnjem desnom kutu alatne trake, iznad CSS okna.
Savjeti
- Alatnu traku možete otvoriti i s ovim opcijama glavnog izbornika:
- Windows: Firefox → Web programer → Alati za uključivanje / isključivanje
- Mac ili Linux: Alati → Web programer → Alati za uključivanje / isključivanje
- Firefox 40 predstavio je mogućnost skrivanja CSS okna kako bi vam dao više prostora za uređivanje HTML -a. Potražite ikonu strelice krajnje desno u retku Krušne mrvice, desno od trake za pretraživanje. Kliknite ovu ikonu da biste sakrili CSS okno, a zatim je ponovno kliknite da biste je ponovo proširili.
- CSS okno se također može uređivati, ali to je izvan opsega ovog vodiča. Ovaj članak uči osnove CSS -a.
