Chrome Developer Tools - mening fikrimcha, eng yaxshi veb-ishlab chiqish vositasi. Barcha kerakli veb-qo'shimchalarni yaratish va takomillashtirish uchun barcha zarur funktsiyalardan o'ch olish. U bilan Ale, go'yo men boshqa vosita bo'lganimdek, siz mashq qilishni o'rganishingiz kerak. Keling, asoslardan boshlaylik.

Konsol interaktiv JavaScript tarjimoni rolini o'ynaydi. Ular, shuningdek, ish soatlari va veb-dasturlar uchun ayblangan kechirimlarga ega. Agar siz yorliqlarga yaqin bo'lsangiz, konsol Esc tugmasini yoki ekranning pastki chap burchagidagi konsol belgisini bosish orqali boshqa barcha yorliqlarda mavjud.

Konsol chakana sotuvchiga past darajadagi va asosiy funktsiyalarga kirish imkonini beradi. Keling, asosiylarini ko'rib chiqaylik:

console.log() , console.error() , console.warn() va console.debug()

Konsolda ko'rsatishning asosiy funktsiyalari konsolda qo'shimcha xabarlarni ko'rsatishga imkon beradi. Ogohlantirishlarning quyidagi tasnifi ko'rib chiqiladi: error() - kechirim sifatida ogohlantirish, warn() - ogohlantirish, debug() - ogohlantirish sifatida.

Ushbu funktsiyalar cheklanmagan miqdordagi parametrlarni qabul qiladi, bu sizga o'tmishdagi bir qator o'zgarishlarni kiritish va ularni quyidagi takliflarda birlashtirish imkonini beradi:

Console.log("Ro'yxatdan o'tish vaqti:", 1121102802);

Shuningdek, ê podtrimka formatuvannya:

Console.log("Ro'yxatdan o'tish vaqti: %d", 1121102802);

Qo'llab-quvvatlanadigan Vkazivniki formati:

konsol izi()

Nuqtalardan olingan tvitlar to'plamini kodda ko'rsating, de bouv tweet usuli. Wiki stekiga fayl nomlari va qator raqamlari hamda trace() usulidagi teg tegi bitta nuqtada kiradi.

console.assert()

Assert funktsiyasi birinchi parametr tomonidan o'tkazilgan qiymatlarni tekshiradi va xuddi kechirim kabi, qo'ng'iroqlar to'plamidan darhol konsolga kechirim yozadi:

var two = 3; var three = 2; console.assert(ikki< three, "два меньше трех");

console.group() , console.groupCollapsed() va console.groupEnd()

