«Inspect Element» - ը Firefox բրաուզերում մշակողի գործիք է, որը կարող եք օգտագործել ցանկացած վեբ էջում HTML կոդը հետևելու համար: Վեբ էջի HTML և CSS ոճաթերթերը կարող են խմբագրվել «Inspect Element» - ով: Կարող եք փորձել խմբագրել էջը, ինչպես ցանկանում եք և այն վերադարձնել այնպիսին, ինչպիսին եղել է `պարզապես վերբեռնելով խմբագրված վեբ էջը:
Քայլ
2 -րդ մաս 1 -ից. Տարրերի ստուգում
Քայլ 1. Թարմացրեք Firefox- ը (ըստ ցանկության):
Հնարավոր է, որ դուք չեք կարողանա մուտք գործել այս հոդվածում քննարկված գործառույթները, եթե օգտագործում եք Firefox- ի հին տարբերակը: Թարմացումը ինքնաբերաբար կտեղադրվի, երբ ստուգեք Firefox- ի որ տարբերակն եք օգտագործում:
Firefox 9 և ավելի վաղ տարբերակներն ընդհանրապես չունեն «Inspect Element» գործիքը:
Քայլ 2. Աջ սեղմեք ցանկացած վեբ էջի տարր:
Կարող եք աջ սեղմել ցանկացած պատկերի, տեքստի, ֆոնի կամ տարրի: Եթե ձեր մկնիկը ունի ընդամենը մեկ կոճակ, ձախ սեղմման և Control ստեղնի համադրությունը կհանգեցնի աջ սեղմման:
Քայլ 3. Բացվող ընտրացանկից սեղմեք «Ստուգել տարրը»:
Գործիքի տողը կհայտնվի պատուհանի ներքևում: Գործիքադարակի տակ գտնվող վահանակը նույնպես կհայտնվի և կցուցադրի HTML կոդը ակտիվ էջում:
Քայլ 4. toանոթացեք առկա գործիքագոտիներին և վահանակներին:
Երբ օգտագործում եք «Ստուգեք տարրը», զննարկչի պատուհանից ներքև կբացվեն մի քանի վահանակներ: Ստորև նկարագրված են «Ստուգել տարրը» գործիքագոտիների և վահանակների անուններն ու գործառույթները.
- Վերին տողում Գործիքատուփ Գործիքադարակը է: Այստեղ կան մի քանի գործիքներ, բայց մենք կկենտրոնանանք տեսուչ կոճակի վրա ՝ ձախ կողմում: Համոզվեք, որ այս կոճակը ակտիվ է (նշված է կոճակի գույնով, որը կապույտ է դառնում ակտիվության դեպքում) այս ուղեցույցում:
- Դրանից ներքև կա HTML տարրերի թխվածքների տող, որոնք ցույց են տալիս ներկայումս ընտրված տարրի գտնվելու վայրը:
- Նավարկման հուշումների ներքևի պատուհանը ցույց է տալիս վեբ էջի HTML ծառը կամ «Նշման նշանը»: Ընտրված տարրի HTML- ն նշված և կենտրոնացված կլինի այս պատուհանում:
- Աջ կողմի պատուհանը ցուցադրում է ընթացիկ վեբ էջի CSS ոճաթերթը:
Քայլ 5. Ընտրեք մեկ այլ տարր:
Գործիքադարակի բացման դեպքում կարող եք հեշտությամբ ընտրել այլ տարրեր: Դա անելու երեք եղանակ կա.
- Սավառնել HTML տողի վրա `ընտրված տարրը նշելու համար (այս գործառույթը պահանջում է Firefox 34+): Այդ տարրը ընտրելու համար կտտացրեք HTML- ին:
- Գործիքադարակի ձախ անկյունում կտտացրեք «Ընտրել տարր» գործիքին. Այն տուփի վերևում ունի կուրսորի պատկերակ: Տեղափոխեք կուրսորը վեբ էջում ՝ տարր նշելու համար և կտտացրեք այն ընտրելու համար:
Քայլ 6. Հետևեք HTML կոդին:
Կտտացրեք HTML վահանակի ցանկացած վայրում: Օգտագործեք ստեղնաշարի ձախ և աջ ուղղորդման ստեղները ՝ ծածկագրից ծածկագիր տեղափոխվելու համար (այս գործառույթը պահանջում է Firefox 39++): Այս մեթոդը օգտակար է կուրսորը ընտրելու համար չափազանց փոքր տարրեր ընտրելու համար:
- Մոխրագույն HTML- ը ցույց է տալիս այն տարրերը, որոնք չեն ցուցադրվում էջում: Սրա մեջ մտնող տարրերն են մեկնաբանություններ, ինչպես հանգույցները և CSS ցուցադրման հատկությամբ թաքնված այլ տարրեր:
- Կտտացրեք վանդակի ձախ սլաքը ՝ բովանդակությունը ցուցադրելու կամ թաքցնելու համար: Ամբողջ բովանդակությունը ցուցադրելու համար սլաքը սեղմելիս պահեք alt="Image" կամ տարբերակը:
Քայլ 7. Տեղադրեք տարրը:
Փնտրեք որոնման դաշտը (օղակաձև պատկերակ) ՝ հացի փշրանքների շարքի ծայրամասային աջ անկյունում: Կտտացրեք ՝ որոնման դաշտը ընդլայնելու և մուտքագրելու համար HTML կոդը, որը ցանկանում եք որոնել: Մուտքագրելիս կցուցադրվի թռուցիկ, որը ցույց է տալիս համապատասխան որոնման արդյունքները: Սեղմեք որոնման արդյունքներից մի տարր և ոլորեք HTML վահանակը դեպի ձեր փնտրած կոդը:
2 -րդ մաս 2 -ից. HTML- ի խմբագրում
Քայլ 1. Վերաբեռնել էջը նորից սկսելու համար:
Եթե դուք նոր եք վեբ կայքերի մշակման գործիքներում, ապա տեղյակ եղեք, որ դուք մշտական փոփոխություններ չեք կատարում ձեր խմբագրած էջերում: Ձեր խմբագրումները հայտնվում են միայն ձեր էկրանին, մինչև էջը չբեռնեք կամ փակեք: Ազատորեն փորձարկեք, նույնիսկ եթե չգիտեք, թե ինչ կլինի:
Քայլ 2. Կրկնակի սեղմեք HTML- ը խմբագրելու համար:
Կրկնակի սեղմեք ներլցված HTML- ը: Մուտքագրեք նոր տեքստը և սեղմեք enter ՝ փոփոխությունները պահպանելու համար:
Քայլ 3. Սեղմեք և պահեք գործիքը հացաթխում ՝ ավելի շատ տարբերակներ բերելու համար:
Նկատի ունեցեք, որ breadcrumb գործիքագիծը տեղակայված է HTML ծառի և դրա վերևի գործիքագոտու միջև: Սեղմեք և պահեք այս տողում գտնվող գործիք ՝ ավելի շատ ընտրացանկեր բացելու համար: Ստորև ներկայացված է առկա տարբերակների ակնարկը (ոչ սպառիչ).
- «Խմբագրել որպես HTML» - ը թույլ է տալիս խմբագրել ամբողջ HTML բովանդակությունը HTML ծառից ՝ յուրաքանչյուր տող խմբագրելու փոխարեն:
- «Copy Inner HTML» - ը պատճենում է ամբողջ բովանդակությունը հանգույցի ներսում, մինչդեռ «Copy Outer HTML» - ը պատճենում է բովանդակությունը և հանգույցները (ինչպես օրինակ
- «Կպցնել →» - ը բերում է պատճենը տեղադրելու մի քանի տարբերակ, օրինակ ՝ հանգույցից առաջ կամ հանգույցի առաջնեկից հետո:
- : hover,: active, and: focus- ը փոխում է տարրի տեսքը, երբ օգտվողը փոխազդում է: Փոփոխված էֆեկտները սահմանվում են CSS ոճաթերթից (Խմբագրելի աջ վահանակից):
Քայլ 4. Քաշեք և թողեք:
Կոդի տարրերը վերադասավորելու համար կտտացրեք և պահեք HTML- ը մինչև կետագծի հայտնվելը: Տեղափոխեք գիծը ծառի վերև -ներքև և բաց թողեք մկնիկի կոճակը, երբ գիծը գտնվում է այնտեղ, որտեղ ցանկանում եք:
Այս գործառույթը պահանջում է Firefox 39 և ավելի ուշ:
Քայլ 5. Փակեք մշակողի գործիքագոտին:
Inspect Element- ի ամբողջ պատուհանը փակելու համար կտտացրեք X կոճակին ՝ գործիքի վահանակի վերին աջ անկյունում, որը գտնվում է CSS վահանակի վերևում:
Խորհուրդներ
- Կարող եք նաև գործիքի տողը բացել պատուհանի վերևի ընտրացանկից ՝
- Windows: Firefox → Վեբ ծրագրավորող → Փոխարկել գործիքները
- Mac կամ Linux. Գործիքներ → Վեբ ծրագրավորող → Փոխարկել գործիքները
- Firefox 40 -ն ունի CSS վահանակը թաքցնելու հնարավորություն, որպեսզի HTML- ը խմբագրելու ավելի շատ տարածք ունենաք: Փնտրեք սլաքի պատկերակը հացի փշրանքների տողի ծայրամասային աջ անկյունում և որոնման դաշտի աջ կողմում: Կտտացրեք այս պատկերակին ՝ CSS- ի վահանակը թաքցնելու համար և նորից կտտացրեք այն վերև բերելու համար:
- Կարող եք նաև խմբագրել CSS վահանակներ, բայց դրանք նշված չեն այս հոդվածում: Ինտերնետում կարող եք գտնել CSS կոդի խմբագրման հրահանգներ:
