Tīmekļa lapas atkļūdošanas kļūda. Skripta kļūdas pārlūkprogrammā Internet Explorer. Izslēgšanas iemesli un metodes. SQL vaicājumu profilēšana Atkļūdojiet tīmekļa lapu
Pārlūkojot internetu Interneta pārlūkprogramma Explorer var parādīt ziņojumus, ka lapā ir kļūdas, un tas var netikt parādīts pareizi. Apskatīsim dažus veidus, kā novērst šo problēmu.
Instrukcija
Ir, protams, arī citi – noteikti pieminēšu.
Firebug pārlūkprogrammai Firefox
Es precīzi nezinu, vai firebug citu izstrādātāju rīku priekštecis, taču tas noteikti ir līdz šim populārākais, ērtākais un funkcionālākais.
Firebug ir Firefox papildinājums, kas nozīmē, ka tas ir jālejupielādē no Firefox pievienojumprogrammu vietnes un jāinstalē.
Lai izsauktu firebug, vienkārši nospiediet taustiņu F12.
Šī papildinājuma funkcijas:
- Dinamiski mainīga HTML pārbaude un rediģēšana;
- CSS rediģēšana lidojumā;
- JavaScript atkļūdošana komandrinda izpildīt skriptus;
- Tīkla pieprasījumu uzraudzība - jūs varat redzēt failu un skriptu lielumu un lejupielādes laiku, pieprasījumu galvenes;
- DOM parsētājs.
Jūs varat runāt par šīm funkcijām detalizēti ilgu laiku, bet es domāju, ka tās ir zināmas visiem mūsu lasītājiem, un, ja nē - Detalizēta informācija ir Firebug mājaslapā vai tas pats Iļjas Kantora tulkojumā.
Papildus pašam firebug jums var būt nepieciešams noderīgs losjons viņam - ugunscepums, ar kuru (pārsteigums:-) var apskatīt un modificēt sīkdatnes.
Tīmekļa izstrādātāja rīkjosla pārlūkprogrammai Firefox
Vēl viens noderīgs papildinājums Ognelim. Tas izskatās šādi:
Ejam cauri punktiem.
Atspējot
Ļauj izslēgt JavaScript, atspējot kešatmiņas izmantošanu, kas ir ļoti noderīgi izstrādes laikā (ļauj pārliecināties, ka lapa tiek ielādēta ar jaunākie atjauninājumi), atceliet lapā izmantotās krāsas un nomainiet tās ar standarta krāsām, atspējojiet sūtīšanu novirzītāja galvenē (lapā, no kuras tika veikta pāreja).
Sīkdatnes
Noderīga iespēja darbam ar sīkdatnēm: tās var apskatīt, dzēst, bloķēt un pievienot.
css
Šajā izvēlnē ir izstrādātāja rīkjoslas stilīgākā funkcija — CSS rediģēšana lidojumā. Turklāt ir iespējams apskatīt css, atspējot utt., Un tā tālāk. Manuprāt, tastatūras īsinājumtaustiņu klātbūtne šeit ir ļoti noderīga (piemēram, CTRL + SHIFT + C ļauj nekavējoties pāriet uz lapu stilu skatīšanu)
Veidlapas
Viss darbam ar veidlapām: parādīt paroles, parādīt informāciju par veidlapām, konvertēt veidlapas metodes (GET » POST un otrādi) un daudz ko citu. Noderīga funkcija “Aizpildīt veidlapas laukus” veidlapas lauku automātiskai aizpildīšanai (piemēram, testējot vietni, kad ir atspējota paroles atcerēšanās funkcija. Citādi šajā rindkopā neredzu neko noderīgu.
attēlus
Ir noderīga funkcija attēlu izslēgšanai - lai redzētu, kā jūsu vietne izskatās bez attēliem. Attēlus var apvilkt, parādīt to izmērus, parādīt alt-atribūtus.
informāciju
Šajā izvēlnē ir daudz iespēju. Var būt noderīgi lapā parādīt klases un id atribūtus. Turklāt interesants ir vienums “Skatīt krāsu informāciju” - lai ātri iegūtu informāciju par lapā izmantotajām krāsām. "Skatīt dokumenta izmēru" - skatiet lapas izmēru. "Skatīt atbildes galvenes" - skatiet lapu galvenes.
Dažādi
Visbiežāk izmantotā funkcija ir kešatmiņas notīrīšana. Turklāt šeit ir pieejamas "Lapas lineāls" - lineāls, "Lapas lupa" - palielināmais stikls un "Līniju vadotnes" - šeit ir pieejamas dažas rindiņas, kas var būt noderīgas veidnes apgriešanai.
kontūru
Dažādu lapas elementu izvēle - tabulas, virsraksti, saites, rāmji, bloki. Izmēru maiņa ļauj mainīt pārlūkprogrammas loga izmēru, lai tas atbilstu jebkuram standarta ekrāna paplašinājumam. Šeit esošie rīki ir saglabāti lapas validācijas līdzekļi. Gan lokāli, gan ārēji. Ērti un ātra piekļuve HTML, CSS u.c. apstiprināšana. Lai apstiprinātu HTML, varat izmantot īsinājumtaustiņus CTRL+SHIFT+H.
apskatīt avotu
Skatīt avota kods. Iespēja apskatīt ārējā aplikācijā, apskatīt ģenerēto kodu.
Labajā pusē ir mans mīļākais. Tas ir ātrs HTML, CSS validators un JavaScript kļūdu indikators. Ja problēmu nav, ikona ir zaļa, un, ja ir problēmas, tā ir sarkana.
Internet Explorer izstrādātāja rīkjosla
Sākot ar versiju 8.0, šajā pārlūkprogrammā jau ir iebūvēta kļūdu atkļūdošana. To sauc viegli Taustiņš F12. Tiesa, viņš ir nožēlojams kā 90. gadu programma.
Bet šai pārlūkprogrammai ir daudz foršāks rīks, tā saukto Internet Explorer izstrādātāja rīkjoslu var lejupielādēt no saites.
Pēc izskata šī rīkjosla, protams, izskatās pēc firebug, bet diemžēl tā vēl nav izaugusi. Lai gan, no otras puses, tam ir dažas funkcijas, kuru firebug nav. Es sauktu Internet Explorer izstrādātāja rīkjoslu par Firebug un Firefox tīmekļa izstrādātājs Rīkjosla.
Tāpat kā firebug, ir iespēja pārbaudīt elementu ar vienkāršu klikšķi. Bet, ja mēs uzreiz varam redzēt polsterējumus un apmales, tad šeit tādas iespējas nav.
Turklāt Internet Explorer izstrādātāja rīkjosla dinamiski neatjaunina elementu koku, kā to dara Firebug. Tas ir, ja mēs kaut ko mainām lapā, izmantojot js, mēs neko neredzēsim, izmantojot šo rīkjoslu.
No tā, ko varat izbaudīt - CSS maiņa lidojuma laikā (vienkāršs veids, kā atrast, ko uzlauzt :), iespēja atspējot CSS un attēlus, iespēja ātri notīrīt kešatmiņu un spēlēt ar sīkfailiem, ātra piekļuve validācijai.
Visgaršīgākais: ir iebūvēts krāsu atlasītājs, kas ļauj iegūt jebkuru krāsu no lapas, izmantojot pilinātāju. (ff ir atsevišķs ColorZilla spraudnis).
Atkļūdošanas atkļūdošanas josla pārlūkprogrammai Internet Explorer
Jūs varat lejupielādēt DebugBar for Internet Explorer no norādītās saites.
Interesants paplašinājums pats par sevi. Instalēts kā papildu panelis pārlūkprogrammai:
Nez kāpēc ir iebūvēts meklētājs, acu pilinātājs, iespēja mainīt loga izmēru un atkal nez kāpēc ir iespēja nosūtīt lapu draugam pēc ziepēm. Lai gan tas varētu būt noderīgi. Taču man neizdevās šo iespēju izmantot.
Turklāt ir inspektors:
Pārbaudes metode, noklikšķinot vai norādot, izstrādātājiem nebija piemērota: viņi izdomāja interesantāku lietu. Atkļūdošanas joslā jums ir jāvelk mērķis uz vajadzīgo elementu, lai to redzētu kokā. Nav iespēju rediģēt CSS. Bet ir validators un iebūvēta js konsole.
Un, ja iedziļināsities iestatījumos, varat atrast šo:
Gan smieklīgi, gan skumji.
Ir zināms, ka izstrādātāja rīkjosla tiks iebūvēta astotajā pārlūkprogrammā. Tas būs līdzīgs trešajā rindkopā aprakstītajam, bet mēs ceram, ka tas būs labāks.
Atkļūdojiet DragonFly operētājsistēmai Opera
DragonFly ir iebūvēts Opera kopš versijas 9.5, tāpēc nav nepieciešams to instalēt. Lai aktivizētu Dragonfly, dodieties uz Rīki → Papildu → Izstrādātāja rīki. Un, ja angļu valodā, tad Rīki → Papildu → Izstrādātāja rīki.
Uzreiz brīdināšu, ka DragonFly ir Alpha2 stadijā, tas izskaidro daudzas tā kļūmes.
Funkciju saraksts:
- DOM inspektors;
- Noklikšķiniet uz Pārbaude (atkal mēs neredzēsim polsterējumu kā FireFox);
- Rediģēšana;
- Ātra piekļuve kļūdu konsolei.
DF ir kaut kas līdzīgs atsevišķai lapai rāmī. Ja to atverat, tas būs atvērts visām cilnēm (atšķirībā no firebug). Tāpēc pirms elementa pārbaudes mums no saraksta jāizvēlas lapa, kuru vēlamies skatīt.
Diemžēl šeit, tāpat kā pārlūkprogrammā Internet Explorer, Dav rīkjosla nerāda dinamiski izveidotos elementus. Un vispār, kad mēs pārbaudām lapu, netiek palaists JavaScript: saites un pogas netiek noklikšķinātas. Cerēsim, ka tad, kad DragonFly tuvosies izlaišanai, mēs redzēsim visas šīs funkcijas.
Atkļūdot tīmekļa inspektoru Safari
Es to uzreiz pateikšu par pārlūkprogrammu safari Informāciju izsvilpoju, tāpēc, kā saka, neatbildu par materiāla atbilstību.
Lai Safari izvēlnē iespējotu vienumu "Izstrāde", iestatījumos ir jāiespējo atbilstošais vienums (cilne "Papildu"):
Izvēlnē "Izstrāde" mums ir pieejamas šādas funkcijas:
Sīkāk apskatīsim WEB inspektoru:
Pēc noklusējuma inspektors tiek atvērts HTML skata režīmā. Bet to var pārslēgt uz DOM skata režīmu. Lai to izdarītu, augšējā plāksnē ir slēdzis. Virzot kursoru virs elementa inspektorā, tas tiks izcelts pašā lapā. Jūs nevarat redzēt polsterējumu, mainīt marķējumu vai CSS lidojuma laikā vai redzēt dinamiskas izmaiņas DOME lidojumā, kā to nevar redzēt FireBug. Bet, redz, tas izskatās ļoti jauki.
Ja vēlaties strādāt ar inspektoru pārlūkprogrammas logā, varat noklikšķināt uz pogas apakšējā kreisajā stūrī.
Pat safari ir pieejama tāda funkcija kā “Tīkla laika skala” (inspektora poga “Tīkls”):
Jūs varat skaidri redzēt, kad un cik ilgi faili tiek ielādēti. Varat arī skatīt pieprasījuma galvenes, taču diemžēl nevarat skatīt pašu saturu.
Atkļūdošana izstrādātājiem pārlūkprogrammā Google Chrome
Lame piedzima uzlabotā formā, un viņam uzreiz ir, lai arī pagaidām greizi, bet joprojām izstrādātāju rīki.
- DOM inspektors;
- javascript atkļūdotājs;
- JavaScript konsole.
Lai pārbaudītu elementu, ar peles labo pogu noklikšķiniet uz tā un konteksta izvēlne atlasiet "Skatīt elementa kodu":
Funkcionalitāte ir tāda pati kā Safari: elementi tiek izcelti, turot kursoru, bet CSS un HTML rediģēšana nav pieejama, DOM izmaiņas netiek izsekotas. Tikai apakšējā kreisajā stūrī esošā poga, kurai jāpievieno inspektors pārlūkprogrammas logam, nedarbojas.
Cilnē "Resursi" mēs varam redzēt tālāk norādīto.
Nedaudz atšķiras no mēroga safari. Caurspīdīgi šajā diagrammā ir relatīvie failu izmēri, un pilna krāsa ir lejupielādes laiks. Vienā vai otrā veidā ir acīmredzams, ka šī Chrome daļa joprojām nav pabeigta.
Šajā rakstā es pārskatīju slavenākos pārlūkprogrammu paplašinājumus un iebūvētos rīkus.
Ir arī citi, piemēram:
- Internet Explorer WEB izstrādes palīgs ir labs palīgs ASP.NET izstrādātājiem (Internet Explorer);
- WEB Developer Toolbar — rīkjosla pārlūkprogrammai Internet Explorer un FireFox. Ir vairākas noderīgas funkcijas;
- WEB pieejamības rīkjosla — pārlūkprogrammas Internet Explorer rīkjosla. Nekā interesanta.
Ja ir papildinājumi, kurus es neminēju, bet būtu tā vērti, vai ir funkcijas minētajiem paplašinājumiem, kuras esmu palaidis garām, rakstiet.
Lietojiet veselībai!
HTML rakstīšana ir lieliski, bet kā zināt, kur ir kļūda, ja kaut kas nedarbojas? Šajā rakstā ir aprakstīti vairāki rīki, kas palīdz atrast un labot HTML kļūdas.
Atkļūdošana nav biedējoša
Rakstot kādu kodu, parasti viss norit labi līdz brīdim, kad kļūdies. Tātad jūsu kods nedarbojas vai nedarbojas tā, kā jūs plānojāt. Ja mēģināt kompilēt nestrādājošu Rust programmu, kompilators ziņos par kļūdu:
Šajā gadījumā kļūdas ziņojums ir salīdzinoši viegli saprotams - "nepārtraukta dubultpēdiņu virkne". Ja uzmanīgi apskatīsit println!(Sveika, pasaule!"); , jūs pamanīsit, ka nav dubultpēdiņš. Protams, kļūdu ziņojumi var kļūt daudz grūtāk saprotami, kad jūsu kods aug, un pat visvienkāršākie gadījumi var iebiedēt tos, kuri neko nezina par Rust.
Bet nebaidieties atkļūdot! Lai ērti rakstītu un atkļūdotu jebkuru kodu, jums ir jāsaprot valoda un tās rīki.
HTML un atkļūdošana
HTML nav tik grūti saprast kā Rust. HTML netiek kompilēts nevienā citā formā, pirms pārlūkprogramma to parsē un parāda rezultātu (tas tiek interpretēts, nevis kompilēts). Sintakse HTML elementi daudz skaidrāk nekā "īstās programmēšanas valodas", piemēram, Rust, JavaScript vai Python. Veids, kā pārlūkprogrammas lasa HTML, ir daudz plašāks tolerants nekā programmēšanas valodas, kas stingrāk interpretē savu kodu. Tas vienlaikus ir gan slikti, gan labi.
tolerants kods
Tātad, ko nozīmē tolerants? Vispārīgi runājot, ja jūs sajaucat kodu, var rasties divu veidu kļūdas:
- Sintakses kļūdas: tās ir pareizrakstības kļūdas, kā minēts iepriekš Rust piemērā. Parasti tos ir viegli labot, ja vien esat iepazinies ar valodas sintaksi un zināt, ko nozīmē kļūdu ziņojumi.
- Loģikas kļūdas: tās ir kļūdas, kas parādās, ja sintakse ir pareiza, bet kods nepilda savu mērķi, tas ir, programma nedarbojas pareizi. Tos ir grūtāk labot nekā sintaktiskos, jo netiek parādīti ziņojumi, kas norādītu vietu, kur esat pieļāvis kļūdu.
HTML necieš no sintakses kļūdām, jo pārlūkprogramma toleranti lasa kodu tādā nozīmē, ka lapas var renderēt pat tad, ja ir sintakses kļūdas. Pārlūkprogrammās ir iebūvēti noteikumi nepareizi rakstītu marķējumu interpretēšanai, un jūs varat palaist kaut ko pat tad, ja domājāt kaut ko citu. Tā var būt reāla problēma!
Uz piezīmes: HTML ir lasāms, jo, kad tīmeklis pirmo reizi parādījās, tika nolemts ļaut cilvēkiem publicēt saturu pat tad, ja kods ir nepareizs, jo tas ir daudz svarīgāk nekā pārliecināties, ka sintakse ir absolūti pareiza. Tīmeklis šobrīd nebūtu tik populārs, ja tas būtu stingri pret jaunpienācējiem.
Aktīvā mācīšanās: Ieviest tolerantu kodu
Laiks izpētīt tolerantā koda būtību HTML.
HTML validācija
No iepriekš minētā piemēra ir skaidrs, ka ir vērts pārbaudīt HTML derīgumu. Iepriekš minētajā vienkāršajā piemērā varat vienkārši iziet cauri visam kodam un atrast kļūdas, bet kā ar milzīgām, sarežģītām lapām?
Vislabāk ir pārbaudīt lapu iezīmēšanas validācijas pakalpojumā. To izveidoja un uzturēja W3C, organizācija, kas ir atbildīga par HTML, CSS un citu tīmekļa tehnoloģiju specifikāciju. Pakalpojums pārbaudīs jūsu HTML un ziņos par kļūdām tajā.
HTML var pārbaudīt norādītajā adresē, augšupielādējot failu vai vienkārši kopējot to lapā.
Aktīvā mācīšanās: HTML dokumenta apstiprināšana
- Atveriet iezīmēšanas validācijas pakalpojumu savā pārlūkprogrammā.
- Pārslēdzieties uz režīmu Validēt, izmantojot tiešo ievadi.
- Kopējiet visu dokumenta kodu (ne tikai pamattekstu) un ielīmējiet to ievades vietā.
- nospiest Pārbaudīt (pārbaudīt).
Jūs redzēsit kļūdu sarakstu un citu informāciju.
Darbs ar kļūdu ziņojumiem
Parasti uzreiz ir skaidrs, ko vēstījumi nozīmē, bet reizēm jāmēģina saprast, kas tas ir. Tagad mēs apskatīsim visas kļūdas un analizēsim to nozīmi. Ņemiet vērā, ka ziņojumos ir iekļauta koda rinda un kolonna, lai atvieglotu kļūdu atrašanu.
- "Iespējams beigu tags li, bet bija atvērti elementi" (2 gadījumi): nav skaidra beigu taga, lai gan pārlūkprogramma uzmin, kur tam vajadzētu būt. Ziņojums norāda uz rindiņu pēc tās, kurā bija paredzēts beigu tags, taču jūs atradīsit īsto vietu.
- "Neslēgts elements spēcīgs": tas ir ļoti vienkārša kļūda- elements) norāda, ka tā saturam ir liela nozīme, nopietnība vai steidzamība. Pārlūkprogrammas parasti atveido saturu treknrakstā."> nav aizvērts, un ziņojums norāda tieši uz sākuma tagu.
- "Spēcīgs beigu tags pārkāpj ligzdošanas noteikumus": elements ir ligzdots nepareizi — šajā līmenī nav atbilstoša sākuma taga.
- "Sasniegtas faila beigas, atrodoties atribūta vērtībā. Tiek ignorēts tags": noslēpumains ziņojums. Lieta tāda, ka kaut kur (visticamāk, dokumenta beigās) elementa rekvizīts ir nepareizi reģistrēts, un šajā rekvizītā parādījās faila beigas. Saite pārlūkprogrammā nav redzama - visticamāk, problēma ir blakus tai.
- "Redzēts faila beigas un bija atvērti elementi": fails ir beidzies, bet daži elementi nav aizvērti. Ziņojums norāda faila beigas, šajā gadījumā elements nav aizvērts piemērs: saite uz Mozilla mājaslapu ↩
Diezgan bieži lietotāji var novērot situāciju, kad pārlūkprogrammā (IE) parādās skripta kļūdas ziņojums. Ja situācija ir izolēta, tad nevajadzētu uztraukties, bet, kad šādas kļūdas kļūst regulāras, tad jādomā par šīs problēmas būtību.
Skripta kļūdu programmā Internet Explorer parasti izraisa tas, ka pārlūkprogramma nepareizi apstrādā HTML lapas kodu, pagaidu interneta failu esamība, konta iestatījumi un daudzi citi iemesli. tiks apspriestsšajā materiālā. Tiks apsvērtas arī metodes šīs problēmas risināšanai.
Pirms turpināt izmantot izplatītākās metodes Internet Explorer problēmu diagnosticēšanai, kas izraisa skripta kļūdas, jums jāpārliecinās, vai kļūda rodas ne tikai vienā noteiktā vietnē, bet arī vairākās tīmekļa lapās vienlaikus. Jums ir arī jāpārbauda tīmekļa lapa, kurā problēma rodas, izmantojot citu konts, citā pārlūkprogrammā un citā datorā. Tas sašaurinās kļūdas iemesla meklēšanu un izslēgs vai apstiprinās hipotēzi, ka ziņojumi parādās noteiktu failu vai iestatījumu klātbūtnes dēļ datorā.
Internet Explorer aktīvo skriptu, ActiveX un Java bloķēšana
Aktīvā skriptēšana, ActiveX vadīklas un Java ietekmē veidu, kādā informācija tiek ģenerēta un parādīta vietnē, un var būt patiesais iepriekš aprakstītās problēmas cēlonis, ja tās ir bloķētas lietotāja datorā. Lai pārliecinātos, ka šī iemesla dēļ rodas skripta kļūdas, jums vienkārši jāatiestata pārlūkprogrammas drošības iestatījumi. Lai to izdarītu, ievērojiet tālāk norādītās vadlīnijas.
- Atveriet pārlūkprogrammu Internet Explorer 11
- apkalpošana
- Logā dodieties uz cilni Drošība
- Tālāk noklikšķiniet uz pogas Noklusējums un pēc tam pogu labi
Internet Explorer pagaidu faili
Katru reizi, kad atverat tīmekļa lapu, programma Internet Explorer saglabā šīs tīmekļa lapas lokālo kopiju jūsu datorā tā sauktajos pagaidu failos. Kad šādu failu ir pārāk daudz un tos saturošās mapes izmērs sasniedz vairākus gigabaitus, var rasties problēmas ar Web lapas attēlošanu, proti, parādīsies skripta kļūdas ziņojums. Regulāra pagaidu failu mapes notīrīšana var palīdzēt novērst šo problēmu.
Lai izdzēstu pagaidu interneta failus, veiciet tālāk norādītās darbības.
- Atveriet pārlūkprogrammu Internet Explorer 11
- apkalpošana
- Logā dodieties uz cilni Ģenerālis
- Sadaļā Pārlūka vēsture nospiediet pogu Dzēst…
- Logā Dzēst pārlūkošanas vēsturi atzīmējiet izvēles rūtiņas blakus vienumiem Interneta un vietņu pagaidu faili, Sīkdatnes un vietnes dati, Žurnāls
- Noklikšķiniet uz pogas Dzēst
Pretvīrusu programmatūras darbība
Darba laikā ir iespējamas skripta kļūdas pretvīrusu programma kad tas bloķē aktīvos skriptus, ActiveX un Java vadīklas lapā vai mapes, lai saglabātu pagaidu pārlūkprogrammas failus. Šādā gadījumā jums vajadzētu atsaukties uz instalētā pretvīrusu produkta dokumentāciju un atspējot skenēšanas mapes, lai saglabātu pagaidu interneta failus, kā arī bloķētu interaktīvos objektus.
Nepareiza HTML lapas koda apstrāde
Tas parasti parādās vienā noteiktā vietnē un norāda, ka lapas kods nav pilnībā pielāgots darbam ar Internet Explorer. Šajā gadījumā vislabāk ir atspējot skripta atkļūdošanu pārlūkprogrammā. Lai to izdarītu, veiciet tālāk norādītās darbības.
- Atveriet pārlūkprogrammu Internet Explorer 11
- Pārlūkprogrammas augšējā labajā stūrī noklikšķiniet uz ikonas apkalpošana zobrata veidā (vai taustiņu kombinācija Alt + X). Pēc tam atvērtajā izvēlnē atlasiet
- Logā dodieties uz cilni Turklāt
- Pēc tam noņemiet atzīmi no izvēles rūtiņas Rādīt paziņojumu par katru skripta kļūdu un nospiediet pogu labi.
Šis ir saraksts ar visvairāk izplatīti cēloņi, kas izraisa skripta kļūdas pārlūkprogrammā Internet Explorer, tādēļ, ja esat noguris no šādiem ziņojumiem, pievērsiet nelielu uzmanību un atrisiniet problēmu uz visiem laikiem.
Ieslēgts Šis brīdis ir liels skaits dažādu pārlūkprogrammu, kas zināmā mērā atbalsta esošos HTML standartus. Personīgi es dodu priekšroku pārlūkprogrammai no Mozilla Corporation. Šai pārlūkprogrammai ir sena vēsture (tā ir balstīta uz slaveno Netscape Navigator pārlūkprogrammu). Šī pārlūkprogramma man patīk arī tāpēc, ka atbalsta spraudņu sistēmu – atsevišķi izplatāmus papildinājumus, pieslēdzoties var mainīt funkcionalitāti un pielāgot savām vajadzībām. Un visbeidzot, šī pārlūkprogramma tiek brīvi izplatīta ar atvērtā pirmkoda kodiem, kas arī ir svarīgi. Tāpēc nolēmu aprakstīt iespējas, ko šī pārlūkprogramma sniedz ne tikai lietotājam, bet arī Web lapu izstrādātājam, cik vienkāršs un ērts var būt rakstīto produktu atkļūdošanas process.
Mozilla Firefox ir viena no populārākajām pārlūkprogrammām izstrādātāju un tīmekļa izstrādātāju vidū. Tas piesaista viņu uzmanību, jo šī pārlūkprogramma sniedz iespējas izveidoto projektu atkļūdošanai, kļūdu labošanai un uzlabošanai. Pārlūkprogrammas standarta komplektācijā ietilpst java konsole (vai "kļūdu konsole"). Šī utilīta ļauj atkļūdot iegultos Java skriptus. Taču trešo pušu spraudņi nodrošina pārlūkprogrammai daudz vairāk funkcionalitātes, ko var lejupielādēt un instalēt no Mozilla Foundation oficiālās vietnes. Tagad es vēlos apskatīt divus no šiem spraudņiem - Web Developer un Firebug. Abus šos papildinājumus var lejupielādēt no iepriekš minētajām saitēm no oficiālās pievienojumprogrammas vietnes. Pēc to instalēšanas un pārlūkprogrammas restartēšanas izstrādātājam ir plašas iespējas, kuras es aprakstīšu tālāk, savukārt katram no spraudņiem.
firebug spraudnis
Kā teikts oficiālajā lapā: “Firebug integrējas ar Firefox pārlūkprogrammu, lai ievērojami bagātinātu izstrādātāja rīku komplektu. Jūs varēsiet rediģēt, atkļūdot un izpētīt CSS, HTML un Javascript tiešraidē jebkurā tīmekļa lapā. Un tā tiešām ir. Apsveriet dažas šī spraudņa funkcijas, proti:
- Skatīt un rediģēt HTML.
- CSS veidošana.
- Tīkla pieprasījumu uzraudzība
- JavaScript atkļūdošana
- JavaScript izpēte
- JavaScript reģistrēšana
Šis nav pilnīgs visu tā funkciju saraksts. Tā kā projekts ir atvērtā koda avots, ikviens var mainīt un pievienot funkcionalitāti.
Lai strādātu ar spraudni, jānospiež taustiņš F12 (Ctrl-F12, lai strādātu ar to atsevišķā logā). Pēc veiksmīgas palaišanas mēs iegūstam sekojošo - 1.a, 1.b attēls.
1.a attēls. Firebug spraudņa sākotnējais logs.
1.b attēls. Firebug spraudņa sākotnējais logs.
Tālāk sākas faktiskais darbs ar spraudni. Pieņemsim, ka mums ir jāatrod šis vai cits objekts HTML kodā vai jānosaka, kā tieši tas tiek īstenots izmantojot CSS pašreizējais fragments. Lai to izdarītu, spraudņa loga izvēlnē ar peli ir jāatlasa vajadzīgās opcijas. Tālāk esošajā piemērā tas ir HTML pārbaudes režīmā. Tagad, pārejot uz dokumenta lapu, zem peles kursora mēs pamanīsim taisnstūrveida laukumu, kas ilustrē apgabalu, ar kuru mēs strādājam. Spraudņa logā mēs redzēsim izmantotos HTML un CSS parametrus. Turklāt, noklikšķinot uz katra no tiem, varat veikt izmaiņas un izsekot tām dinamikā. Aprakstītās darbības ir ilustrētas 2.,3.,4.attēlos.
Izstrādājot šo projektu, iepriekš aprakstītais spraudnis tika izmantots tieši šiem mērķiem. Tomēr, lai gan šeit nav izmantots java skripts, Firebug spraudni var izmantot arī tā atkļūdošanai. Atkļūdošanas piemērs ir parādīts 5. attēlā.
Šajā sakarā, kā aprakstīts iepriekš, šī paplašinājuma funkcionalitāte nav ierobežota. Varat to pilnībā izpētīt un izmantot savām vajadzībām, lejupielādējot to no norādītajām saitēm pēc Mozilla Firefox instalēšanas.
tīmekļa izstrādātāja spraudnis
Web Developer — otrais paplašinājums Mozilla pārlūks Firefox, ļoti jaudīgs un funkcionāls, kas nodrošina ātru un efektīvu atkļūdošanu. Pēc tā instalēšanas pārlūkprogrammas logā parādīsies papildu rīkjosla, kas parādīta 6. attēlā.Turpmākais darbs ar spraudni ir intuitīvs. Piemēram, ja mums ir jāveic CSS darbs (lai gan tas nav tik pilnībā funkcionāls kā Firebug spraudnis), mēs varam noklikšķināt uz CSS izvēlnes un atspējot, iespējot vai atspējot.
Izstrādātājam ir ļoti ērti redzēt, kā viņa projekts izskatīsies uz monitoriem ar dažādu izšķirtspēju. Lai to izdarītu, izmantojiet cilni Mainīt izmērus. Šeit jūs varat manuāli iestatīt nepieciešamās atļaujas ekrānu (800x600, 1024x768 utt.), un pēc tam brīvi pārslēdzieties starp tiem, tuviniet vai tāliniet saturu. Šī funkcionalitāte ir parādīta 7. attēlā.
Šim paplašinājumam ir arī bagātīgas funkcionalitātes, kas visas ir aprakstītas un pieejamas oficiālajās vietnēs.
Izmantoto avotu saraksts
- 1. www.getfirebug.com
Papildinājuma oficiālā vietne. - 2. http://addons.mozilla.org
Mozilla oficiālās vietnes mitināšanas spraudņi priekš Firefox pārlūks, informācija izstrādātājiem, informācija par spraudņu izmantošanu. - 3. http://chrispederick.com/work/web-developer/
WebDeveloper spraudņa izstrādātāja oficiālā vietne.
Pārlūkojot internetu, pārlūkprogramma Internet Explorer var parādīt ziņojumus, ka lapā ir kļūdas un tas var netikt parādīts pareizi. Apskatīsim dažus veidus, kā novērst šo problēmu.
Instrukcija
Diezgan bieži lietotāji var novērot situāciju, kad Internet Explorer (IE) pārlūkprogrammā parādās skripta kļūdas ziņojums. Ja situācija ir izolēta, tad nevajadzētu uztraukties, bet, kad šādas kļūdas kļūst regulāras, tad jādomā par šīs problēmas būtību.
Skripta kļūdu programmā Internet Explorer parasti izraisa pārlūkprogrammas nepareiza HTML lapas koda apstrāde, pagaidu interneta failu klātbūtne, konta iestatījumi un daudzi citi iemesli, kas tiks apspriesti šajā materiālā. Tiks apsvērtas arī metodes šīs problēmas risināšanai.
Pirms turpināt izmantot izplatītākās metodes Internet Explorer problēmu diagnosticēšanai, kas izraisa skripta kļūdas, jums jāpārliecinās, vai kļūda rodas ne tikai vienā noteiktā vietnē, bet arī vairākās tīmekļa lapās vienlaikus. Jums ir arī jāpārbauda tīmekļa lapa, kurā ir radusies šī problēma, izmantojot citu kontu, citā pārlūkprogrammā un citā datorā. Tas sašaurinās kļūdas iemesla meklēšanu un izslēgs vai apstiprinās hipotēzi, ka ziņojumi parādās noteiktu failu vai iestatījumu klātbūtnes dēļ datorā.
Internet Explorer aktīvo skriptu, ActiveX un Java bloķēšana
Aktīvā skriptēšana, ActiveX vadīklas un Java ietekmē veidu, kādā informācija tiek ģenerēta un parādīta vietnē, un var būt patiesais iepriekš aprakstītās problēmas cēlonis, ja tās ir bloķētas lietotāja datorā. Lai pārliecinātos, ka šī iemesla dēļ rodas skripta kļūdas, jums vienkārši jāatiestata pārlūkprogrammas drošības iestatījumi. Lai to izdarītu, ievērojiet tālāk norādītās vadlīnijas.
- Atveriet pārlūkprogrammu Internet Explorer 11
- apkalpošana
- Logā dodieties uz cilni Drošība
- Tālāk noklikšķiniet uz pogas Noklusējums un pēc tam pogu labi
Internet Explorer pagaidu faili
Katru reizi, kad atverat tīmekļa lapu, programma Internet Explorer saglabā šīs tīmekļa lapas lokālo kopiju jūsu datorā tā sauktajos pagaidu failos. Kad šādu failu ir pārāk daudz un tos saturošās mapes izmērs sasniedz vairākus gigabaitus, var rasties problēmas ar Web lapas attēlošanu, proti, parādīsies skripta kļūdas ziņojums. Regulāra pagaidu failu mapes notīrīšana var palīdzēt novērst šo problēmu.
Lai izdzēstu pagaidu interneta failus, veiciet tālāk norādītās darbības.
- Atveriet pārlūkprogrammu Internet Explorer 11
- Pārlūkprogrammas augšējā labajā stūrī noklikšķiniet uz ikonas apkalpošana zobrata veidā (vai taustiņu kombinācija Alt + X). Pēc tam atvērtajā izvēlnē atlasiet
- Logā dodieties uz cilni Ģenerālis
- Sadaļā Pārlūka vēsture nospiediet pogu Dzēst…
- Logā Dzēst pārlūkošanas vēsturi atzīmējiet izvēles rūtiņas blakus vienumiem Interneta un vietņu pagaidu faili, Sīkfaili un vietņu dati, Žurnāls
- Noklikšķiniet uz pogas Dzēst
Pretvīrusu programmatūras darbība
Skriptu kļūdas ir iespējamas, darbojoties pretvīrusu programmai, kad tā bloķē aktīvos skriptus, ActiveX un Java vadīklas lapā vai mapes, lai saglabātu pagaidu pārlūkprogrammas failus. Šādā gadījumā jums vajadzētu atsaukties uz instalētā pretvīrusu produkta dokumentāciju un atspējot skenēšanas mapes, lai saglabātu pagaidu interneta failus, kā arī bloķētu interaktīvos objektus.
Nepareiza HTML lapas koda apstrāde
Tas parasti parādās vienā noteiktā vietnē un norāda, ka lapas kods nav pilnībā pielāgots darbam ar Internet Explorer. Šajā gadījumā vislabāk ir atspējot skripta atkļūdošanu pārlūkprogrammā. Lai to izdarītu, veiciet tālāk norādītās darbības.
- Atveriet pārlūkprogrammu Internet Explorer 11
- Pārlūkprogrammas augšējā labajā stūrī noklikšķiniet uz ikonas apkalpošana zobrata veidā (vai taustiņu kombinācija Alt + X). Pēc tam atvērtajā izvēlnē atlasiet
- Logā dodieties uz cilni Turklāt
- Pēc tam noņemiet atzīmi no izvēles rūtiņas Rādīt paziņojumu par katru skripta kļūdu un nospiediet pogu labi.
Šis ir saraksts ar visbiežāk sastopamajiem iemesliem, kas izraisa skripta kļūdas programmā Internet Explorer, tādēļ, ja esat noguris no šādiem ziņojumiem, pievērsiet uzmanību un atrisiniet problēmu uz visiem laikiem.
Ir, protams, arī citi – noteikti pieminēšu.
Firebug pārlūkprogrammai Firefox
Es precīzi nezinu, vai firebug citu izstrādātāju rīku priekštecis, taču tas noteikti ir vispopulārākais, lietotājam draudzīgākais un ar daudzām funkcijām bagātākais .
Firebug ir Firefox papildinājums, kas nozīmē, ka tas ir jālejupielādē no Firefox pievienojumprogrammu vietnes un jāinstalē.
Lai izsauktu firebug, vienkārši nospiediet taustiņu F12.
Šī papildinājuma funkcijas:
- Dinamiski mainīga HTML pārbaude un rediģēšana;
- CSS rediģēšana lidojumā;
- JavaScript atkļūdošana, komandrinda skriptu izpildei;
- Tīkla pieprasījumu uzraudzība - jūs varat redzēt failu un skriptu lielumu un lejupielādes laiku, pieprasījumu galvenes;
- DOM parsētājs.
Par šīm funkcijām var runāt detalizēti ilgi, bet domāju, ka tās ir zināmas visiem mūsu lasītājiem, un, ja nē, tad sīkāka informācija ir Firebug mājaslapā vai to pašu tulko Iļja Kantors.
Papildus pašai firebug jums var būt nepieciešams noderīgs losjons - ugunscepums, ar kuru (pārsteigums:-) var apskatīt un modificēt sīkdatnes.
Tīmekļa izstrādātāja rīkjosla pārlūkprogrammai Firefox
Vēl viens noderīgs papildinājums Ognelim. Tas izskatās šādi:
Ejam cauri punktiem.
Atspējot
Ļauj izslēgt JavaScript, atspējot kešatmiņas izmantošanu, kas ir ļoti noderīga izstrādē (ļauj pārliecināties, ka lapa ir ielādēta ar jaunākajiem atjauninājumiem), atcelt lapā izmantotās krāsas un aizstāt tās ar standarta krāsām, atspējot sūtīšanu novirzītāja galvenē (lapā, no kuras tika veikta pāreja).
Sīkdatnes
Noderīga iespēja darbam ar sīkdatnēm: tās var apskatīt, dzēst, bloķēt un pievienot.
css
Šajā izvēlnē ir izstrādātāja rīkjoslas stilīgākā funkcija — CSS rediģēšana lidojumā. Turklāt ir iespējams apskatīt css, atspējot utt., Un tā tālāk. Manuprāt, tastatūras īsinājumtaustiņu klātbūtne šeit ir ļoti noderīga (piemēram, CTRL + SHIFT + C ļauj nekavējoties pāriet uz lapu stilu skatīšanu)
Veidlapas
Viss darbam ar veidlapām: parādīt paroles, parādīt informāciju par veidlapām, konvertēt veidlapas metodes (GET » POST un otrādi) un daudz ko citu. Noderīga funkcija “Aizpildīt veidlapas laukus” veidlapas lauku automātiskai aizpildīšanai (piemēram, testējot vietni, kad ir atspējota paroles atcerēšanās funkcija. Citādi šajā rindkopā neredzu neko noderīgu.
attēlus
Ir noderīga funkcija attēlu izslēgšanai - lai redzētu, kā jūsu vietne izskatās bez attēliem. Attēlus var apvilkt, parādīt to izmērus, parādīt alt-atribūtus.
informāciju
Šajā izvēlnē ir daudz iespēju. Var būt noderīgi lapā parādīt klases un id atribūtus. Turklāt interesants ir vienums “Skatīt krāsu informāciju” - lai ātri iegūtu informāciju par lapā izmantotajām krāsām. "Skatīt dokumenta izmēru" - skatiet lapas izmēru. "Skatīt atbildes galvenes" - skatiet lapu galvenes.
Dažādi
Visbiežāk izmantotā funkcija ir kešatmiņas notīrīšana. Turklāt šeit ir pieejamas "Lapas lineāls" - lineāls, "Lapas lupa" - palielināmais stikls un "Līniju vadotnes" - šeit ir pieejamas dažas rindiņas, kas var būt noderīgas veidnes apgriešanai.
kontūru
Dažādu lapas elementu izvēle - tabulas, virsraksti, saites, rāmji, bloki. Izmēru maiņa ļauj mainīt pārlūkprogrammas loga izmēru, lai tas atbilstu jebkuram standarta ekrāna paplašinājumam. Šeit esošie rīki ir saglabāti lapas validācijas līdzekļi. Gan lokāli, gan ārēji. Ērta un ātra piekļuve, lai pārbaudītu HTML, CSS un citus. Lai apstiprinātu HTML, varat izmantot īsinājumtaustiņus CTRL+SHIFT+H.
apskatīt avotu
Skatīt avota kodu. Iespēja apskatīt ārējā aplikācijā, apskatīt ģenerēto kodu.
Labajā pusē ir mans mīļākais. Tas ir ātrs HTML, CSS validators un JavaScript kļūdu indikators. Ja problēmu nav, ikona ir zaļa, un, ja ir problēmas, sarkana.
Internet Explorer izstrādātāja rīkjosla
Sākot ar versiju 8.0, šajā pārlūkprogrammā jau ir iebūvēta kļūdu atkļūdošana. To sauc viegli Taustiņš F12. Tiesa, viņš ir nožēlojams kā 90. gadu programma.
Bet šai pārlūkprogrammai ir daudz foršāks rīks, tā saukto Internet Explorer izstrādātāja rīkjoslu var lejupielādēt no saites.
Pēc izskata šī rīkjosla, protams, izskatās pēc firebug, bet diemžēl tā vēl nav izaugusi. Lai gan, no otras puses, tam ir dažas funkcijas, kuru firebug nav. Es sauktu Internet Explorer izstrādātāja rīkjoslu par Firebug un Firefox tīmekļa izstrādātājs Rīkjosla.
Tāpat kā firebug, elementu var pārbaudīt ar vienkāršu klikšķi. Bet, ja mēs uzreiz varam redzēt polsterējumus un apmales, tad šeit tādas iespējas nav.
Turklāt Internet Explorer izstrādātāja rīkjosla dinamiski neatjaunina elementu koku, kā to dara Firebug. Tas ir, ja mēs kaut ko mainām lapā, izmantojot js, mēs neko neredzēsim, izmantojot šo rīkjoslu.
No tā, ko varat izbaudīt - CSS maiņa lidojuma laikā (vienkāršs veids, kā atrast, ko uzlauzt :), iespēja atspējot CSS un attēlus, iespēja ātri notīrīt kešatmiņu un spēlēt ar sīkfailiem, ātra piekļuve validācijai.
Visgaršīgākais: ir iebūvēts krāsu atlasītājs, kas ļauj iegūt jebkuru krāsu no lapas, izmantojot pilinātāju. (ff ir atsevišķs ColorZilla spraudnis).
Atkļūdošanas atkļūdošanas josla pārlūkprogrammai Internet Explorer
Jūs varat lejupielādēt DebugBar for Internet Explorer no norādītās saites.
Interesants paplašinājums pats par sevi. Instalēts kā papildu panelis pārlūkprogrammai:
Nez kāpēc ir iebūvēts meklētājs, acu pilinātājs, iespēja mainīt loga izmēru un atkal nez kāpēc ir iespēja nosūtīt lapu draugam pēc ziepēm. Lai gan tas varētu būt noderīgi. Taču man neizdevās šo iespēju izmantot.
Turklāt ir inspektors:
Pārbaudes metode, noklikšķinot vai norādot, izstrādātājiem nebija piemērota: viņi izdomāja interesantāku lietu. Atkļūdošanas joslā jums ir jāvelk mērķis uz vajadzīgo elementu, lai to redzētu kokā. Nav iespēju rediģēt CSS. Bet ir validators un iebūvēta js konsole.
Un, ja iedziļināsities iestatījumos, varat atrast šo:
Gan smieklīgi, gan skumji.
Ir zināms, ka izstrādātāja rīkjosla tiks iebūvēta astotajā pārlūkprogrammā. Tas būs līdzīgs trešajā rindkopā aprakstītajam, bet mēs ceram, ka tas būs labāks.
Atkļūdojiet DragonFly operētājsistēmai Opera
DragonFly ir iebūvēts Opera kopš versijas 9.5, tāpēc nav nepieciešams to instalēt. Lai aktivizētu Dragonfly, dodieties uz Rīki → Papildu → Izstrādātāja rīki. Un, ja angļu valodā, tad Rīki → Papildu → Izstrādātāja rīki.
Uzreiz brīdināšu, ka DragonFly ir Alpha2 stadijā, tas izskaidro daudzas tā kļūmes.
Funkciju saraksts:
- DOM inspektors;
- Noklikšķiniet uz Pārbaude (atkal mēs neredzēsim polsterējumu kā FireFox);
- Rediģēšana ;
- Ātra piekļuve kļūdu konsolei.
DF ir kaut kas līdzīgs atsevišķai lapai rāmī. Ja to atverat, tas būs atvērts visām cilnēm (atšķirībā no firebug). Tāpēc pirms elementa pārbaudes mums no saraksta jāizvēlas lapa, kuru vēlamies skatīt.
Diemžēl šeit, tāpat kā pārlūkprogrammā Internet Explorer, Dav rīkjosla nerāda dinamiski izveidotos elementus. Un vispār, kad mēs pārbaudām lapu, netiek palaists JavaScript: saites un pogas netiek noklikšķinātas. Cerēsim, ka tad, kad DragonFly tuvosies izlaišanai, mēs redzēsim visas šīs funkcijas.
Atkļūdot tīmekļa inspektoru Safari
Es to uzreiz pateikšu par pārlūkprogrammu safari Informāciju izsvilpoju, tāpēc, kā saka, neatbildu par materiāla atbilstību.
Lai Safari izvēlnē iespējotu vienumu "Izstrāde", iestatījumos ir jāiespējo atbilstošais vienums (cilne "Papildu"):
Izvēlnē "Izstrāde" mums ir pieejamas šādas funkcijas:
Sīkāk apskatīsim WEB inspektoru:
Pēc noklusējuma inspektors tiek atvērts HTML skata režīmā. Bet to var pārslēgt uz DOM skata režīmu. Lai to izdarītu, augšējā plāksnē ir slēdzis. Virzot kursoru virs elementa inspektorā, tas tiks izcelts pašā lapā. Jūs nevarat redzēt polsterējumu, mainīt marķējumu vai CSS lidojuma laikā vai redzēt dinamiskas izmaiņas DOME lidojumā, kā to nevar redzēt FireBug. Bet, redz, tas izskatās ļoti jauki.
Ja vēlaties strādāt ar inspektoru pārlūkprogrammas logā, varat noklikšķināt uz pogas apakšējā kreisajā stūrī.
Pat safari ir pieejama tāda funkcija kā “Tīkla laika skala” (inspektora poga “Tīkls”):
Jūs varat skaidri redzēt, kad un cik ilgi faili tiek ielādēti. Varat arī skatīt pieprasījuma galvenes, taču diemžēl nevarat skatīt pašu saturu.
Atkļūdošana izstrādātājiem pārlūkprogrammā Google Chrome
Lame piedzima uzlabotā formā, un viņam uzreiz ir, lai arī pagaidām greizi, bet joprojām izstrādātāju rīki.
- DOM inspektors;
- javascript atkļūdotājs;
- JavaScript konsole.
Lai pārbaudītu elementu, ar peles labo pogu noklikšķiniet uz tā un konteksta izvēlnē atlasiet "Skatīt elementa kodu":
Funkcionalitāte ir tāda pati kā Safari: elementi tiek izcelti, turot kursoru, bet CSS un HTML rediģēšana nav pieejama, DOM izmaiņas netiek izsekotas. Tikai apakšējā kreisajā stūrī esošā poga, kurai jāpievieno inspektors pārlūkprogrammas logam, nedarbojas.
Cilnē "Resursi" mēs varam redzēt tālāk norādīto.
Nedaudz atšķiras no mēroga safari. Caurspīdīgi šajā diagrammā ir relatīvie failu izmēri, un pilna krāsa ir lejupielādes laiks. Vienā vai otrā veidā ir acīmredzams, ka šī Chrome daļa joprojām nav pabeigta.
Šajā rakstā es pārskatīju slavenākos pārlūkprogrammu paplašinājumus un iebūvētos rīkus.
Ir arī citi, piemēram:
- Internet Explorer WEB izstrādes palīgs ir labs palīgs ASP.NET izstrādātājiem (Internet Explorer);
- WEB Developer Toolbar — rīkjosla pārlūkprogrammai Internet Explorer un FireFox. Ir vairākas noderīgas funkcijas;
- WEB pieejamības rīkjosla — pārlūkprogrammas Internet Explorer rīkjosla. Nekā interesanta.
Ja ir papildinājumi, kurus es neminēju, bet būtu tā vērti, vai ir funkcijas minētajiem paplašinājumiem, kuras esmu palaidis garām, rakstiet.
Lietojiet veselībai!
Internet Explorer 11 operētājsistēmās Windows 8.1 un Windows 7 ir aprīkots ar pilnībā pārveidotu un uzlabotu izstrādātāja rīku komplektu, kas iebūvēts pārlūkprogrammā, lai palīdzētu izstrādātājiem izveidot, diagnosticēt un optimizēt modernas vietnes un lietotnes daudzās ierīcēs. Jaunie rīki, kurus mēs īsuma labad vienkārši dēvējam par F12, ļauj tīmekļa izstrādātājiem strādāt ātri un efektīvi.
Visual Studio un Internet Explorer darba grupas strādāja kopā, lai izveidotu F12 rīkus, kuru pamatā ir princips, kas palīdz izstrādātājiem ātri pāriet no problēmas uz risinājumu, izmantojot nozīmīgus datus. Jaunais F12 komplekts nodrošina ātru un elastīgu tīmekļa pieredzi ar rīkiem veiktspējas problēmu diagnosticēšanai un labošanai, kā arī rīkiem, kas palīdz labāk izprast, kā Internet Explorer izkārto un renderē tīmekļa lietojumprogrammas. F12 rīki atbalsta ātru, interaktīvu darbplūsmu, ko izmanto mūsdienu tīmekļa izstrādātāji.
Universāls instrumentu komplekts
Jaunais F12 komplekts palīdz izstrādātājiem ātri pāriet no problēmas uz risinājumu. Dažas no aizraujošajām jaunajām funkcijām ietver:
- UI atbildes analīzes un atmiņas profilēšanas rīki, lai palīdzētu izstrādātājiem izveidot ātras un elastīgas tīmekļa lietojumprogrammas.
- Reāllaika DOM Explorer un CSS pārbaudītājs ir atjaunināts kopā ar lapu, lai izstrādātāji varētu interaktīvi izpētīt, kā dinamiskais saturs ietekmē izkārtojumu un stilu
- Iespēja atkļūdot JavaScript, kas tiek palaista ātri, neatsvaidzinot lapu, lai izstrādātāji varētu ātrāk sākt darbu
Izmantojot F12 rīkus, pamanīsit daudzus citus uzlabojumus, kas palīdzēs sasniegt ātru, interaktīvu darbplūsmu:
- Ātra piekļuve šiem rīkiem, ar peles labo pogu noklikšķinot uz izvēlnes vienuma ar "pārbaudes vienumu"
- Efektīva tastatūras mijiedarbība
- Plaša iespēja kopēt elementus un komponentus no rīkiem, lai tos varētu ielīmēt jebkurā redaktorā bez papildu formatēšanas
Vissvarīgākais ir tas, ka šie rīki tagad parāda vispilnīgāko un precīzāko pieejamo informāciju, sākot no @media and!important kārtulām programmā DOM Explorer un beidzot ar elementu izmaksu struktūru lietotāja interfeisa atbildes profilā. Šie rīki nodrošina arī tieši nozīmīgus datus; piemēram, atmiņas profilētājs identificē DOM mezglus, kas ir “tiešraidē”, bet uz kuriem nav atsauces no iezīmēšanas vai renderēšanas koka.
Jaunā F12 komplekta iespējas ir pieejamas arī programmā Visual Studio, tāpēc izstrādātājiem ir konsekventa un vienmērīga pieredze visos mūsu tīmekļa izstrādes rīkos un platformās.
Tagad īsi apskatīsim šos rīkus darbībā.
Lietojumprogrammu profilēšana, izmantojot lietotāja interfeisa reaģētspējas analizatoru
UI reaģēšanas rīks palīdz saprast, kur tiek tērēts CPU laiks, lai jūsu lietojumprogramma varētu pilnībā izmantot savu veiktspējas potenciālu. Šis rīks sniedz jums nepieciešamo ieskatu, lai izprastu Internet Explorer iekšējo darbību, nodrošinot HTML, CSS un JavaScript koda vizualizāciju izpildlaikā, kā arī svarīgus blakusefektus, piemēram, iezīmēšanu un atkritumu savākšanu. Vienā mirklī varat precīzi redzēt, cik ātri jūsu lietotne reaģē un kā tā tiek renderēta. Tas ļaus jums noteikt konkrētus avotus vājās vietas un viedāka pieeja tās optimizācijai.
Vietņu profilēšana
Analizējiet lietojumprogrammu atmiņas lietojumu, izmantojot atmiņas profilētāju
Šis atmiņas analizators palīdzēs izvairīties no atmiņas noplūdēm vai pārmērīga atmiņas patēriņa. Tīmekļa lietojumprogrammu izveide, kas darbojas klientiem visu diennakti vai kompleksi interaktīvās lietojumprogrammas bieži vien nozīmē, ka to izstrādātājam ir jāpievērš īpaša uzmanība atmiņas lietošanas problēmām.
Lai gan JavaScript ir atkritumu savākšanas vide, lietojumprogrammas parasti patērē vairāk atmiņas tikai tāpēc, ka objektu atsauces nav (un nevar) atbrīvot. Atmiņas analizators palīdz noteikt šīs problēmas, sniedzot informāciju par katru lapas objektu neatkarīgi no tā, vai tas ir JavaScript objekts vai DOM. Izmantojot šo informāciju, varat, piemēram, redzēt, cik daudz atmiņas glabā elements un kādi objekti atbalsta tā noturību. Bet pats galvenais, varat salīdzināt divus momentuzņēmumus un redzēt, kas ir mainījies. Tas ļaus jums saprast, kāpēc jūsu lietojumprogramma izmanto vairāk atmiņas, un labot šo situāciju.
Kaudzes momentuzņēmums, kurā redzami atspējoti DOM elementi
Iegūstiet ātru izpratni par lietojumprogrammu veiktspēju, izmantojot Performance Dashboard
Lai palīdzētu ātri noteikt problēmas, kas ietekmē jūsu lapas veiktspēju, pārlūkprogrammā Internet Explorer 11 ir pieejams "lapas" logrīks ar nosaukumu Performance Dashboard, kuram var piekļūt, izmantojot īsinājumtaustiņu Ctrl+Shift+U vai atbilstošo izvēlnes vienumu Rīki (Alt+T ). Šis panelis dinamiski parāda statistiku programmā Internet Explorer par galvenajiem veiktspējas rādītājiem, piemēram, renderēšanas laiku, atmiņu, kadriem sekundē (fps) un CPU lietojumu. Veiktspējas informācijas panelim nav jāizmanto F12 rīki, un to var izmantot arī mūsdienu pārlūkprogrammās.
Izmantojot veiktspējas informācijas paneli, varat ātri noteikt lapu mijiedarbību, kas izraisa kadru ātruma samazināšanos vai augstu CPU lietojumu. Pēc tam varat pārslēgties uz F12, lai atkārtotu problēmu un atrastu risinājumu.
Elementu pārbaude un marķējuma un stilu modificēšana, izmantojot DOM Explorer
DOM Explorer ļauj viegli interaktīvi iestatīt @media vaicājumus un CSS noteikumus un to rekvizītus. Tāpēc lietotāja interfeiss jūsu lietojumprogramma kļūst par ļoti atsaucīgu vairāku ierīču saskarni. Varat ātri sākt darbu tīmekļa lapā, ar peles labo pogu noklikšķinot un pārbaudot vajadzīgo elementu, kas palaidīs F12 rīkus kopā ar šo elementu, kas atlasīts DOM Explorer, dinamiski parādot DOM un piemērotos CSS noteikumus. Renderētās DOM un CSS tabulas ir dinamiskas, ļaujot jums saprast, kā programma Internet Explorer interpretē jūsu marķējuma, CSS stilu un noteikumu īpatnības. Mijiedarbojoties ar lapu vai mainot to, izmantojot DOM Explorer, veiktās izmaiņas tiks parādītas nekavējoties.
Pārbaudiet marķējumu un stilus
DOM Explorer ļauj viegli iegūt pareizo īpašuma vai rekvizītu vērtību, izmantojot IntelliSense, veicot izmaiņas CSS tabulā. Varat viegli redzēt, kuri rekvizīti ir nepareizi vai neatpazīti, un pēc tam nokopēt kārtulu, lai to atkārtoti lietotu savā avotā.
JavaScript atkļūdošana, izmantojot atkļūdotāju un konsoli
Jaunais JavaScript atkļūdotājs sniedz rīkus neuzticama koda atrašanai un ātrai labošanai. JavaScript atkļūdotājs var atvērt un skatīt vairākus failus pat tad, ja jūsu skriptu bibliotēka ir samazināta, iestatīt pārtraukuma punktus un trasēšanas punktus, pārbaudīt JavaScript objektus, vērtības, tvēruma ķēdes un skatīt steka saturu. Palaižot F12 rīkus, nekavējoties tiks palaists arī JavaScript atkļūdotājs, lai jūs varētu nekavējoties sākt darbu
Atkļūdošanas laikā jūs, iespējams, vēlēsities mijiedarboties ar savu vietni. Konsole ir galvenais šī uzdevuma rīks. Konsolei varat piekļūt jebkurā laikā, kas padara šīs interaktīvās vides izmantošanu ar IntelliSense un objektu renderētājiem efektīvu. Konsole nodrošina arī plašu specializētu API klāstu, kas ļauj reģistrēt izvadi, analizēt noteiktā kodā pavadīto laiku un nodrošināt objektu renderētājus, kad nepieciešams veikt padziļinātu JavaScript objektu pārbaudi.
Summējot
Šajā emuāra ziņojumā ir tikai skice jauno elementu aprakstam F12 rīkos. tu vari atrast pilns saraksts jauns funkcionalitāte pieejams izstrādātājiem pārlūkprogrammā Internet Explorer 11 rakstā "Kas jauns F12 rīkos" un "Internet Explorer 11 priekšskatījuma izstrādātāja rokasgrāmatā". Varat arī uzzināt vairāk Internet Explorer testa demonstrācijā "F12 Adventure".
Mēs ceram uz jūsu atsauksmēm un ceram uz ilgstošu sadarbību ar izstrādātāju kopienu. Kopīgojiet savus ieteikumus, izmantojot pārlūkprogrammas Internet Explorer 11 rīku Atsauksmju un ieteikumu vai savienojuma vietni.
P. J. Hough
, Visual Studio viceprezidents