In vivodu guruhlash funktsiyalari. group() funktsiyasi yangilanadigan guruhni qaytaradi, parametr sifatida u guruh nomini qabul qiladi (formatlash console.log() da bo'lgani kabi formatlangan) va groupEnd() funksiyasi qolganlarini yopadi. guruh. groupCollapsed() funktsiyasi group() funksiyasiga o'xshaydi, lekin guruh yaratdi zamovchuvannyam uchun xotira.

console.time() va console.timeEnd()

Kodning soatini hisoblash funktsiyalari. time() funksiyasi taymerni ishga tushiradi va timeEnd() funksiyasi taymerni chaqiradi va uning qiymatini ko'rsatadi. Standart funksiya taymer nomini majburiy parametr sifatida qabul qiladi.

Filtrni eslatish

Kengaytmalar konsolining pastki o'ng burchagida turdan keyin filtr ko'rsatiladi. Hammasi barcha ogohlantirishlarni so'raydi, Xatolar - kechirim va console.error() funksiyasini ko'rsatish, Ogohlantirishlar - console.warn() funksiyasining kechikishi va ko'rsatilishi, Logs - console.log() funktsiyasining chiqishi, Debug - chiqishi console.debug() funktsiyasi, konsol .timeEnd() bu boshqa ma'lumotlar.

Boshqa yorliqlar bilan o'zaro aloqa

tuzatuvchi;

Brauzer tuzatuvchi qatorga yetganda; har qanday kodda skript shu nuqtada skriptni avtomatik ravishda yuklab oladi va Skriptlar yorlig'iga (Manbalar) o'tadi.

$(), $$() va $x()

Elementlarni tanlashni soddalashtiradigan funktsiyalarni konsolda bajarish ehtimoli kamroq. $() funktsiyasi o'tgan selektorga mos keladigan birinchi elementni aylantiradi. Boshqa parametr sifatida siz kontekstni hazilga o'tkazishingiz mumkin:

$("head") // bosh elementni aylantiring $("head", document.body) // tanasi bosh elementni bekor qilmasligi uchun nullni aylantiring

$$() funktsiyasi $() ga o'xshaydi, lekin barcha ma'lum elementlarni aylantiradi:

$$("skript") // barcha skript elementlarini aylantiradi $$("skript", document.body) // tanadagi barcha skript elementlarini aylantiradi

$x() funksiyasi XPath ifodasiga mos keladigan barcha elementlarni aylantiradi. Kontekstni boshqa parametr sifatida o'tkazishingiz mumkin:

$x("//skript") // barcha skript elementlarini aylantirish $x("skript", document.body); // tanada harakatlanadigan barcha skript elementlarini aylantiring

Ko'pgina JavaScript ramkalari o'zlarining $() funktsiyasini tayinlaydi va konsol funktsiyasining qiymati ham u bilan bog'liq holda o'zgartiriladi.

$0 — $4

Konsol "Elementlar" yorlig'ida ko'rilgan qolgan beshta elementni xotiradan saqlaydi. Ularga kirish uchun siz $0, $1, $2, $3 va $4 ni o'zgartirishingiz kerak. $0 elementni ko'rish uchun to'lovni tejaydi, $1 - old va hokazo.

$_

Change $_ Konsol buyrug'ining qolgan qismini bajarish natijasini oladi. Tse boshqa jamoada bir jamoaning natijasini yutish imkonini beradi. Cherzí-da vikonati tí buyruqlarini sinab ko'ring:

1337/42; console.log("%d", $_);

tekshirish()

inspect() funksiyasi kirishdagi oʻtuvchi obyekt yoki elementni tekshiradi:

Inspect($("head script")) // Elementlar yorlig'ini ko'rsating va o'rta boshni topish uchun birinchi skript tegini ko'ring

Ob'ekt Konsol Brauzer qo'shimchalariga kirish uchun yutib oling (masalan, Firefox uchun veb-konsol). U bilan ish bor turli xil brauzerlar, haqiqat ortida ale qi usullari va quvvat usima brauzerlari tomonidan qo'llab-quvvatlanadi.

ga kirish Konsol global ob'ektning kuchi orqali ko'rish mumkin, ya'ni: Brauzer uchun oyna (JavaScript-da), ishchilar uchun WorkerGlobalScope maxsus yo'l quvvat konsoli orqali kirish. Vídomy yak Window.console, va soddalik uchun biz unga quyidagicha murojaat qilamiz: "konsol".

Console.log("Ko'rsatilgan havolani ochib bo'lmadi")

metodi

Iloji bo'lsa, belgilangan ob'ektni XML/HTML formatida ko'rsatadi. Bu JavaScript ob'ekti emas ("console.dir()" kabi ko'rinadi).

Vikoristannya

Konsolda matnni ko'rish

Ko'pincha, Konsol matn qatorlarini va boshqa turdagi ma'lumotlarni ko'rsatishda g'alaba qozonadi. console.log() , console.info() , console.warn() , console.error() funksiyalarini qanday yaratishingiz mumkinligini koʻrish uchun quyidagi toifalardan foydalaning. Їx vysnovok stylyzirovaniya boshqacha tarzda, va siz vikoristovuvavat iltry, scho nadayutsya brauzer, schob Bachit faqat nutqlar, scho siz tsíkavlyat mumkin.

Є ko'rish vikoristannya funktsiyalarining ikki yo'li; siz shunchaki satrlari bir qatorda ko'rinadigan ob'ektlar ro'yxatini o'tkazishingiz mumkin, shundan so'ng u konsolda ko'rsatiladi yoki almashtirish belgilari va ulardagi almashtirish uchun ob'ekt parametrlari ro'yxati bilan qatorni keltirishingiz mumkin.

Bitta ob'ektni ko'rish

Bitta ob'ektni ko'rishning eng oddiy usuli:

Var someObject = (str: "Ba'zi matn", id: 5); konsol jurnali (someObject);

Visnovok shunday bo'ladi:

((str:"Ba'zi matn", id:5))

Bir qator ob'ektlarni ko'rish

Siz bir nechta ob'ektlarni chaqirilayotgan funksiya bilan bekor qilish orqali ko'rsatishingiz mumkin:

Var avtomobil = "Dodge Charger"; var someObject = (str:"Ba'zi matn", id:5); console.info("Mening birinchi mashinam a edi", avtomobil, ". Ob'ekt: ", someObject);

Visnovok shunday bo'ladi:

Mening birinchi mashinam Dodge Charger edi. Ob'ekt: ((str:"Ba'zi matn", id:5))

Niqoblar qatorlarini qayta ishlash

Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6) joker belgilarni (joker belgilar) qo'llab-quvvatlaydi. Qatorni usullardan biriga o'tkazishda siz quyidagi belgilarni yutib olishingiz mumkin:

Teri niqobi parametrlar ro'yxatidan haqoratli argumentni tanlaydi. Butt:

Uchun (var i=0; i<5; i++) { console.log("Hello, %s. You"ve called me %d times.", "Bob", i+1); }

Visnovok shunday bo'ladi:

Salom Bob. Siz menga 1 marta qo'ng'iroq qildingiz. Salom, Bob. Siz menga 2 marta qo'ng'iroq qildingiz. Salom Bob. Siz menga 3 marta qo'ng'iroq qildingiz. Salom, Bob. Siz menga 4 marta qo'ng'iroq qildingiz. Salom Bob. Siz menga 5 marta qo'ng'iroq qildingiz.

Konsol ko'rinishini stilizatsiya qilish

Konsolda bir soat davomida CSS uslublarini kiritish uchun "%c" direktivasini o'zgartirishingiz mumkin. Direktivdan oldingi matnning bir qismi uslublanmagan, undan keyingi qismi stilize qilinadi:

Console.log("Bu %cMening zamonaviy xabarim", "rang: sariq; shrift uslubi: kursiv; fon rangi: ko'k; to'ldirish: 2px;");

Eslatma: CSS uslublarida katta quvvatni rag'batlantiradi; lekin siz makkajo'xori ko'rinadigan narsalarni sinab ko'rishingiz va hayratga tushishingiz kerak.

Konsolda guruhlardan foydalanish

Kiyinish materiallarini vizual tarzda birlashtirib, taqdimotni tashkil qilish uchun guruhning hissalarini tanlashingiz mumkin. Bloklarni joylashtirishni yaratish uchun console.group() ga qo'ng'iroq qiling. console.groupCollapsed() usuli shunga o'xshash, lekin u yangi katlama blokini yaratadi, shuning uchun uni o'qish uchun ochish uchun tugmani bosishingiz mumkin.

Eslatma: Yoqib yuborilgan guruhlar hali Gecko'da ko'rsatilmagan; groupCollapsed() usullarining hech biri group() kabi ishlamaydi.

Mavzular guruhini tark etish uchun console.groupEnd() ga qo'ng'iroq qiling. Butt:

Console.log("Bu tashqi daraja"); konsol guruhi(); console.log("2-daraja"); konsol guruhi(); console.log("3-daraja"); console.warn("3-darajadan ko'proq"); console.groupEnd(); console.log("2-darajaga qaytish"); console.groupEnd(); console.debug("Tashqi darajaga qaytish");

Visnovok shunday bo'ladi:

Taymerlar

Gecko 10 operatsiyalari vaqtini yaxshilash uchun konsol ob'ektida taymer trimi joriy etildi. Taymerni ishga tushirish uchun taymer nomini parametr sifatida uzatib, console.time () funksiyasini chaqiring. Soatni millisekundlarda belgilash uchun taymer nomi uchun console.timeEnd() ga qo'ng'iroq qiling va taymer nomi parametrini parametr sifatida o'tkazing. Yon tomondan siz soatiga 10 000 taymergacha ishlashingiz mumkin.

Keling, misolni ko'rib chiqaylik:

Console.time("javob vaqti"); ogohlantirish ("Davom etish uchun bosing"); console.timeEnd("javob vaqti");

Ogohlantirish oynasini yopish uchun zarur bo'lgan soat davomida ushbu kodni veb-konsolga yozing:

Shuni yodda tutingki, taymer nomi ham ishga tushirishda, ham taymer tirgovichida ko'rsatiladi.

Hurmat: Bu juda muhim: agar siz trafik vaqtini yozib olish uchun taymerni yutib olsangiz, u holda taymer operatsiya uchun eng yuqori soatni ko'rsatadi, o'sha soatda "Merezha" panelida ko'rsatilgan soat bir soatdan kamroq vaqt talab etiladi. sarlavha uchun. Agar siz xabarning asosiy soatiga kirishni yoqqan bo'lsangiz, unda sarlavha va asosiy matn uchun xabarning soati konsolga kirganingiz uchun javobgar bo'ladi.

Trasuvannya stack viklik

Konsol shuningdek, stek izini ko'rishni qo'llab-quvvatlaydi; Men sizga console.trace() ga qo'ng'iroq qilgan paytingizgacha bo'lgan tsiklni bosish funksiyalarining butun yo'lini ko'rsataman. Masalan, bu kod:

Foo(); foo() funksiyasi (bar funksiyasi() ( console.trace(); ) bar(); )

Konsolda ko'rish quyidagiga o'xshash bo'ladi:

Hurmat

• Firefox-dan qabul qiling, ya'ni yon tomon o'zining konsol ob'ektini, qaysi ob'ekt Firefox kabi konsol ob'ektini qayta ko'rsatadi.
• Gecko 12.0 dan oldin konsol ob'ektining usullari faqat Web Console panelini ochgan holda ishlagan. Gecko 12.0 dan boshlab, Wisnovok Doti tomonidan keshlangan, Docks Panel veb-konsoli ko'rinmaydi va shunday bo'lishi kerak.
• Varto shuni ko'rsatadiki, Firefox konsoli ob'ekti Firebug plagini kutayotgan ob'ekt bilan aralashib ketgan.

• Veb-konsol - Firefox veb-konsoli kabi API Console Wikis jarayonlari

Yilning qolgan qismida jQuery va Prototype, JavaScript kabi turli xil kutubxonalar paydo bo'lib, veb-loyihalar uchun skriptlarni yaratish bo'yicha o'rtada etakchi o'rinni egalladi. Bu soddaligi ortib borayotgan mashhurlik teng volodinnya ínstrumentaríêm uchun vimoga targ'ib qilish chakana sotuvchilari buyrug'iga qadar osilib JavaScript qatorlar minglab o'rniga mumkin, yangi qo'shimchalar, masalan, Gmail, paydo bo'lishiga olib keldi.

Dasturlarning murakkabligi ortib borishi natijasida, kechirishni samarali bilish imkonini beruvchi takomillashtirish uchun qattiq vositalar mavjud bo'lishi kerak. Qo'shimcha funktsiya uchun o'zgarish qiymatini osongina ko'ring alert() dolzarbligini yo'qotadi.

Ushbu bosqichda chakana sotuvchilarning zamonaviy vositalarining imkoniyatlarini qisqacha ko'rib chiqish amalga oshiriladi, bu esa JavaScript kodini yanada sodda jarayonda yaxshilashga yordam beradi. Chrome brauzerining imkoniyatlariga asosiy hurmat FireFox uchun Firebug plaginidir, ammo funktsiyalarning ko'proq tavsiflari boshqa vositalarda mavjud, masalan Dragonfly for Opera.

Konsol - ajoyib ko'rinish

Chakana sotuvchilar uchun dasturlarning aksariyati dasturchining eng yaxshi do'sti sifatida konsolga ega bo'ladi. Kengaytirilgan panel kechirimlar, DOM tahrirlari, JavaScript kodini o'zgartirish va boshqa shaxsiy bo'lmagan vazifalarni qayd etishda g'alaba qozondi. Brauzer ko'rinishiga qarab, konsol turli buyruqlar bilan chaqiriladi (menyu orqali to'g'ridan-to'g'ri tanlash uchun):

• Chrome brauzeri uchun va Opera uchun Dragonfly - Ctrl+Shift+I
• Firebug-F12

Konsol avtomatik ravishda kodlar uchun kechirimlarni ko'rsatadi, chunki ular skript oxirida paydo bo'ladi. Fayl va qator afv etish buyrug'i bilan ko'rsatiladi va sichqoncha tugmachasini bosish afv etish haqidagi kirish qismini o'zgartiradi.

Dani konsolda ko'rsatilgan

Konsol skript kodida kechirim ko'rsatish ehtimoli kam bo'lmasligi mumkin. Console API va Command Line API yordami uchun siz konsoldan ma'lumotlarni ko'rishingiz mumkin. Eng yaxshi jamoani toping .log().

Kod yaratilgan soatda robot kodining to'g'riligi teskari bo'lishi uchun o'zgarishlarning ma'nosini bilish kerak. Yakuniy amaliyot eng yaxshi funktsiyadir alert() vizual nazorat uchun. Biroq, ushbu usuldan foydalanish kodni dialog oynasidagi tugmani bosishdan oldin hal qilinishini bloklaydi.

Eng yaxshi usulga zamonaviy echimlar konsol jurnali konsol panelidagi o'zgarishlar qiymatlarini ko'rsatish uchun:

Console.log("Kapitan jurnali"); // konsol panelida "Kapitan jurnali" ni ko'rsatish

Hisoblangan qiymatlarni ko'rsatish uchun usulni burish mumkin:

calcPhotos() funksiyasi ( jami_foto_farq = jami_foto - oldingi_jami_foto; // console.log(jami_foto_diff); ) o'zgarishlarning qiymatlarini ko'rsatadi.

Bunday yondashuvning afzalligi g'alabali dialog usuliga teng alert()ê kodni buzmaydiganlar va chakana sotuvchi haqiqiy soatdagi o'zgarishlar uchun ma'lumotlardagi o'zgarishlarning qiymatini ko'rsatishi mumkin.

Vart = 3, p = 1; funksiya calcPhotos(jami_foto, oldingi_jami_foto) ( var total_photos_diff = total_photos - prev_jami_photos; // console.log(total_photos_diff) ga chiqish qiymati; // Yangilash qiymati t = t*1.3; p = p*to;(t. p); ), 100);

Vizyon xotirasi

Hoverlangan ilova uchun sikl konsolda juda ko'p o'zgartirilgan qiymatlarni ko'rsatadi. Biroq, ko'pincha turli xil ma'lumotlarni qo'lda vizual ravishda ajratish kerak bo'ladi, shunda siz oyning kodida hurmatni oshirishni anglatishini samarali ko'rishingiz mumkin. Console API-da ushbu vazifalarni bajarishning bir qancha usullari mavjud.

console.info(): "ma'lumot" belgisini ko'rsating va ma'lumotni rangli ko'ring. Daniya usuli qo'lda turli podííí haqida properedzhennya vikoristovuvatime hisoblanadi.

console.warn(): "oldingi" belgisini ko'rsating va ma'lumotni rangli ko'ring. Parametrlarning chegaraga o'tishi haqida ma'lumot olish uchun qo'lda ko'z qisib qo'ying.

console.error(): "kechirim" belgisini ko'rsating va ma'lumotni rangli ko'ring. Afv va tanqidiy fikrlar haqida ma'lumot taqdim etish uchun qo'lda ko'z qisib qo'ying.

Eslatma: Chrome sotuvchisi vositasi konsolda ma'lumotlarni taqdim eta olmaydi.

Konsolda ma'lumotni ko'rsatishning turli usullarini tanlash ilmiy kuzatuvchiga ma'lumotlarni taqdim etish imkonini beradi. Ma'lumotni topshirish qo'shimcha yordam uchun bloklarga bo'linishi mumkin. G'alaba usuli console.group() :

// Birinchi guruh console.group("Foto hisoblash"); console.info("Umumiy farq endi" + jami_foto_farq); console.log(jami_fotolar_farq); console.groupEnd(); // Boshqa guruh console.group("O'zgaruvchini oshirish"); console.log("Hozirgi jami suratlar: " + t); console.log("Avvalgi jami suratlar hozir: " + p); console.groupEnd();

Bu butt konsolda ma'lumot to'playdi. Vizual tasvir turli brauzerlarda ishlaydi, Dragonfly for Opera-dagi ko'rinishlar ostidagi kichik ko'rinish:

Console API-dan mavjud usullarning kichik roʻyxatini koʻrsatish uchun kursorni ilova ustiga olib boring. Firebug-ning rasmiy tomonida tasvirlanganidek, boshqa ko'plab jigarrang usullar mavjud.

Skript kursini bekor qilish

Konsolda ma'lumotni ko'rish - bu oddiy usul, ammo kodni yanada tez va boy tarzda o'zgartirish mumkin.

Yangilash jarayonini osonlashtirish uchun siz kodning sarlavhasini ma'lumotlarga kirish bilan asosiy nuqtada to'xtatib qo'yishingiz mumkin. Buning uchun o'z-o'zidan qayta qurish nuqtalari mavjud.

To'xtash nuqtalari bilan Pratsiyuemo

To'xtash nuqtasini o'rnatish uchun "Skriptlar" yorlig'iga o'ting va ro'yxatdan kerakli skriptni tanlang. Endi bu shunchaki qator, siz skriptning ishlashini to'xtatishingiz kerak va faollashtirish uchun qator raqami bilan maydonni bosing - vizual ko'rsatkich paydo bo'ladi. Endi biz tomonni o'zgartiramiz va kod vazifa nuqtasida buziladi:

Agar vikonanny buzilgan bo'lsa, sichqoncha kursorini o'zgartirish va nalagojuvach bor yoki yo'qligini ustiga qo'yishingiz mumkin, siz hozirgi momentning ma'nosi uchun maslahat topasiz.

Keyin orqa panelda ko'rsatilishi mumkin bo'lgan qo'shimcha maxsus tugmalar uchun kodga amal qilishingiz mumkin:

Masofaviy panelda siz kodni, shu jumladan mahalliy va global o'zgarishlar dinamikasini o'zgartirishingiz mumkin.

Tozalash nuqtalari

Kodni takomillashtirish jarayonida ong uchun kodni va qo'shiqchilarning ongini yaxshilash kerak. Misol uchun, agar sizning skriptingizda teri iteratsiyasi 50 millisekund davom etadigan sikl bo'lsa, teridagi tishdan keyin viking jarayonini boshlash noqulay bo'ladi, agar bizga 300 dan ortiq iteratsiya kerak bo'lsa. Bunday vipadkív ê umovny revivalnya uchun.

Kichkina qizga kelsak, kodni o'zgaruvchining qiymati bo'lgan soatgacha tozalash kerak emas. jami_foto_farq 200 dan oshmaydi.

Aqlning uzilish nuqtasini faollashtirish uchun siz sichqonchaning o'ng tugmasi bilan to'xtash nuqtasini bosishingiz va "To'xtash nuqtasini tahrirlash" ni tanlashingiz va aqlning uzilish nuqtasini tahrirlash dialogini ochishingiz kerak.

Kod uchun to'xtash nuqtasini o'rnating

Brauzerda chakana sotuvchi interfeysi yordami uchun to'xtash nuqtalarini qo'lda o'rnatmang. Ba'zan o'rnatuvchini koddan maxsus buyruq bilan ishga tushirish osonroq. Quyida ko'rsatilgan dumbada qo'shiq onglari yordamida kodni yozishni qanday to'xtatishingiz mumkinligi ko'rsatilgan:

Agar (jami_photos_diff > 300) (tuzatish vositasi; // tuzatuvchini ishga tushiring va kodni buzing)

Kodni buzishning boshqa usullari

Krym vykoristannya qayta yozish nuqtalari, íinstrument rozrobnik nadaê ínshí posobností zupiniti vykonannya koda yilda raznyh vipadki.

DOMni o'zgartirganda Zupinka

Agar siz DOM o'zgarishlarini boshqarish uchun kodning bir qismini o'zgartirishingiz kerak bo'lsa, sotuvchi vositasi sizga DOM tugunini o'zgartirganda kodni tuzatish usulini beradi.

HTML-kod panelida kerakli elementda sichqonchaning o'ng tugmachasini bosganingizda, DOMni o'zgartirganda qadam kodini tanlashingiz mumkin (atributlarni o'zgartirish, tugmalarni qo'shish / o'chirish, elementni olib tashlash). Kodni qayta belgilang va elementlarni o'zgartirganda, kod ziplanadi.

Barcha yoki buzilmagan uzumlarning paydo bo'lishida Zupinka

Chakana sotuvchining ko'proq vositalari vinyetka ko'rinishi bilan skriptni tahrirlash imkonini beradi. Chrome brauzerida ushbu funksiya interfeysning pastki qatoridagi qo'shimcha "To'xtatib turish" belgisi orqasida bo'lishi mumkin.

Siz tanlashingiz mumkin, ba'zi vinyatkív bude zupinkannya kod uchun. Pastda turgan dumba bitta qayta ishlanmagan va bitta qayta ishlangan (ko'ring | tutib olish bloki) kalitini ko'rsatadi:

Vart = 3, p = 1; funksiyasi calcPhotos(jami_foto, oldingi_jami_foto) (var total_photos_diff = total_photos - prev_jami_photos; // Birinchi guruh console.info("Umumiy farq hozir" + jami_foto_farq); // Yangilash qiymati t = t+5; p = p+s (jami_0_) ) ( otish 0; ) // Agar (jami_fotos_farq > 200) diffuz vinyetkalarni ($$("#nonexistent-element").hide(); ) catch(e) ( konsol. xato(e) ; ) ) ) setInterval(function() ( calcPhotos(t,p); ),50);

Wiki to'plamida kirish

Skriptingiz oxirida kechirim paydo bo'lishi bilanoq, dasturga kechirishni tahlil qilishda yordam beradigan ko'proq usullar tasvirlangan. Ale, tushunishni boshlamang, buning sababi bor.

Agar skript uzilib qolsa, u taqdim etilgan o'ng panelga hurmatni qo'ying asosiy ma'lumotlar Qo'ng'iroqlar to'plamining o'rtasida.

Vikilar to'plami kechirim paydo bo'lgan va kodning bitlari yozilgan nuqtaga olib borgan so'nggi yo'lni ko'rsatadi.

Pastda joylashgan kichkintoyda afv etish to'g'ridan-to'g'ri funksiya tomonidan ishlab chiqariladi incrementValues() kodni tishlarga nima olib keldi. Chakana sotuvchi vosita eng so'nggi havolalar to'plamini ko'rsatadi, bu sizga potentsial xavfli hududlarni aniqlash imkonini beradi.

Visnovok

Ushbu dars siz faol ravishda ishlab chiqishni rejalashtirgan asbobning batafsil hujjatlari uchun boshlang'ich nuqtadir.

Tasdiqlash konsoli yoki brauzerning veb-konsoli chakana sotuvchilar tomonidan kechirim so'zlarini ko'rsatish, hamdardlik oqimini tushunish va jurnalni saqlash soati uchun boshqa maqsadlarni qo'yish uchun muvaffaqiyatli deb ataladi. Ushbu ma'lumotlarga kirish maxfiy ob'ekt orqali ta'minlanadi.

Dunyo vaqti - console.time()

console.time() kodingizni o'rash uchun qancha vaqt ketishini aniqlash uchun sozlash mumkin.

Siz %c formatidagi spetsifikatsiyani o'chirib qo'yishingiz mumkin:

• Be-yaké pídstroyuvannya pravoruch víd %c maê vídpovídny parametr i metodí druk;
• Ushbu parametr emtpy tartibida bo'lishi mumkin, shuning uchun buyurtma oldidan CSS qoidalarini muzlatishning hojati yo'q;
• Agar %c formati uchun ikkita spetsifikatsiya mavjud bo'lsa, u holda boshqa usulga 2 va 3-parametrlarda tayinlangan o'z qoidasining 1-chi (%c da joylashtirilgan) va 2-tartibi aniq bo'ladi.
• Agar 3 %c format spetsifikatsiyasi topilsa, u holda 1, 2 va 3 pastki qatorlar o'z qoidalariga ega bo'lib, 2, 3 va 4-parametrlarga tayinlangan, aniqki, va hokazo...

Ko'rishlarni ko'rish uchun Wikoristannya guruhi

Visnovokni tajovuzkor usullar bilan konsolda isitiladigan guruhda aniqlash va joylashtirish mumkin:

• console.groupCollapsed() : bosish usulidan keyin bosilgan barcha yozuvlarni ko'rsatish uchun kengaytirish tugmasi orqali kengaytirilishi mumkin bo'lgan yig'iladigan yozuvlar guruhini yarating;
• console.group() : bir haftadan keyin ushbu usulga yozuvlarni biriktirishni tanlashingiz uchun kengaytirilgan yozuvlar guruhini yarating.

Kelgusi yozuvlar uchun identifikatsiyani quyidagi usul yordamida ko'rish mumkin:

• Console.groupEnd () : Tarmoqli guruhni tugatadi, bu usulga qo'ng'iroq qilingandan keyin ota-guruhdagi yangi yozuvlarni qayta ishlashga imkon beradi.

Guruhlar bir xil dam olish kunlarini yoki ularning terisining o'rtasida to'plarni tanlashga imkon berish uchun kaskadli bo'lishi mumkin:

Brauzer konsolidagi do'st

Brauzer konsoli boshqa oddiy sabablarga ko'ra o'zgartirilishi mumkin. Bu haqiqiy emas yoki veb-konsol brauzerda uzilishlarsiz ochilishi mumkin (ko'pgina brauzerlarda F12 tugmasi - div. Eslatmalar qo'shimcha ma'lumotni tanlash uchun quyida) va jurnal uchun usul Javascript obyekti konsolni quyidagini kiritish orqali bosish mumkin:

Keyin, "Kirish" tugmasini bosgandan so'ng, yangilanish konsolidagi displeyda Mening xabarim paydo bo'ladi.

console.log() oqim sohasida mavjud bo'lgan argumentlar soni qancha bo'lishidan qat'i nazar, chaqirishi mumkin. Dekilka argumentlar bir qatorda ular orasidagi kichik bo'shliq bilan buyurtma qilinadi.

Jurnal usuli konsoldagi taraqqiyotni ko'rsatadi:

Oddiy qatorlar uchun console.log() massivlar, ob'ektlar, sanalar, funktsiyalar va boshqalar kabi boshqa turlarni boshqarishi mumkin.

Ob'ekt qo'shimchalari o'chirilishi mumkin:

Ba'zi turlar, masalan, Sana va funksiya s ob'ektlari turli yo'llar bilan ko'rsatilishi mumkin:

Boshqa usullar

Jinoyat usuli jurnali zamonaviy brauzerlar Shu kabi usullarni ham qo'llab-quvvatlaydi:

Ko'tarilgan kichkintoyda barcha funktsiyalar biroz vaqt stampi bilan ko'rsatiladi, Chrome versiyalari 56.

Ushbu usullar jurnal usuliga o'xshash tarzda ishlaydi va turli konsollarda sozlamalar turli xil ranglar yoki formatlarda ko'rsatilishi mumkin.

Ba'zi nalagodzhuvachlar uchun boshqa ob'ektlar haqidagi ma'lumotlar matnga bosim o'tkazish yoki kichik trikutnik ( ), ob'ektning vakolatiga asoslangan holda kengaytirilishi mumkin. Yiqilgan ob'ektning quvvat qiymatlari jurnalda e'lon qilinishi yoki yopilishi mumkin. Dodatkovu div haqida ma'lumot. console.dir saytida

Tasdiqlangandan so'ng, siz bir qator dalillar keltirishingiz mumkin - ular qatorlar yoki boshqa ob'ektlar bo'lishi mumkin, chunki ular faqat shu holatda ortiqcha to'lanadi, bu noto'g'ri:

console.dirxml(ob'ekt) ob'ekt oqimi elementlarining boshqa XML fayli, mumkin bo'lgan yoki JavaScript fayli, aks holda. Viklik console.dirxml() uchun HTML elementlari va console.log() ga ekvivalent XML.

Masalan:

konsol. jadval ([ "Salom", "dunyo"]);

Qanday qilib ko'rsatadi:

Var personArr = [("shaxs identifikatori": 123, "ism": "Jhon", "shahar": "Melburn", "telefonNo": "1234567890"), ("shaxsning identifikatori": 124, "ism": "Ameliya" , "Joylashuv": "Sidney", "telefonNo": "1234567890"), ("shaxsning identifikatori": 125, "ism": "Emil", "locity": "Perth", "telefonNo": "1234567890" ) ( "PersonId": 126, "im": "Abraham", "loc": "Perth", "phoneNo": "1234567890")];

Console.table(personArr, ["ism", "shaxs identifikatori"]);

Yana bir bor hurmat qilaman, bu maqolalarda nimani ko'rishimiz mumkin robot konsoli boshqa kengaytmalar va brauzerlar tomonidan qo'llab-quvvatlanadiganlardan qat'i nazar, o'zi Firebase-da.

Otzhe, kob uchun biz konsolni bilamiz. Firebase-da maxsus yorliq mavjud:

Asosiy usullar

Otzhe, unda yozish usullarini ko'rib chiqaylik. Birinchi va eng oddiy - console.log(). Kichkintoyning old tomoniga "Salom, men konsolman" deb yozgan, bu usul bilan yordam so'ragan. Firebug-ning kechirimlarini ko'rib chiqqanlar, shuningdek, boshqa usul - console.error() natijasini tekshirdilar:

Tse usuli ko'proq beradi batafsil ma'lumot xotira haqida.

Agar console.log va console.error bir xil bo'lsa, u holda console.debug(), console.info() va console.warn() usullari mavjud. Konsolda badbo'y hid quyidagicha ko'rinadi:

Barcha usullar, masalan, console.info(), faylning o'zi va qator raqamini ko'rsatadi, de stinks chaqirildi.

Belgilangan ob'ekt usulining barcha atributlarini aks ettiruvchi ajoyib console.dir() usuli ham mavjud:

Va console.dirxml() usuli hujjatning XML yoki HTML tugunlari haqidagi barcha ma'lumotlarni ko'rsatadi:

Kuzatuv soati uchun ma'lumotlarni guruhlash

Ko'pincha konsolda ko'rsatiladigan ma'lumotlarni guruhlash zarurati uchun ayblanadi, masalan, agar ular tsiklda ko'rsatilsa. Buning uchun guruhni ochish uchun console.group() usuli va guruhni yopish uchun console.groupEnd() usulidan foydalaning. Siz shunday ko'rinasiz.