Omogućavanje i korištenje DevTools alata u programu Microsoft Edge

Ako razvijate za web, DevTools su vaš švicarski nožić.: pregledajte DOM i stilove, debugirajte JavaScript, mjerite performanse, pa čak i emulirajte mobilne uređaje bez napuštanja preglednika. Microsoft EdgeOvi uslužni programi dolaze integrirani kao Microsoft Edge DevTools i omogućavaju vrlo agilan tijek rada za lociranje i ispravljanje problema u hodu.

U ovom vodiču idete direktno na najvažniju stvarKako otvoriti DevTools u Edgeu pomoću prečica i menija, šta svaka kartica nudi, kako prilagoditi interfejs, trikovi Mrežni i konzolni alati za otkrivanje uskih grla ili grešaka i kako ih integrirati s Visual Studio kodom. Također ćete pronaći praktične preporuke za performanse, pristupačnost i responzivno testiranje zasnovano na stvarnim radnim procesima.

Šta su Edge DevTools i zašto vas to zanima?

Microsoft Edge DevTools je skup alata za razvoj ugrađenih u preglednik. koji se pojavljuje pored učitane stranice. Odatle možete pregledati HTML/CSS, otkloniti greške u JavaScriptu pomoću tačaka prekida, pregledati mrežni promet, analizirati memoriju i performanse, pa čak i uređivati ​​datoteke i sinhronizirati ih sa sistemom datoteka prilikom postavljanja radnog prostora.

Šta možete redovno raditiPregledajte i modificirajte stilove uživo, provjerite gdje je svaki resurs (.html, .css, .js, .png) pohranjen i učitan, emulirajte uređaje i mrežne uvjete, istražite probleme s pristupačnošću, kompatibilnošću i sigurnošću te otklonite greške u prednjem dijelu pomoću interaktivne konzole koja prihvaća izraze u trenutnom kontekstu.

Pored Edgea, drugi preglednici uključuju DevTools. (Chrome, Firefox, Safari i Opera) sa ekvivalentnim funkcijama za inspekciju, konzolu, mrežu i otklanjanje grešaka. Prečice su uglavnom iste: F12 ili Ctrl+Shift+I (Cmd+Option+I na macOS-u), zatim desni klik na element i odabir "Inspect" (Pregledaj).

Da saznate još više, kombinuje službenu dokumentaciju (Microsoft Learn, MDN Web Docs) sa tutorijalima i video zapisima. Pronaći ćete detaljne vodiče, primjere i napredne detalje za savladavanje svakog panela.

Kako otvoriti DevTools u Microsoft Edgeu

Postoji nekoliko brzih načina za otvaranje alata, a onaj koji odaberete može utjecati na to koji će se panel prvi pojaviti. Evo najkorisnijih prečica za svakodnevnu upotrebu.

Glavne metode otvaranjaKliknite desnim tasterom miša bilo gde na stranici i „Pregledaj“ (otvara Elemente sa označenim čvorom), F12 ili Ctrl+Shift+I (Cmd+Option+I na macOS-u) da biste ponovo otvorili poslednji korišćeni alat ili ekran dobrodošlice ako vam je to prvi put.

Acción	Šta se otvara
Desni klik > Pregledaj	elementos sa proširenim DOM-om na odabranom čvoru
Ctrl + Shift + I (ili Cmd+Option+I)	Posljednji korišteni alat ili ekran dobrodošlice
F12	Posljednji korišteni alat ili ekran dobrodošlice

Vrlo praktični dodatni obrasciIz Edge menija pod "Postavke i više > Više alata > Alati za razvojne programere"; direktne prečice konzole (Ctrl+Shift+J / Cmd+Option+J) ili odabir stavke (Ctrl+Shift+C / Cmd+Option+C). Shift+F10 otvara kontekstni meni tastature i omogućava vam da odaberete Pregledaj.

Acción	Panel koji ćete vidjeti
Edge meni > Više alata > Alati za razvojne programere	Posljednji korišteni ili dobrodošao alat
Ctrl + Shift + J (Cmd+Option+J)	Konzola
Ctrl + Shift + C (Cmd+Option+C)	elementos s fokusom na
Shift + F10 i odaberite "Pregledaj"	elementos sa proširenim drvetom

Prečice koje ubrzavaju vaš tokF12 otvara/zatvara DevTools, Ctrl+R ponovo učitava elemente, a istovremeno ih ostavlja vidljivima, a Ctrl+Shift+C aktivira selektor elemenata. Zapamtite, možete se kretati pomoću Tab-a da biste fokusirali stranicu, a zatim otvoriti kontekstni meni pomoću Shift+F10.

Automatsko otvaranje DevTools-a u svakoj karticiEdge se lansira s brendom --auto-open-devtools-for-tabs. Na primjer u Windows: start msedge --auto-open-devtools-for-tabs; en PowerShell: Start-Process -FilePath msedge -ArgumentList --auto-open-devtools-for-tabsna macOS-u: /Applications/Microsoft\ Edge.app/Contents/MacOS/Microsoft\ Edge --auto-open-devtools-for-tabs; en Linux: microsoft-edge --auto-open-devtools-for-tabs.

Važno sa boot- Ako imate omogućenu optimizaciju pokretanja, onemogućite je u edge://settings/system da bi prečica radila; također možete onemogućiti F12 da otvara DevTools u istom odjeljku ako ne želite da ta prečica radi.

Interfejs, izgled i prilagođavanje

• DevTools korisnički interfejs je organizovan u dva glavna područjaTraka aktivnosti (gore ili lijevo) i panel Brzi pregled (dolje, sa Esc). Traka aktivnosti koncentrira pristup alatima, postavkama i dokumentaciji; Brzi pregled vam omogućava paralelno otvaranje drugog alata.
• DevTools možete usidriti desno, lijevo ili doljeili ih otvorite u zasebnom prozoru. Promijenite lokaciju iz menija "Prilagodi i kontroli DevTools" ili pomoću naredbeTraka aktivnosti može biti na vrhu (horizontalno), lijevo (vertikalno) ili se automatski prilagoditi docku.
• Nezavisno zumiranje za DevTools i stranicuPazite da se fokusirate na željeno područje i koristite Ctrl + / – (cmd na macOS-u) za zumiranje ili Ctrl+0 za resetiranje. U meniju komandi potražite „zoom“ da biste izvršili „Zoom In“, „Zoom Out“ ili „Reset Zoom Level“.
• Zakačeni i alati koji se mogu ponovo naručitiElementi, Konzola i Izvori su fiksni, ali ostale možete dodati iz "Više alata". Ako nemate dovoljno prostora, neki su grupirani pod tim menijem. Kliknite desnim tasterom miša na karticu da biste je uklonili ili je premjestili u Brzi pregled i obrnuto.

Domaći zadatak	Kako to učiniti
Otvorite alat u traci aktivnosti	„Više alata“ u traci aktivnosti i odaberite željeni
Otvorite alat u Brzom pregledu	Pritisnite Esc, "Više alata" u donjoj traci i odaberite alat
Prelazak između gornje trake i Brzog pregleda	Kliknite desnim klikom miša na karticu alata i odaberite pomicanje gore/dolje
Pozivanje bilo kojeg panela po imenu	Ctrl+Shift+P (Cmd+Shift+P) i upišite "Prikaži" "

Komandni meni je vaša univerzalna prečica (Ctrl+Shift+P): Prikažite ili sakrijte panele, pokrenite radnje i promijenite postavke bez navigacije kroz menije. Koristite ga, na primjer, za otvaranje "Promjena" prilikom podešavanja CSS-a u Elementsima.

Prilagođavanja i eksperimentiU Postavkama (F1) promijenite temu, jezik, prečice (postoji unaprijed postavljena postavka u stilu Visual Studio Code-a), ograničene mrežne profile, simulirane lokacije i uređaje. U Eksperimentima omogućite funkcije pregleda, a ako želite najnovije funkcije, instalirajte Edge Canary.

Ključni alati i primjeri upotrebe iz stvarnog života

• Elementi: Inspekcija sa superpozicijom modela kutijeAktivirajte dugme za pregled da biste zadržali pokazivač iznad stranice i vidjeli dimenzije, padding i margine s bojama. Uredite HTML i CSS u hodu, prisilite stanja :hover/:active/:focus i otkrijte konflikte nasljeđivanja ili specifičnosti.
• CSS editor sa dodatnim alatimaOmogućite/onemogućite deklaracije pomoću polja za potvrdu, prikažite skraćena svojstva za pregled njihovih komponenti, dodajte nova pravila i pređite na izvornu datoteku/liniju. U povezanim karticama pronaći ćete "Izračunato", "Model rasporeda/kutije/mreže" i "Izvori" (u zavisnosti od pretraživača) za pregled konačnih vrijednosti i geometrija.
• Konzola: trenutno izvršenje i dijagnozaFiltrirajte poruke, evaluirajte izraze u realnom vremenu i kombinujte ih sa debuggerom kako biste provjerili stanje kada je kod pauziran. Dugmad poput "pauziraj na izuzecima" vode vas do problematične linije; detaljne kontrole vam pomažu da razumijete tok.
• Debugger/Izvorni kodovi: Prekidne tačke i čitljiv kodPostavite tačke prekida, pratite varijable, provjerite stek poziva i opsege. Ako je kod minimiziran, koristite ikonu vitičastih zagrada. {} da ga "uljepšaju" i pretvore u drvo kojim se može kretati.
• Mreža: Rendgenski snimak zahtjeva i performansiOtvorite karticu Mreža, ponovo učitajte stranicu i pregledajte bitne kolone: ​​Veličina (optimizira slike i minimizira CSS/JS), Vrijeme (server i udaljenost utječu na ovo) i Kaskada (redoslijed i trajanje učitavanja). Kliknite desnim tasterom miša da biste prilagodili kolone, a u podnožju označite "Završi" za ukupan iznos.
• Praktični savjeti za performansePrvo izmjerite na mobilnom uređaju bez keširanja i ciljajte na razumnu referentnu vrijednost od 2 do 4 sekunde; na desktop računaru ponovite i bez i sa keširanjem. Minimizirajte CSS/JS kako biste smanjili obim i grupirajte svaki tip u jednu datoteku kad god je to moguće kako biste smanjili broj zahtjeva (alati poput Closure Compiler pomoći).
• Performanse i memorijaZabilježite profile kako biste pronašli uska grla, skupe rasporede i zadatke koji oduzimaju puno vremena. Brža stranica zadržava korisnike, poboljšava performanse i povećava produktivnost. SEO i obično bolje konvertuje. U memoriji pronalazi curenja i objekte koji ne bi trebali ostati aktivni.
• Primjena i skladištenjePregledava i uređuje kolačiće, lokalnu pohranu (localStorage), indeksiranu bazu podataka (IndexedDB) i predmemorije. Korisno za sesije otklanjanja grešaka, zastavice ili politike perzistencije.
• Emulacija uređaja i mrežePrebacite se u mobilni način rada, prilagodite prikaz i DPIi simulirajte gubitke 3G/4G ili veze. Testirajte realistično korisničko iskustvo bez napuštanja radne površine.
• Slučajevi otklanjanja grešaka pomoću konzole i debuggeraPauzirajte, aktivirajte grešku i Edge će vas voditi do tačne linije. Koristite dugmad "korak" da biste pratili tok i ispravljali varijable iz konzole kako biste odmah validirali rješenja.
• Pregledavanje oglasa pomoću DevTools-a: u Mreži filtriraj po ads? da vidite da li vaša stranica šalje zahtjeve. Kod 403 obično ukazuje na pravila ili neodobrenu stranicu; kod 200 bez prikaza ukazuje na sigurnosne probleme. ads.txt. Ako vidite ERR_BLOCKED_BY_CLIENTVjerovatno bloker sprečava preuzimanje adsbygoogle.jsTipične greške u validaciji uključuju poruke kao što su: adsbygoogle.push() error: Fluid responsive ads must be at least 250px wide: availableWidth=0.
• Prečice i meniji u drugim preglednicimaU Firefoxu, Inspector/Debugger/Console se nalaze pod "Web Developer"; u Safariju, aktivirajte meni Development iz Preferences > Advanced. Filozofija korištenja je slična Edgeu i Chromeu.
• Vijesti sa IA u hromuFunkcija „Uvidi u konzolu“ objašnjava greške u konzoli, predlaže uzroke i moguća rješenja. Aktivira se u Postavkama > „AI inovacije“ i zahtijeva preglednik na engleskom jeziku, osobe starije od 18 godina i aktivnu sesiju. Google sa sinhronizacijom. Edge ima slične alate za objašnjavanje poruka, a vrijedi pregledati implikacije na privatnost: neki podaci preglednika i web-lokacije mogu se koristiti za poboljšanje modela; vi imate kontrolu nad ovim opcijama.

Napomene o obavještenjima o privatnostiPlatforme poput Reddita prikazuju banere o kolačićima i pravilima koji mogu utjecati na učitavanje skripti ili resursa dok se ne složite. Ako nešto ne funkcionira u vašim testovima, provjerite blokira li pristanak zahtjeve.

Edge DevTools unutar Visual Studio Code-a

Ekstenzija „Microsoft Edge Tools“ integriše DevTools u VS Code s ugrađenim preglednikom (Edge DevTools: Preglednik) i karticama alata (Elementi, Konzola, itd.). Možete otvoriti lokalnu stranicu, pokrenuti instancu bez otklanjanja grešaka ili započeti projekt s konfiguracijom.

• Direktna opcija za HTML datotekeU VS Code Exploreru, kliknite desnim tasterom miša na .html i odaberite "Otvori s Edgeom > Otvori preglednik s DevToolsima". Vidjet ćete DevTools u načinu rada za otklanjanje grešaka pored prikazane stranice i trake s tipičnim kontrolama (pauza, korak, ponovno pokretanje).
• Pokreni instancu (bez otklanjanja grešaka)- Otvorite prikaz „Microsoft Edge Tools“ u traci aktivnosti i dodirnite „Launch Instance“. Edge DevTools i Edge DevTools: Otvorit će se preglednik s početnom stranicom. U adresnu traku ugrađenog preglednika zalijepite lokalnu putanju ili URL (npr. http://localhost:8080).
• Pokreni projekat (sa launch.json)Ako vaša mapa zahtijeva server, kreirajte datoteku za pokretanje pomoću opcije "Generate launch.json" i uredite ključeve "url" svojom adresom (npr. http://127.0.0.1:8080). Sačuvajte i koristite "Pokreni projekat" da biste direktno otvorili aplikaciju sa ugrađenim DevTools-om.
• Mapiranje datoteka i uređivanje CSS-a ogledalom- Kada DevTools može mapirati preuzete resurse u vašu otvorenu mapu, CSS promjene u Elementsima se odražavaju u lokalnim izvornim datotekama. Ako nema odgovarajuće mape ili dodijeljenog povjerenja, poništite odabir polja Mirror Edit da biste eksperimentirali bez grešaka ili otvorite ispravnu mapu i označite je kao sigurnu.
• Razlike između URL-ova i putanja datotekaS lokalnim putanjama, editor odmah zna gdje treba pisati; s udaljenim URL-ovima, potrebno je otvoriti mapu koja sadrži ekvivalentne izvore da biste omogućili mirror. U suprotnom, moći ćete pregledavati i uređivati ​​"uživo", ali bez zadržavanja.
• Zatvorite instance kada završiteSa kartice (ikona "x"), iz odjeljka "Ciljevi" u ekstenziji ili zaustavljanjem otklanjanja grešaka ako je aktivno. Također možete zatvoriti mapu ili prozor VS Code da biste završili sve sesije.
• Nešto vrijedno pamćenjaKartica „Edge DevTools: Browser“ uključuje vlastitu traku za emulaciju uređaja, korisnu za pregled mobilnih stanja bez napuštanja VS Code-a, a možete i otvarati datoteke (kao što su .js) iz Explorera tokom otklanjanja grešaka kako biste vršili ispravke u hodu.
• Sve navedeno vam daje solidan radni procesBrzo otvorite, pregledajte, izmjerite, otklonite greške i prilagodite interfejs prema svojoj želji. Ako se integrirate i sa VS Code-om, možete iterirati s lokalnim uređivanjem i mapiranjem. A ako radite s oglasima ili API-jima, kartica Mreža i Konzola vam daju tačnu lokaciju svakog problema.