Տեսեք ցանկացած վեբ էջի HTML եւ CSS
Կայքը կառուցված է տողերի կոդերով, սակայն արդյունքը հատուկ պատկերներ է, պատկերներ, տեսանյութեր, տառատեսակներ եւ այլն: Այդ տարրերից մեկի փոխարեն կամ տեսնել, թե ինչն է բաղկացած, դուք պետք է գտնեք այն կոդի հատուկ գիծը, որը վերահսկում է այն: Դուք կարող եք դա անել տարրերի ստուգման գործիքով:
Վեբ զննարկիչների մեծամասնությունը չի Ձեզ ներբեռնում տեսչական գործիք կամ տեղադրել հավելում: Փոխարենը, նրանք թույլ են տալիս Ձեզ աջից սեղմեք էջի տարրը եւ ընտրեք ստուգել կամ ստուգել տարրը : Այնուամենայնիվ, գործընթացը կարող է մի փոքր տարբեր լինել ձեր զննարկիչում:
Ստուգեք տարրերը Chrome- ում
Google Chrome- ի ամենավերջին տարբերակները թույլ են տալիս ստուգել էջը մի քանի ձեւով, բոլորն օգտագործում են իր ներկառուցված Chrome DevTools- ը:
- Էջի վրա (կամ դատարկ տարածք) աջ կտտացրեք ինչ-որ բան եւ ընտրեք Ինստիտուտ
- Մուտքագրեք Ctrl + Shift + I ստեղնաշարի կարճուղին
- Օգտագործեք Chrome մենյու, Լրացուցիչ Գործիքներ> Հեղինակային գործիքների ընտրանք մուտք գործելու համար
Chrome DevTools- ը թույլ է տալիս անել այնպիսի բաներ, ինչպիսիք են հեշտությամբ պատճենել կամ խմբագրել HTML տողերը կամ թաքցնել կամ վերացնել տարրերը ընդհանրապես (մինչեւ էջը վերբեռնումները):
Երբ DevTools- ը բացվում է էջի կողքին, դուք կարող եք փոխել այնտեղ, որտեղ այն տեղադրվում է, էջից դուրս է փակցված, բոլոր էջի ֆայլերը փնտրելու համար, ընտրեք տարրերից կոնկրետ փորձաքննության համար, պատճենեք ֆայլերը եւ URL- ները եւ նույնիսկ հարմարեցրեք մի փունջ պարամետրերը:
Ստուգեք տարրերը Firefox- ում
Chrome- ի նման, Firefox- ն ունի մի քանի տարբեր եղանակներ, բացելու գործիք, որը կոչվում է տեսուչ:
- Ուղղանկյունը սեղմեց էջում կամ ընտրեք տարր եւ ընտրեք ստուգել տարրը
- Մուտքագրեք Ctrl + Shift + T կամ Ctrl + Shift + I ստեղնաշարի հետ
- Firefox մենյուում, Ստեղծեք Developer > Inspector
- Գործիքների ցանկում, Ստեղծեք Web Developer> Inspector
Երբ տեղափոխեք ձեր մկնիկը Firefox- ի տարբեր տարրերի վրա, տեսուչի գործիքը ավտոմատ կերպով գտնում է տարրերի աղբյուրի կոդը: Սեղմեք տարրը, եւ «on-the-fly- ի որոնումը» կդադարի եւ դուք կարող եք ուսումնասիրել տարրը Տեսչի պատուհանից:
Աջ սեղմեք տարրը, գտնելու բոլոր աջակցվող վերահսկումները: Դուք կարող եք անել այնպիսի բաներ, ինչպիսիք են խմբագրեք էջը որպես HTML, պատճենեք կամ տեղադրեք ներքին կամ արտաքին HTML կոդը, ցուցադրեք DOM հատկությունները, ցուցադրեք կամ ջնջեք հանգույցը, հեշտությամբ կիրառեք նոր ատրիբուտներ, տեսեք բոլոր էջերի CSS- ն եւ ավելին:
Օպերայում ստուգեք տարրերը
Opera- ը կարող է նաեւ ստուգել տարրերը, այն DOM- ի տեսուչ գործիքով, որը նույնն է Chrome- ի համար: Ահա թե ինչպես հասնել դրան.
- Օգտագործեք ստեղնաշարի դյուրանցում Ctrl + Shift + I
- Navigate to Menu> More Tools> Show Developer մենյուը , ապա ցանկը բացել Menu> Developer> Developer Tools- ի միջոցով
- Էջի ցանկացած տարրի աջ սեղմեք մենյուից Ընտրեք ստուգել տարրը
Ստուգեք տարրերը Internet Explorer- ում
Նմանատիպ ստուգիչ տարր գործիք, որը կոչվում է Developer Tools, հասանելի է Internet Explorer- ում:
- Սեղմեք F12- ի ստեղնաշարի վրա
- Օգտագործեք Գործիքներ> F12 Developer Menu ընտրանքը (հարվածել Alt + X- ը, եթե դուք չեք տեսնում Գործիքների ցանկը)
- Էջի վրա սեղմեք աջ եւ կտտացրեք ստուգել տարրը
IE- ն ընտրելու տարր գործիք է այս նոր մենյուում, որը հնարավորություն է տալիս սեղմել ցանկացած էջի տարր, տեսնել HTML- ի եւ CSS- ի մանրամասները: Դուք կարող եք նաեւ հեշտությամբ անջատել / ակտիվացնել տարրը, կարեւորելով այն, երբ դիտում եք DOM Explorer- ի էջանիշը:
Վերոնշյալ բրաուզերում գտնվող այլ տարրերի տեսուչի գործիքների նման, Internet Explorer- ը թույլ է տալիս կրճատել, պատճենել եւ տեղադրեք էլեմենտները, ինչպես նաեւ խմբագրել HTML- ը, ավելացնել հատկանիշները, պատճենել տարրերը, կցված ոճերը եւ այլն: