Браузерде мүчүлүштүктөрдү оңдоо
Браузерде мүчүлүштүктөрдү оңдоо
Келгиле, код жазуудан тыныгуу алып, аны оңдоо жөнүндө сүйлөшөлү.
Мүчүлүштүктөрдү оңдоо – скрипттеги каталарды табуу жана оңдоо процесси. Бардык заманбап браузерлер жана башка көптөгөн иштеп чыгуу чөйрөлөрү мүчүлүштүктөрдү оңдоо куралдарын, мүчүлүштүктөрдү оңдоону абдан жөнөкөйлөтүүчү атайын графикалык интерфейсти колдойт. Ал ошондой эле биздин кодубузда эмне болуп жатканын кадам сайын байкоого мүмкүндүк берет.
Биз Chrome браузерин колдонобуз, анткени анын мүмкүнчүлүктөрү жетиштүү, башка браузерлердин көпчүлүгүндө процесс окшош болот.
Булактар панели
Сиз орноткон Chrome версиясы бир аз башкача көрүнүшү мүмкүн, бирок эч кандай принципиалдуу айырмачылыктар болбойт.
Chrome'до иштеп, сыноо барагын ачыңыз.
F12 баскычын басып иштеп чыгуучунун куралдарын иштетиңиз (Mac: Cmd+Opt+I).
Булактар панелин басыңыз.
Биринчи иштетүүдө биз төмөнкүлөрдү алабыз:
Которуу баскычы файлдардын тизмеси менен өтмөктү ачат.
Аны басыңыз жана файл дарагынан hello.js тандаңыз. Бул жерде эмне пайда болот:
Интерфейс үч зонадан турат:
File Navigator зонасы (файл навигациясы үчүн панель) HTML, JavaScript, CSS файлдарын, анын ичинде баракта колдонулган сүрөттөрдү көрсөтөт. Бул жерде ар кандай Chrome кеңейтүүлөрүнүн файлдары да болушу мүмкүн.
Code Editor зонасы баштапкы кодду көрсөтөт.
Акырында, JavaScript мүчүлүштүктөрдү оңдоо аймагы (JavaScript мүчүлүштүктөрдү оңдоо панели) мүчүлүштүктөрдү оңдоо үчүн сакталган, биз ага бир аздан кийин кайтып келебиз.
Ресурстардын тизмесин жашыруу жана баштапкы код үчүн экран мейкиндигин бошотуу үчүн, ошол эле радио баскычын чыкылдатыңыз.Консол
Экрандын ылдый жагындагы Esc баскычын басканда, консоль чакырылат, анда сиз буйруктарды киргизип, аларды Enter баскычы менен аткара аласыз.
Көрсөтмөлөрдү аткаруунун натыйжасы дароо консолдо көрсөтүлөт.
Мисалы, 1+2 натыйжасы 3, ал эми hello("debugger") эч нерсе кайтарбайт, андыктан натыйжа аныкталбай калат:
Үзүлүү чекиттери
Келгиле, биздин сыноо баракчасынын коду кантип иштээрин карап көрөлү. hello.js файлында 4-сапты басыңыз. Ооба, кодду эмес, сандын өзүн басыңыз.
Жашасын! Сиз үзүү чекин койдуңуз. Эми сегизинчи саптагы 8 санын басыңыз.
Ушуну менен аякташыңыз керек (көк түстөрдү чыкылдатуу керек):
Үзүлүү чекити – бул мүчүлүштүктөрдү оңдоочу JavaScriptтин аткарылышын автоматтык түрдө тындыра турган коддун бөлүмү.
Аткаруу тындырылып турганда, биз өзгөрмөлөрдүн учурдагы маанилерин көрө алабыз, консолдо буйруктарды аткарабыз, башкача айтканда, кодду оңдоого болот.
GUIдин оң жагында биз үзгүлтүккө учураган чекиттердин тизмесин көрөбүз. Жана мындай пункттар көп болгондо, ал тургай, ар кандай файлдарда, бул тизме аларды натыйжалуу башкарууга жардам берет:
Коддогу үзүлүү чекитине тез өтүңүз (оң панелде аны чыкылдатуу менен).
Убактылуу токтотуу чекитинин белгисин алып салуу менен өчүрүңүз.
Чычкандын оң баскычын чыкылдатып, "Өчүрүү" баскычын тандоо менен үзүлүүчү чекитти алып салыңыз.
…жана башка.
Шарттуу үзүү чекиттери
Саптын номерин оң баскыч менен чыкылдатуу шарттуу үзүү чекин түзүүгө мүмкүндүк берет. Мындай пунктту түзүүдө сиз көрсөтүү керек болгон туюнтма туура болгондо гана иштейт.Бул өзгөрмөнүн белгилүү бир маанисинде же функциянын белгилүү бир параметрлеринде гана токтошубуз керек болгондо ыңгайлуу.
мүчүлүштүктөрдү оңдоо буйругу
Коддун аткарылышын түз эле коддун ичинен мүчүлүштүктөрдү оңдоо буйругу аркылуу тындырууга болот:
funtion hello(name) {
let phrase = 'hello ${name}!';
мүчүлүштүктөрдү оңдоочу; // <-- мүчүлүштүктөрдү оңдоочу бул жерде токтойт
function(phrase);
}
Мындай буйрук иштеп чыгуу куралдары ачык болгондо гана иштейт, антпесе браузер аны этибарга албайт.
Келгиле, токтоп, айлананы карап көрөлү
Биздин мисалда hello() функциясы баракты жүктөө учурунда чакырылат, андыктан мүчүлүштүктөрдү оңдоону баштоонун эң оңой жолу (биз үзгүлтүккө учуратуу чекиттерин койгондон кийин) аны жөн эле кайра жүктөө. F5 (Windows, Linux) же Cmd+R (Mac) басыңыз.
Аткаруу төртүнчү сапта үзүлөт (үзүү чекити жерде):
Коддо эмне болуп жатканын түшүнүү үчүн, оң жактагы жебелерди басыңыз:
Watch - ар кандай туюнтмалар үчүн учурдагы маанилерди көрсөтөт.
Сиз + баскычын басып, туюнтманы киргизе аласыз. Мүчүлүштүктөрдү оңдоочу анын маанисин көрсөтөт, аны аткаруу учурунда автоматтык түрдө кайра эсептейт.
Call Stack - уяланган чалуулардын тизмегин көрсөтөт.
Мүчүлүштүктөрдү оңдоочу учурда index.html ичиндеги скрипт тарабынан чакырылган hello() чалуусунун ичинде (эч кандай функция жок, ошондуктан ал "анонимдүү" деп аталат).
Эгерде сиз стек объектисин чыкылдатсаңыз (мисалы, "анонимдүү"), мүчүлүштүктөрдү оңдоочу тиешелүү кодго секирет жана бизде аны талдоо мүмкүнчүлүгү бар.
Агымды көрсөтөтЛокалдык функциялардын локалдык өзгөрмөлөрүн көрсөтөт жана алардын маанилери баштапкы коддо так көрсөтүлгөн.
Global глобалдык өзгөрмөлөрдү тизмелейт (башкача айтканда, кандайдыр бир функциялардан тышкары).
Ошондой эле бул ачкыч сөз бар, аны биз изилдей элекпиз, бирок жакында жасайбыз.
Сценарийди этап-этабы менен аткаруу
Эми сценарийибизди карап көрөлү.
Бул үчүн, оң панелдин жогору жагында баскычтар бар. Келгиле, аларды карап көрөлү.
– "Resume": аткарууну улантуу, F8 тез баскычы.
Коддун аткарылышын улантат. Эгерде дагы үзгүлтүккө учуратуу чекиттери жок болсо, анда мүчүлүштүктөрдү оңдоочу тарабынан көзөмөл жок, аткаруу жөн гана уланат.
Бул жерде биз аны басканда эмнени көрөбүз:
Коддун аткарылышы улантылды, say() ичинде дагы бир үзгүлтүккө учурады жана мүчүлүштүктөрдү оңдоочу аткарууну кайра тындырды. Оң жактагы "Чалуу стек" пунктуна көңүл буруңуз: тизмеде дагы бир чалуу пайда болду. Биз азыр айтабыз () ичиндебиз.
– "Кадам": төмөнкү буйрукту аткарыңыз, F9 тез баскычы.
Төмөнкү билдирүүнү аткарат. Аны азыр бассак, эскертүү пайда болот.
Бул баскычты кайра-кайра басуу скрипттеги бардык нускамаларды биринин артынан бири басып өтөт.
– "Step over": төмөнкү буйрукту аткарыңыз, бирок функциянын ичине кирбестен, F10 баскычын тез басыңыз.
Мурунку "Кадам" буйругуна окшош иштейт, бирок кийинки инструкция функция чакырыгы болсо, башкача иш кылат (мааниси: эскертүү сыяктуу орнотулган эмес, бирок биз жарыялаган функция).
Салыштыруу үчүн, "Кадам" буйругу уяланган функция чакыруусуна кирет жана биринчи сапта аткарууну тындырат, ал эми "Step over" ички кодун өткөрүп жиберип, биз үчүн байкалбагандай уяланган функция чакырыгын аткарат.Функция чакырылгандан кийин аткаруу дароо токтотулат.
Функция чакырыгынын ичинде эмне болуп жатканын көрүү бизге кызыкдар болбосо, бул жакшы.
– “Step into”, F11 тез баскычы.
Бул "Кадамга" окшош, бирок асинхрондук функция чалууларында өзүн башкача кылат. Эгер сиз JavaScriptти жаңыдан үйрөнүп жатсаңыз, айырманы этибарга албай койсоңуз болот, анткени бизде азырынча асинхрондук чалуулар жок.
Келечекте "Step" буйругу кийинчерээк аткарыла турган setTimeout (пландаштырылган функцияны чакыруу) сыяктуу асинхрондук аракеттерди этибарга албай турганын унутпаңыз. "Step into" алардын кодун киргизип, керек болсо аларды күтөт. Көбүрөөк маалымат үчүн DevTools колдонмосун караңыз.
– "Чыгуу": учурдагы функциянын аягына чейин аткарууну улантыңыз, Shift+F11 жарлык баскычы.
Аткаруу ишин улантат жана учурдагы функциянын эң акыркы сабында токтойт. Бул кокустан аркылуу уяча чалууга киргенде ыңгайлуу, бирок бул бизди кызыктырбайт жана аны мүмкүн болушунча эртерээк аягына чейин улантууну каалайбыз.
– бардык токтотуу чекиттерин иштетүү/өчүрүү.
Бул баскыч коддун аткарылышына таасир этпейт, ал үзгүлтүккө учуратуу чекиттерин жапырт иштетүү/өчүрүү үчүн гана мүмкүнчүлүк берет.
– ката болгондо автоматтык тыныгууну иштетүү/өчүрүү.
Иштетилгенде, иштеп чыгуучунун куралдары ачык болсо, скриптти аткаруудагы ката аны автоматтык түрдө тындырат. Андан кийин эмне туура эмес болгонун көрүү үчүн мүчүлүштүктөрдү оңдоочудагы өзгөрмөлөрдү талдай алабыз.Демек, эгер биздин скрипт ката менен өлүп калса, биз мүчүлүштүктөрдү оңдоочуну ачып, бул параметрди иштетип, анын кайда өлүп жатканын жана ошол учурда контекст кандай экенин көрүү үчүн баракты кайра жүктөй алабыз.
Ушул жерден улантыңыз
Коддун сызыгын оң баскыч менен чыкылдатуу "Бул жерден улантуу" деген жакшы параметри бар контексттик менюну ачат.
Бул биз бир сызыкка бир нече кадам секирип өтүүнү кааласак, бирок үзгүлтүккө учуроо чекин коюуга жалкоо болгондо ыңгайлуу.
Каттоо
Биздин коддон консолго бир нерсени киргизүү үчүн console.log функциясы бар.
Мисалы, бул консолго 0дөн 4кө чейинки маанилерди басып чыгарат:
// натыйжасын көрүү үчүн, адегенде консолду ачыңыз
alert (i = 0; i < 5; i++) {
console.log("value", i);
}
Сайттын кадимки колдонуучусу бул жыйынтыкты консолдогудай көрбөйт. Аны көрүү үчүн же консолду иштеп чыгуучунун куралдар панелин ачыңыз же башка куралдар тилкесинде Esc баскычын басыңыз: бул ылдыйдагы консолду ачат.
Эгер сиз тиркемеде каттоону туура түзсөңүз, анда коддо эмне болуп жатканын мүчүлүштүктөрдү оңдоочусуз аныктай аласыз.
Бардыгы
Скрипттин аткарылышын тындыруунун үч жолу бар:
Үзүлүү чекиттери.
Коддогу мүчүлүштүктөрдү оңдоочу буйруктарды колдонуу.
Ката (иштеп чыгуучунун куралдары ачык болсо жана баскыч "иштетилген" болсо).
Биз токтогондо, биз мүчүлүштүктөрдү оңдой алабыз: өзгөрмөлөрдү талдап, көйгөйдү табуу үчүн процессти басып өтүңүз.
Иштеп чыгуучунун куралдарында дагы көптөгөн варианттар бар.