Կոդը կարող է պարունակել սխալներ: Դուք ամենայն հավանականությամբ թույլ կտաք սխալներ ... Օ, ինչի՞ մասին եմ խոսում: Դուք անպայման սխալներ եք գործելու, եթե դուք իհարկե մարդ եք, ոչ թե ռոբոտ։
Բայց զննիչում օգտվողները հիմնականում չեն տեսնում սխալներ: Այսպիսով, եթե սցենարում ինչ-որ բան այն չէ, մենք չենք տեսնի, թե որն է սխալը և չենք կարող շտկել այն:
Սխալները տեսնելու և սցենարների վերաբերյալ շատ այլ օգտակար տեղեկություններ ստանալու համար «ծրագրավորման գործիքները» տեղադրվել են վեբ զննիչներում:
Ծրագրավորողներից շատերը ծրագրավորման համար օգտագործում են Chrome կամ Firefox, քանի որ այդ զննիչներն ունեն ծրագրավորման լավագույն գործիքները: Մյուս զննիչներն էլ տրամադրում են ծրագրավորման գործիքներ, որոնք երբեմն ունեն հատուկ առանձնահատկություններ, բայց սովորաբար դրանք նման են Chrome-ի կամ Firefox-ի ծրագրավորման գործիքներին: Այսպիսով, ծրագրավորողների մեծամասնությունը ունի «սիրված» զննիչ և անցնում է մյուս զննիչներին, եթե խնդիրը հատուկ է տվյալ զննիչին:
Ծրագրավորման գործիքները ուժեղ են, դրանք շատ առանձնահատկություններ ունեն: Սկսելու համար մենք կսովորենք, թե ինչպես բացել դրանք, դիտել սխալները և գործարկել JavaScript հրամաններ:
Բացեք bug.html էջը։
Այնտեղ JavaScript կոդի մեջ սխալ կա: Այն թաքնված է սովորական այցելուի աչքից, ուստի եկեք բացենք ծրագրավորման գործիքները՝ այն տեսնելու համար:
Սեղմեք key:F12
կամ, եթե ունեք Mac, սեղմեք key:Cmd+Opt+J
։
Ծրագրավորման գործիքները ինքնուրույն կբացվեն բարձակի ներդիրում:
Դա ունի այսպիսի տեսք։
Ծրագրավորման գործիքների տեսքը կախված է Chrome-ի տարբերակից: Այն ժամանակ առ ժամանակ փոխվում է, բայց պետք է հիմնականում նման լինի:
- Այստեղ մենք կարող ենք տեսնել կարմիրով գունավորված սխալի հաղորդագրությունը: Այս դեպքում սցենարը պարունակում է անհայտ «lalala» հրաման:
- Աջ կողմում կա աղբյուրի վրա սեղմվող հղում
bug.html:12
տողի համարով, որտեղ սխալը տեղի է ունեցել:
Սխալի հաղորդագրության տակ կա կապույտ գույնի >
նշան։ Այն նշում է այն տողը, որտեղ մենք կարող ենք մուտքագրել JavaScript հրամաններ: Սեղմեք key:Enter
դրանք գործարկելու համար:
Այժմ մենք կարող ենք տեսնել սխալները, որը բավական է սկզբի համար: Ավելի ուշ մենք կանդրադառնանք ծրագրավորման գործիքներին և ավելի խորը կծանոթանանք սխալների ողղմանը հետևյալ գլխում info:debugging-chrome.
Սովորաբար, երբ մենք կոդ ենք գրում բարձակի (console) մեջ և սեղմում ենք `key:Enter`, այն կատարվում է:
Բազմաթիվ տողեր ներմուծելու համար սեղմեք `key:Shift+Enter`։ Այս կերպ կարելի է մուտքագրել JavaScript կոդի երկար ֆրագմենտներ:
Շատ այլ զննիչներ օգտագործում են key:F12
ծրագրավորման գործիքները բացելու համար:
Նրանց տեսքը և աշխատանքը բավականին նման է: Երբ իմանաք, թե ինչպես օգտագործել այս գործիքներից մեկը (կարող եք սկսել Chrome-ից), կարող եք հեշտությամբ անցնել մյուսին:
Safari (Mac զննիչ, հասանելի չէ Windows և Linux ՕՀ-երում) այն մի փոքր առանձնահատուկ է: Մենք նախ պետք է միացնենք «ծրագրավորման գործիքները»:
<<<<<<< HEAD Բացեք Preferences էջը և գնացեք "Advanced" պատուհան։ Ներքևում checkbox կա ծրագրավորման գործիքների համար։
Open Settings and go to the "Advanced" pane. There's a checkbox at the bottom:
540d753e90789205fc6e75c502f68382c87dea9b
Հիմա key:Cmd+Opt+C
կարող է բացել բարձակը (console): Նաև նշենք, որ հայտնվել է «ծրագրավորման գործիքներ» անվանմամբ ընտրացանկի նոր վերին կետը: Այն ունի շատ հրամաններ և տարբերակներ:
- Ծրագրավորման գործիքները մեզ թույլ են տալիս տեսնել սխալներ, գործարկել հրամաններ, ուսումնասիրել փոփոխականները և ավելին:
- Դրանք կարելի է բացել
key:F12
Windows-ի համար նախատեսված շատ զննիչներում՝ օրինակ Chrome-ում։ Mac-ի համար պետք է սեղմելkey:Cmd+Opt+J
, Safari:key:Cmd+Opt+C
(բայց անհրաժեշտ է նախ ակտիվացնել).
Այժմ մեր միջավայրը պատրաստ է: Հաջորդ բաժնում մենք կանդրադառնանք JavaScript- ին: