Մենք օգտագործում ենք Chrome DevTools- ը
- Արագ խմբագրեք HTML տարրերը
- Ընդլայնել բոլոր երեխայի տարրերը
- Վերաբնակեցնելը տեսուչին
- DOM տարրերի որոնում
- Պալատներ
- Բազմակի կուրսորը
- Հիմնադրել base64 պատկերը
- Pseudo- դասի անցումը
- Սյունակի ընտրություն
- Պատճենը cURL- ի համար
- Onscreen ստեղնաշար
- Վեբ կայքի զեկույցը
- Սենսորային սարքերի իմացում
- Օգտակար հատկանիշներ
Քանի որ անունը ենթադրում է, Chrome DevTools- ը կամ վեբ տեսուչը գործիք է, որը նախատեսված է վեբ մշակողների եւ դրանց հետ կապված մարդկանց համար: Վեբ տեսուչը թույլ է տալիս անել հետեւյալը.
- Ստուգեք ցուցադրման ճշգրտությունը:
- Հետեւեք JavaScript- ի սցենարների կատարմանը:
- Դիտեք ցանցի գործողությունները:
Ես օգտագործել եմ այս հոդվածը Կանարյան - Chrome- ի տարբերակը, որտեղ նոր հնարավորությունները փորձարկվում են, այնուհետեւ ընկնում Chrome- ի կայուն տարբերակ:
Տեսուչին սկսելու համար դուք կարող եք սեղմել էջի ցանկացած կետից եւ ընտրել «Դիտել Նյութի կոդը», դուք կարող եք նաեւ պարզապես սեղմեք Ctrl + Shift + C:
Արագ խմբագրեք HTML տարրերը
Սկսենք ամենապարզը `խմբագրման տարրերից:
Ինչպես ստուգել `
- Ընտրեք Գործիքներ էջանիշը:
- Ընտրեք որեւէ HTML տարր վահանակի ներսում:
- Կրկնակի սեղմել պիտակի վրա եւ փոխել, օրինակ, պիտակի անունը:
Երբ խմբագրումն ավարտված է, փակման պիտակը ինքնաբերաբար թարմացվի:
Ընդլայնել բոլոր երեխայի տարրերը
Ինչպես ստուգել `
- Գնալ Elements վահանակ:
- Ընտրեք տարր եւ Alt- ը պահելով, կտտացրեք տարրը ձախից սլաքին:
Վերաբնակեցնելը տեսուչին
Տեսչի վահանակը կարելի է սեղմել ինչպես զննարկիչի պատուհանի ներքո, այնպես էլ աջ կողմում: Օրինակ, վահանակի տեղադրումը ճիշտ է, երբ աշխատում է լայնակի էկրանով մոնիտորների վրա: Բացի այդ, տեսուչի վահանակը կարող է տեղադրվել առանձին պատուհանում եւ, օրինակ, տեղափոխվել է մեկ այլ մոնիտոր:
Ինչպես ստուգել `
- Ctrl + Shift + D - Փոխել տեղը
DOM տարրերի որոնում
Հավանաբար, ոչ շատերը, որոնց համար դա հայտնագործություն կլինի, բայց «Էլեմենտներ» էջում կարող եք որոնել DOM- ով:
Ինչպես ստուգել `
- Սեղմեք Ctrl + F եւ մուտքագրեք առաջարկվող որոնման հարցումը:
Պալատներ
Ընտրեք գույնը ներկապնակից Chrome- ի վերջին տարբերակներում գունային ընտրությունը տեղի է ունեցել որոշ փոփոխություններով. Ավելացրեց երկու պալատ, գույնի ընտրությունը հեշտացնելու համար:
Բազմակի կուրսորը
Տեղափոխեք կուրսորը եւ Ctrl- ն պահելու ընթացքում սեղմեք ցանկալի տարածքում, կուրսորը ավելացնելու համար: Դուք կարող եք վերացնել գործողությունը, օգտագործելով Ctrl + U.: Անձամբ ես երբեք օգտակար չեմ եղել:
Հիմնադրել base64 պատկերը
Ինչպես ստուգել `
- Անջատեք ցանցի վահանակը:
- Ընտրեք պատկերը
- Պատկերում աջ սեղմեք եւ ընտրեք ""
Pseudo- դասի անցումը
Կեղծ դասերը արտացոլում են տարրերի եւ նրանց հարաբերական դիրքերը:
Ինչպես ստուգել `
- Elements վահանակի տարրին աջ սեղմում եւ ուժի պարունակության դասը ընտրել ուժային տարրերի պետական ցանկում:
- Դուք նաեւ կարող եք ընտրեք կեղծ դասակարգ Elements վահանակի աջ կողմում:
Սյունակի ընտրություն
Ինչպես ստուգել `
- Գնալ դեպի «Աղբյուրներ» վահանակը:
- Ընտրեք ցանկացած ֆայլ:
- Ընտրեք տեքստը `Alt- ը պահելով:
Ընտրելով սյունակը նաեւ աշխատում է, երբ HTML- ը խմբագրվում է Elements վահանակում:
Պատճենը cURL- ի համար
Ցանցային ներդիրում ցանկացած խնդրանք կարող է պատճենվել, ապա կպցնել օգտագործման տերմինալը:
Onscreen ստեղնաշար
Եթե ընտրված է Nexus 5X պրոֆիլը, կարող եք տեսնել, թե ինչպես է այն տեսնում, երբ էկրանի ստեղնաշարը ակտիվ է:
Chrome DevTools- ը, էկրանային ստեղնաշար
Վեբ կայքի զեկույցը
Վերցրեք ամբողջ էջի նկարը շատ պարզ է: Պարզապես անհրաժեշտ է ...
- Բաց տեսուչ:
- Գնացեք մխիթարել:
- Սեղմեք Ctrl + Shift + P կոճակը
- Տեսակ "սքրինշոթ"
- Ընտրեք «Capture full size screenshot»
Վեբ կայքի զեկույցը Սենսորային սարքերի իմացում
Կարող եք նաեւ սիմվոլավորել որոշ տվիչներ:
- Սենսորային էկրան
- Կոորդինատները երկրագնդի համար
- Accelerometer
Ինչպես փորձել.
- Ընտրեք Elements վահանակը:
- Սեղմեք «Esc» եւ ընտրեք «Emulation> Sensors»:
Օգտակար հատկանիշներ
ստեղները եւ արժեքները
Բանալիներն ու արժեքների գործառույթները թույլ են տալիս համապատասխանաբար արտադրանքի բանալիները կամ արժեքները թողարկել կոնսոլում: 
Ցուցադրելով բանալիների եւ օբյեկտի արժեքները առանձին