Omogočanje in uporaba orodij za razvijalce v brskalniku Microsoft Edge

Če razvijate za splet, so DevTools vaš švicarski nož.: pregled DOM-a in slogov, odpravljanje napak v JavaScriptu, merjenje zmogljivosti in celo emuliranje mobilnih naprav, ne da bi zapustili brskalnik. Microsoft EdgeTa orodja so integrirana kot Microsoft Edge DevTools in omogočajo zelo agilen potek dela za sproti iskanje in odpravljanje težav.

V tem priročniku se takoj posvetite bistvenemuKako odpreti DevTools v brskalniku Edge z bližnjicami in meniji, kaj ponuja vsak zavihek, kako prilagoditi vmesnik, Tricks Omrežna in konzolna orodja za odkrivanje ozkih grl ali napak ter kako jih integrirati s kodo Visual Studio. Našli boste tudi praktična priporočila za delovanje, dostopnost in odzivno testiranje, ki temeljijo na dejanskih delovnih procesih.

Kaj so Edge DevTools in zakaj vas to zanima?

Microsoft Edge DevTools je nabor razvojnih orodij, vgrajenih v brskalnik. ki se prikaže poleg naložene strani. Od tam lahko pregledate HTML/CSS, odpravljate napake v JavaScriptu s prekinitvenimi točkami, si ogledate omrežni promet, analizirate pomnilnik in zmogljivost ter celo urejate datoteke in jih sinhronizirate z datotečnim sistemom pri nastavljanju delovnega prostora.

Kaj lahko počnete rednoPreglejte in spremenite žive sloge, preverite, kje je vsak vir (.html, .css, .js, .png) shranjen in naložen, emulirajte naprave in omrežne pogoje, raziščite težave z dostopnostjo, združljivostjo in varnostjo ter odpravite napake v vmesniku z interaktivno konzolo, ki sprejema izraze v trenutnem kontekstu.

Poleg Edgea so med drugim tudi brskalniki DevTools. (Chrome, Firefox, Safari in Opera) z enakovrednimi funkcijami za pregled, konzolo, omrežje in odpravljanje napak. Bližnjice so običajno enake: F12 ali Ctrl+Shift+I (Cmd+Option+I v sistemu macOS), nato z desno tipko miške kliknite element in izberite »Preglej«.

Če želite izvedeti še več, združuje uradno dokumentacijo (Microsoft Learn, MDN Web Docs) z vadnicami in videoposnetki. Našli boste podrobne vodnike, primere in napredne podrobnosti za obvladovanje vsake plošče.

Kako odpreti DevTools v brskalniku Microsoft Edge

Orodja lahko hitro odprete na več načinov, in tista, ki jo izberete, lahko vpliva na to, katera plošča se prikaže prva. Tukaj so najbolj uporabne bližnjice za vsakodnevno uporabo.

Glavne metode odpiranjaZ desno miškino tipko kliknite kjer koli na strani in izberite »Preglej« (odpre se Elementi z označenim vozliščem), F12 ali Ctrl+Shift+I (Cmd+Option+I v sistemu macOS), da ponovno odprete nazadnje uporabljeno orodje ali pozdravni zaslon, če to počnete prvič.

Akcija	Kaj se odpre
Desni klik > Preglej	elementi z razširjenim DOM-om na izbranem vozlišču
Ctrl + Shift + I (ali Cmd+Option+I)	Nazadnje uporabljeno orodje ali pozdravni zaslon
F12	Nazadnje uporabljeno orodje ali pozdravni zaslon

Zelo praktični dodatni obrazci: V meniju Edge pod »Nastavitve in drugo > Več orodij > Orodja za razvijalce«; neposredne bližnjice konzole (Ctrl+Shift+J / Cmd+Option+J) ali izbira elementa (Ctrl+Shift+C / Cmd+Option+C). Shift+F10 odpre kontekstni meni tipkovnice in vam omogoča izbiro Pregledi.

Akcija	Plošča, ki jo boste videli
Meni Edge > Več orodij > Orodja za razvijalce	Zadnje uporabljeno ali dobrodošlo orodje
Ctrl + Shift + J (Cmd+Option+J)	Konzola
Ctrl + Shift + C (Cmd+Option+C)	elementi s poudarkom na
Shift + F10 in izberite »Preveri«	elementi z razširjenim drevesom

Bližnjice, ki pospešijo vaš potekF12 odpre/zapre orodja za razvijalce, Ctrl+R ponovno naloži orodja, hkrati pa jih ohrani vidne, Ctrl+Shift+C pa aktivira izbirnik elementov. Ne pozabite, da se lahko s tabulatorjem pomikate po strani, da se osredotočite, in nato s Shift+F10 odprete kontekstni meni.

Samodejno odpiranje orodij za razvijalce v vsakem zavihkuEdge se lansira z blagovno znamko --auto-open-devtools-for-tabs. Na primer v Windows: start msedge --auto-open-devtools-for-tabs; v PowerShell: Start-Process -FilePath msedge -ArgumentList --auto-open-devtools-for-tabs; v sistemu macOS: /Applications/Microsoft\ Edge.app/Contents/MacOS/Microsoft\ Edge --auto-open-devtools-for-tabs; v Linux: microsoft-edge --auto-open-devtools-for-tabs.

Pomembno z škorenj- Če imate omogočeno optimizacijo zagona, jo onemogočite v edge://settings/system da bližnjica deluje; lahko tudi onemogočite odpiranje orodij DevTools v istem razdelku s tipko F12, če ne želite, da bi bližnjica delovala.

Vmesnik, postavitev in prilagoditev

• Uporabniški vmesnik DevTools je organiziran v dve glavni področjiVrstica aktivnosti (zgoraj ali levo) in plošča Hitri vpogled (spodaj, s tipko Esc). Vrstica aktivnosti združuje dostop do orodij, nastavitev in dokumentacije; Hitri vpogled vam omogoča vzporedno odpiranje drugega orodja.
• Orodja DevTools lahko zasidrate na desno, levo ali spodajali pa jih odprite v ločenem oknu. Lokacijo spremenite v meniju »Prilagodi in upravljaj orodij za razvijalce« ali z ukaziVrstica aktivnosti je lahko na vrhu (vodoravno), na levi (navpično) ali pa se samodejno prilagodi doku.
• Neodvisna povečava za DevTools in stranIzostrite želeno območje in uporabite Ctrl + / – (Cmd (v sistemu macOS) za povečavo/pomanjšavo ali Ctrl+0 za ponastavitev. V meniju ukazov poiščite »povečava«, da izvedete »Povečava«, »Pomanjšava« ali »Ponastavi raven povečave«.
• Pripeta in ponovno naročena orodjaElementi, Konzola in Viri so fiksni, ostale pa lahko dodate iz »Več orodij«. Če vam primanjkuje prostora, so nekatera združena v tem meniju. Z desno miškino tipko kliknite zavihek, da ga odstranite, ali pa ga premaknete v Hitri ogled in obratno.

Domača naloga	Kako to storiti
Odprite orodje v vrstici dejavnosti	»Več orodij« v vrstici dejavnosti in izberite želeno orodje
Odpri orodje v Hitrem pregledu	Pritisnite Esc, v spodnji vrstici »Več orodij« in izberite orodje
Premikanje med zgornjo vrstico in hitrim ogledom	Z desno miškino tipko kliknite zavihek orodij in izberite premakni gor/dol
Prikličite katero koli ploščo po imenu	Ctrl+Shift+P (Cmd+Shift+P) in vtipkajte »Prikaži« "

Ukazni meni je vaša univerzalna bližnjica (Ctrl+Shift+P): Prikažite ali skrijte plošče, zaženite dejanja in spremenite nastavitve brez navigacije po menijih. Uporabite ga na primer za odpiranje »Spremembe« pri prilagajanju CSS-ja v Elements.

Prilagoditve in poskusiV nastavitvah (F1) spremenite temo, jezik, bližnjice (na voljo je prednastavitev v slogu Visual Studio Code), omejene omrežne profile, poskusne lokacije in naprave. V poskusih omogočite predogledne funkcije, če pa želite najnovejše funkcije, namestite Edge Canary.

Ključna orodja in primeri uporabe v resničnem življenju

• Elementi: Pregled s superpozicijo modela škatleAktivirajte gumb za pregled, da se s kazalcem miške pomaknete nad stran in si ogledate dimenzije, odmik in robove z barvami. Sproti urejajte HTML in CSS, vsilite stanja :hover/:active/:focus in zaznajte konflikte dedovanja ali specifičnosti.
• Urejevalnik CSS z dodatnimi pripomočkiOmogočite/onemogočite deklaracije s potrditvenim poljem, prikažite skrajšane lastnosti za ogled njihovih komponent, dodajte nova pravila in skočite na izvorno datoteko/vrstico. V povezanih zavihkih boste našli »Izračunano«, »Model postavitve/škatla/mreže« in »Viri« (odvisno od brskalnika) za ogled končnih vrednosti in geometrij.
• Konzola: takojšnja izvedba in diagnozaFiltrirajte sporočila, ovrednotite izraze v realnem času in jih združite z razhroščevalnikom, da preverite stanje, ko je koda zaustavljena. Gumbi, kot je »zaustavi ob izjemah«, vas vodijo do problematične vrstice; podrobni kontrolniki vam pomagajo razumeti potek.
• Razhroščevalnik/virne kode: prelomne točke in berljiva kodaNastavite prekinitvene točke, opazujte spremenljivke, preverite sklad klicev in obsege. Če je koda minimizirana, uporabite ikono zavitih oklepajev. {} da ga »olepšajo« in spremenijo v drevo, po katerem se je mogoče premikati.
• Omrežje: Rentgenska slika zahtev in učinkovitosti delovanjaOdprite zavihek Omrežje, znova naložite in preglejte bistvene stolpce: Velikost (optimizira slike in pomanjša CSS/JS), Čas (na to vplivata strežnik in razdalja) in Kaskada (vrstni red in trajanje nalaganja). Z desno miškino tipko kliknite, da prilagodite stolpce, in v nogi strani označite »Dokončaj« za skupni znesek.
• Praktični nasveti za uspešnostNajprej izmerite na mobilni napravi brez predpomnjenja in si prizadevajte za razumen referenčni čas od 2 do 4 sekund; na namiznem računalniku ponovite tako brez kot s predpomnjenjem. Zmanjšajte CSS/JS, da zmanjšate količino, in po možnosti združite vsako vrsto v eno samo datoteko, da zmanjšate število zahtev (pomoč pri orodjih, kot je Closure Compiler).
• Zmogljivost in pomnilnikBeležite profile za iskanje ozkih grl, dragih postavitev in dolgotrajnih opravil. Hitrejše spletno mesto ohranja uporabnike, izboljšuje delovanje in povečuje produktivnost. SEO in običajno se bolje pretvarja. V pomnilniku najde puščanja in predmete, ki ne bi smeli ostati aktivni.
• Uporaba in shranjevanjePregleduje in ureja piškotke, lokalno shrambo, indeksirano podatkovno bazo in predpomnilnike. Uporabno za odpravljanje napak v sejah, zastavicah ali pravilnikih o vztrajnosti.
• Emulacija naprav in omrežij: Preklopite v mobilni način, prilagodite vidno polje in DPIin simulirajte izgube 3G/4G ali povezljivosti. Preizkusite realistično uporabniško izkušnjo, ne da bi zapustili namizje.
• Odpravljanje napak v primerih s konzolo in razhroščevalnikomZačasno ustavite, sprožite napako in Edge vas bo vodil do natančne črte. Z gumbi »korak« sledite toku in popravite spremenljivke iz konzole, da takoj potrdite rešitve.
• Pregledovanje oglasov z orodji DevTools: v omrežju filtriraj po ads? da vidite, ali vaša stran izdaja zahteve. Koda 403 običajno označuje pravilnike ali neodobreno spletno mesto; koda 200 brez prikaza označuje varnostne težave. ads.txtČe vidite ERR_BLOCKED_BY_CLIENT, verjetno blokator preprečuje prenos adsbygoogle.jsTipične napake pri preverjanju veljavnosti vključujejo sporočila, kot so: adsbygoogle.push() error: Fluid responsive ads must be at least 250px wide: availableWidth=0.
• Bližnjice in meniji v drugih brskalnikihV Firefoxu so Inspector/Debugger/Console pod »Web Developer«; v Safariju aktivirajte meni Development v Nastavitve > Napredno. Filozofija uporabe je podobna kot v Edgeu in Chromu.
• Novice z IA v kromuFunkcija »Vpogledi v konzolo« pojasnjuje napake konzole, predlaga vzroke in možne rešitve. Aktivirate jo v Nastavitvah > »Inovacije umetne inteligence« in zahteva brskalnik v angleščini, starost nad 18 let in aktivno sejo. google s sinhronizacijo. Edge ima podobna orodja za razlago sporočil in vredno je pregledati posledice za zasebnost: nekateri podatki brskalnika in spletnega mesta se lahko uporabijo za izboljšanje modelov; nad temi možnostmi imate nadzor.

Opombe o obvestilih o zasebnostiPlatforme, kot je Reddit, prikazujejo pasice s piškotki in pravilniki, ki lahko vplivajo na nalaganje skriptov ali virov, dokler se z njimi ne strinjate. Če v vaših testih nekaj ne deluje, preverite, ali zahteve blokira soglasje.

Orodja za razvoj Edge v kodi Visual Studio

Razširitev »Microsoft Edge Tools« integrira orodja DevTools v VS Code z vgrajenim brskalnikom (Edge DevTools: Browser) in zavihki orodij (Elementi, Konzola itd.). Odprete lahko lokalno stran, zaženete primerek brez odpravljanja napak ali začnete projekt s konfiguracijo.

• Neposredna možnost za datoteke HTMLV Raziskovalcu kode VS z desno miškino tipko kliknite .html in izberite »Odpri z Edgeom > Odpri brskalnik z orodji za razvijalce«. Orodja za razvijalce boste videli v načinu za odpravljanje napak poleg upodobljene strani in vrstice s tipičnimi kontrolniki (pavza, korak, ponovni zagon).
• Zaženi primerek (brez odpravljanja napak)- V vrstici dejavnosti odprite pogled »Orodja Microsoft Edge« in tapnite »Zaženi primerek«. Edge DevTools in Edge DevTools: Odprl se bo brskalnik, ki bo prikazal domačo stran. V naslovno vrstico vgrajenega brskalnika prilepite lokalno pot ali URL (npr. http://localhost:8080).
• Zaženi projekt (z launch.json)Če vaša mapa zahteva strežnik, ustvarite zagonsko datoteko z ukazom »Generate launch.json« in uredite ključe »url« s svojim naslovom (npr. http://127.0.0.1:8080). Shranite in uporabite »Začni projekt«, da aplikacijo odprete neposredno z vdelanimi orodji DevTools.
• Preslikava datotek in zrcalno urejanje CSS-ja- Ko lahko DevTools preslika prenesene vire v vašo odprto mapo, se spremembe CSS v Elements odražajo v lokalnih izvornih datotekah. Če ni ustrezne mape ali dodeljenega zaupanja, počistite polje Zrcalno urejanje, da boste lahko eksperimentirali brez napak, ali pa odprite pravilno mapo in jo označite kot varno.
• Razlike med URL-ji in potmi datotekPri lokalnih poteh urejevalnik takoj ve, kam mora pisati; pri oddaljenih URL-jih morate odpreti mapo z ustreznimi izvornimi kodami, da omogočite zrcalo. Sicer boste lahko pregledovali in urejali »v živo«, vendar brez ohranjanja.
• Zaprite primerke, ko končate: Z zavihka (ikona »x«), iz razdelka »Cilji« v razširitvi ali z zaustavitvijo odpravljanja napak, če je aktivno. Vse seje lahko končate tudi tako, da zaprete mapo ali okno VS Code.
• Nekaj, kar si je vredno zapomnitiZavihek »Edge DevTools: Browser« vključuje lastno vrstico za emulacijo naprave, ki je uporabna za ogled mobilnih stanj, ne da bi zapustili VS Code, in omogoča odpiranje datotek (kot so .js) iz Raziskovalca med odpravljanjem napak, da lahko sproti izvajate popravke.
• Vse zgoraj navedeno vam omogoča zanesljiv potek delaHitro odprite, pregledajte, izmerite, odpravite napake in prilagodite vmesnik po svojih željah. Če se integrirate tudi z VS Code, lahko izvajate iteracije z lokalnim urejanjem in preslikavo. Če pa delate z oglasi ali API-ji, vam zavihek Omrežje in konzola prikažeta natančno lokacijo vsake težave.