DevTools Showdown Edge's F12 vs Firefox vs Chrome

Microsoft Edge izstrādātāju rīki, jaunā Windows 10 noklusējuma pārlūkprogramma, ieguva modernu dizainu un dažas jaunas funkcijas, salīdzinot ar tās priekšteci - Internet Explorer 11 F12 Dev rīki.

Jautājums par to, vai Microsoft Edge dev rīki novērtē savus populāros konkurentus - dev rīkus citās mūsdienu pārlūkprogrammās, piemēram, Mozilla Firefox un Google Chrome, protams, rodas daudzu izstrādātāju prātos..

Šajā ziņojumā mēs cenšamies atbildēt uz šo jautājumu un noskaidrot, vai Edge F12 Dev Tools ir patiešām vērts izmantot. Mēs salīdzināsim tās funkcijas ar Firefox izstrādātāju rīku un Google Chrome DevTools iezīmēm.

Atveriet Dev Tools

Nospiežot F12, tiek atvērti izstrādātāju rīki visos 3 gadījumos: izstrādātāju rīki Firefox, DevTools pārlūkā Chrome un F12 Dev Tools Microsoft Edge. Tas ir īsinājumtaustiņš, kur oficiālais Edge F12 Dev rīku nosaukums nāk no.

Atverot Edge Dev rīkus, jūs varat uzreiz izbaudīt vienu no tās pazīstamākajiem trūkumiem: pašlaik tas ir nav iespējams piesaistīt rīkus esošam logam. Kamēr jūs varat sekot tam, kas notiek ekrānā Firefox izstrādātāju rīkos un Chrome DevTools, pieskaroties ekrāna apakšdaļā esošajam dev rīku logam, jūs (pašlaik) nevarat darīt to ar Edge.

Microsoft izstrādātāji apgalvo, ka šo problēmu atrisinās nākotnes atjauninājumā.

Pārbaudiet DOM

The DOM Explorer rīks (saīsne: CTRL + 1) ir pirmā Microsoft Edge F12 Dev rīku cilne. Tās izkārtojums un vispārējais dizains ir diezgan līdzīgs Elements cilnes Chrome un Inspektors cilne Firefox, tomēr iespējas acīmredzami atšķiras.

Edge varat apskatīt sniegto HTML dokumentu, saistītos CSS stilus un katram elementam reģistrētos notikumu apstrādātājus. Mazo grafiku par CSS kārbas modeli var atrast arī ar aprēķinātajām vērtībām, kas jau ir labi zināmas no diviem konkurējošiem pārlūkiem.

Jūs varat eksperimentēt ar CSS noteikumiem dzēšot pašreizējās un pievienojot jaunas, un jūs varat redzēt savu apkopotas izmaiņas uz atsevišķas apakšvirsmas, ko sauc “Izmaiņas” (tas atrodas kreisajā pusē). Pēdējais ir līdzeklis, kas nav iebūvēts Firefox Developer un Chrome DevTools. Tas var sniegt ātru atsaukumu lietotājam, tāpēc tas ir patiešām noderīgs risinājums.

Firefox izstrādātāju rīkos ir dažas funkcijas, kuras ne Edge, ne Google Chrome pašlaik nesniedz, bet var ievērojami palīdzēt dizainera dzīvē: Fontu un animācijas analizatora rīkus.

Edge tur ir atdzist krāsu atlasītājs tomēr tas var nedaudz kompensēt lietotāju par to.

Mijiedarbojas ar JavaScript

The Konsole cilne (saīsne: CTRL + 2) Microsoft Edge ļauj sadarboties ar jūsu vietnes JavaScript, tāpat kā Firefox un Chrome Dev rīki. Visi trīs ļauj jums sekot JavaScript kļūdām reālā laikā, un jūs varat arī tos analizēt, ievadot savu ievadi.

