Кез келген веб-парақтың HTML және CSS-ін қараңыз
Веб-сайт коды сызықтарымен құрастырылған, бірақ нәтиже - суреттер, бейне, қаріптер және т.б. бар нақты беттер. Сол элементтердің бірін өзгерту немесе оның құрамында болғанын көру үшін оны басқаратын кодтың нақты жолын табуға болады. Элементті тексеру құралымен жасауға болады.
Көптеген веб-браузерлер инспекция құралын жүктеп немесе қондырма орнатпайды. Оның орнына олар сізге бет элементін тінтуірдің оң жақ түймешігімен нұқып, Тексеру немесе Элементті тексеру пәрменін таңдаңыз. Дегенмен, сіздің процесс браузеріңізде әртүрлі болуы мүмкін.
Chrome ішіндегі элементтерді тексеріңіз
Google Chrome жүйесінің ең соңғы нұсқалары бетті бірнеше жолмен қарап шығуға мүмкіндік береді, оның ішінде оның ішіне орнатылған Chrome DevTools:
- Бетте бір нәрсені тінтуірдің оң жағымен нұқыңыз (немесе бос аймақ) және Inspect тармағын таңдаңыз
- Ctrl + Shift + I пернелер тіркесімін енгізіңіз
- Қосымша құралдар> Жасақтаушы құралдары опциясына кіру үшін Chrome мәзірін пайдаланыңыз
Chrome DevTools сізге HTML жолдарын оңай көшіруге немесе өңдеуге немесе элементтерді мүлдем жасыру немесе жоюға (бетті қайта жүктегенше) мүмкіндік береді.
DevTools беттің жағында ашылғаннан кейін сіз оны орналастырған жерін өзгерте аласыз, беттің сыртынан шығып, барлық беттің файлдарын іздеңіз, арнайы сараптама үшін парақтан элементтерді таңдап, файлдар мен URL-мекен-жайларды таңдап, тіпті топты теңшеңіз параметрлерін.
Firefox-та элементтерді тексеріңіз
Chrome сияқты, Firefox инспектор деп аталатын құралын ашудың бірнеше әдісі бар:
- Бетте бос аумақты тінтуірдің оң жақ түймешігімен нұқыңыз немесе элементті таңдап, Элементті тексеру пәрменін таңдаңыз
- Пернетақтада Ctrl + Shift + T немесе Ctrl + Shift + I енгізіңіз
- Firefox мәзірінен Әзірлеуші > Инспекторды таңдаңыз
- Құралдар мәзірінен Веб-әзірлеуші> Инспекторды таңдаңыз
Тінтуірді Firefox-та әртүрлі элементтерге жылжытқанда, Инспектор құралы элементтің бастапқы кодын біледі. Элементті нұқып, «жедел іздестіру» тоқтайды және инспектор терезесіндегі элементті тексеруге болады.
Барлық қолдау көрсетілетін басқару элементтерін табу үшін элементті тінтуірдің оң жағымен нұқыңыз. Сіз бетті HTML ретінде өңдей аласыз, ішкі немесе сыртқы HTML кодын көшіруге немесе қоюға, DOM сипаттарын көрсетуге, торапты скриншотқа түсіруге немесе жоюға, жаңа атрибуттарды оңай қолдануыңызға, барлық CSS-ті және басқалардың барлығын көруге болады.
Opera ішіндегі элементтерді тексеріңіз
Опера Chrome элементтеріне ұқсас DOM инспекторының құралымен элементтерді де тексере алады. Оған қалай жетуге болады:
- Ctrl + Shift + I пернелер тіркесімін пайдаланыңыз
- Мәзір> Басқа құралдар> Жасақтаушы мәзірін көрсету тармағын таңдаңыз және мәзірді Мәзір> Жасаушы> Әзірлеуші құралдары арқылы ашыңыз
- Беттің кез келген элементіндегі оң жақ түймешік мәзірінен Тексеру элементін таңдаңыз
Internet Explorer шолғышындағы элементтерді тексеріңіз
Developer Tools деп аталатын ұқсас инспекторлық элемент құралы Internet Explorer браузерінде қол жетімді:
- Пернетақтадағы F12 пернесін басыңыз
- Tools> F12 Developer Menu ( Құралдар мәзірі) опциясын пайдаланыңыз (егер сіз Құралдар мәзірін көрмесеңіз Alt + X басыңыз)
- Бетті тінтуірдің оң жағымен нұқып, Элементті тексеру түймешігін басыңыз
IE осы жаңа мәзірде таңдау элементі құралы бар, ол HTML және CSS мәліметтерін көру үшін кез келген бет элементін басуға мүмкіндік береді. Сондай-ақ, сіз DOM Explorer қойындысында қарап отырған кезде элементтерді бөлектеуді оңай ажыратуға / қосуға болады.
Жоғарыдағы браузерлердегі басқа элемент инспекторының құралдары сияқты, Internet Explorer сіз элементтерді қиып, көшіруге және қоюға, сондай-ақ HTML редакциялауға, атрибуттарды қосуға, стильдермен көшірмелеу элементтеріне қоса және тағы басқаларға мүмкіндік береді.