Edge F12 Dev rīku konsoles rīks ir jauks automātiskās pabeigšanas funkcija kas palīdz jums ar komandām, tomēr šķiet mazāk zinoši salīdzinājumā ar programmu Firefox un Chrome Dev Tools.

Mala atdala kļūdas, brīdinājumus un ziņojumus kas ir liels atbalsts, lai gan tas nav kaut kas, ko pārējiem diviem instrumentiem nav.

Šķiet, ka Firefox konsole ir visvairāk profesionāla no trim dev rīkiem, kā tas ir arī atsevišķi rāda citas problēmas: tīklu, CSS, drošības kļūdas un žurnālu ziņojumus, un ļauj jums sazināties ar tiem caur Konsoles saskarne, ne tikai ar JavaScript kļūdām.

Saprast, ko dara jūsu kods

The Atkļūdotājs rīks (saīsne: CTRL + 3) palīdz jums saprast, kas notiek ar jūsu kodu, atrodoties iespējamām kļūdām. Varat iestatīt pulksteņus un pārtraukuma punktus un skatīt zvanu skapjus.

Pulksteņu rūtī tiek parādītas mainīgās vērtības, Callstack režīms rāda funkciju zvanu ķēdi, kas noveda pie pašreizējā stāvokļa, un Breakpoints režīmā tiek parādīts iestatīto pārtraukumu saraksts..

Edge F12 Dev rīki ļauj jums apturēt kodu izpildes laikā un soli pa līniju pa līniju. Jums ir arī iespēja uzlabot apkopotā vai rediģētā JavaScript faila lasāmību, un jūs varat atkļūdot dažādus resursus (JavaScript, paplašinājumi uc) pa vienam.

Firefox un Chrome DevTools nodrošina visas šīs funkcijas, tāpēc Edge nepiedāvā izņēmuma atkļūdošanas pieredzi, bet nodrošina lietotājam stabilu un uzticamu rīku, kas ir līdzvērtīgs konkurentiem.

Veikt apskatīt pārlūkprogrammas servera komunikāciju

The Tīkls rīks (Shortcut: CTRL + 4) ir pilnībā pārveidots Microsoft Edge kopš Internet Explorer 11. Ar šo ērto rīku jūs varat sekojiet saziņai starp serveri un pārlūkprogrammu, un pārbaudīt individuālos pieprasījumus.

Jūs varat filtrē rezultātus pēc satura veida piemēram, stilu, attēlus, medijus, fontus, XHR un daudzus citus. Jūs varat arī atkļūdot AJAX izmantojot tīkla rīku.

Edge un Firefox tīkla cilne piedāvā diezgan līdzīgas iespējas un lietotāja interfeisu. Abos ir lietotājam draudzīga sānjoslas rūts, kas ļauj apskatīt atlasītā resursa HTTP galveni, HTTP struktūru, parametrus, saistītos sīkfailus un laika vienumu pa vienībām.

Chrome DevTools tīkla cilnei nav šāda paneļa, bet, noklikšķinot uz pieprasījumiem pa vienam, jūs varat redzēt to pašu informāciju. Tas ir mazāk intuitīvs risinājums.

Izsekot lēnās lappuses

The Veiktspēja cilne (saīsne: CTRL + 5) palīdz saprast lēna tīmekļa lapas iemeslus. Izmantojot Performance rīku, Microsoft veica milzīgu lēcienu, apvienojot iepriekšējo UI atsaucība un profils rīki, lai izveidotu visu skriptu tiešo skatu un vizualizētu veiktspēju.

Šis ērts rīks sniedz jums atskaites dažāda veida CPU izmantošana, dod jums ieskatu jūsu vietnes rāmja krāsā, un tas ir iespējams arī izolēt dažādus lietotāja scenārijus, uzstādot uz laika skalas etiķetes.

Pārbaudes laikā mēs noskaidrojām, ka Edge veiktspējas rīks sniedza mums vairāk informācijas par ātruma jautājumiem nekā Firefox izstrādātājs vai Chrome DevTools. Darbības cilnes Edge lietotāja interfeiss Edge ir diezgan labi izstrādāts, palīdzot mums izmantot daudzas vizuālas norādes, un tas ir salīdzinoši viegli lietojams. Ja vēlaties uzzināt vairāk par to, kā to izmantot, izlasiet detalizētus dokumentus.

Diagnosticējiet atmiņas problēmas

The Atmiņa rīks (saīsne: CTRL + 6) ļauj atrast atmiņas noplūdi kas var arī palēnināt jūsu tīmekļa lapu, turklāt var ietekmēt stabilitāti jūsu vietnes.

Izmantojot skaistu grafiku, jūs varat viegli saprast, kur pieaug jūsu atmiņas izmantošana, un jūs varat veikt momentuzņēmumus noteiktos punktos, kas ļauj analizēt atmiņas izmantošanu. Jūs varat arī salīdzināt divus momentuzņēmumus, kas veikti dažādos punktos lapas dzīves cikla laikā, lai izprastu atšķirību starp tām.

Chrome DevTools ir arī jauka atmiņas profila cilne Profili, bet Firefox izstrādātājs šo funkciju pēc noklusējuma nenodrošina, bet, ja vēlaties, varat lejupielādēt un instalēt tādus papildinājumus. Chrome DevTools atmiņas profils ir diezgan progresīvs un piedāvā vairāk funkciju nekā Edge, piemēram, tas ļauj jums ierakstīt JavaScript objektu piešķiršanu laika gaitā kas var palīdzēt izdalīt atmiņas noplūdes.

Pārbaudiet savu vietni dažādos ekrāna izmēros

The Emulācija rīks (saīsne: CTRL + 7) ļauj pārbaudīt jūsu vietni dažādos apstākļos. Jūs varat izvēlēties no diviem pārlūka profiliem: Desktop un Windows 10 Mobile, un no daudziem dažādiem lietotāju aģentiem, ieskaitot visas Internet Explorer darbvirsmas un mobilās versijas atpakaļ uz IE6, turklāt daudzi no Edge konkurentiem, Chrome, Firefox, Safari utt..

Interesanti, ka jums ir iespēja veikt a apskatiet savu lapu kā Bing Bot. Jūs varat arī emulēt GPS, un iestatiet dažādas rezolūcijas un orientācijas.

Firefox izstrādātāju rīkiem nav ierīces emulācijas rīka, bet Chrome DevTools ir tik sarežģīts emulators, ka Edge var ar to konkurēt.

Piemēram, Chrome emulācijas ekrānam ir precīzs režģis, kurā ievietots emulētais skats, un jūs ne tikai varat izvēlēties no pārlūka profiliem un lietotāju aģentiem, bet arī no daudzām ierīcēm, piemēram, dažādas versijas iPhone vai Samsung Galaxy un daudziem citiem. Chrome DevTools emulatoram ir arī ērts Tālummaiņas opcija un jūs varat pārbaudīt vietni dažādos tīklos, piemēram, 3G, 4G, DSL, WiFi utt.

Kopsavilkums

Kopumā šķiet, ka Microsoft Edge F12 Dev rīki ir pārsteidzoši labi. Tā nodrošina iezīmes, kas ir diezgan līdzīgas citu moderno pārlūkprogrammu populārajām tīmekļa izstrādes rīkiem. Ir divas jomas, kurās Edge F12 Dev rīki ir diezgan spēcīgi: lietotāja interfeiss tas ir patiešām intuitīvs, lietotājam draudzīgs un labi izstrādāts, un veiktspējas diagnostikas rīki.

Attiecībā uz šīm divām iezīmēm var būt vērts apsvērt pāreju uz Edge vai vismaz testēt to. Lielākais trūkums ir tas, ka nav iespējams pieslēgt dev rīkus ekrāna apakšdaļai, bet cerēsim, ka Microsoft ātri atrisinās šo problēmu.