Әр браузерде веб-парақтың бастапқы кодын қалай қарау керек

Сіз оқып отырған веб-бет, басқалармен қатар, бастапқы кодты құрайды. Сіздің веб-браузеріңіз қазір жүктеп жатқан нәрселеріңізге жүктеледі және аударады.

Көптеген веб-браузерлер қандай құрылғы түріне қарамастан, қосымша бағдарламалық жасақтаманы қажет етпей, веб-беттің бастапқы кодын көруге мүмкіндік береді.

Кейбіреулер тіпті кеңейтілген функционалдылық пен құрылымды ұсынып, HTML-де және басқа бағдарламалау кодтарын парақта қарауды жеңілдетеді.

Неге бастапқы кодты көргіңіз келеді?

Беттің бастапқы кодын көргіңіз келген бірнеше себептер бар. Егер сіз веб-әзірлеуші ​​болсаңыз, мүмкін, сіз басқа бағдарламашықтың ерекше стилінде немесе іске асырылуында қақпақтардың астына қарай аласыз. Мүмкін сіз сапа кепілдігінде болсаңыз және веб-сайттың қандай да бір бөлігін неге дәлелдеп жатқанын білесіз бе?

Сіз сондай-ақ өз беттеріңізді кодтауды үйренуге тырысып, нақты әлем мысалдарын іздеуге тырысатын бола аласыз. Әрине, бұл санаттардың ешқайсысына енбеуі мүмкін және тек қана қызығушылығымен көзді көргіңіз келуі мүмкін.

Төменде сіз өзіңіздің браузеріңіздегі бастапқы кодты қалай қарау керектігі туралы нұсқаулар берілген.

Google Chrome

Орындау: Chrome OS, Linux, macOS, Windows

Chrome жұмыс үстелінің нұсқасында келесі пернетақта сілтемесін пайдалану арқылы бірінші және ең қарапайым парақтың бастапқы кодын көру үшін үш түрлі әдіс ұсынылады: CTRL + U ( COMMOS + OPTION + U MacOS ішіндегі).

Басқан кезде, бұл сілтеме белсенді бет үшін HTML және басқа кодты көрсететін жаңа шолғыш қойындысын ашады. Бұл дереккөз түстік-кодталған және құрылымдалған, бұл бөлімді бөліп, іздеген нәрсені табуды жеңілдетеді. Сондай-ақ, Chrome-ның мекенжай жолында төмендегі мәтінді енгізіп , веб-беттің URL мекен-жайының сол жағына қосылып, Enter пернесін басу арқылы көре аласыз: (яғни, көзі: https: // www .).

Үшінші әдіс Chrome-ның әзірлеуші ​​құралдары арқылы жүзеге асырылады, ол сізге беттің кодына тереңірек шабуға және тестілеу және дамыту мақсаттарында он-лайн режимінде баптауға мүмкіндік береді. Әзірлеуші ​​құралдарының интерфейсін осы пернелер тіркесімін пайдалану арқылы ашуға және жабуға болады: CTRL + SHIFT + I (MacOS арналған COMMAND + OPTION + I ). Сондай-ақ, оларды келесі жолмен іске қосуға болады.

1. Жоғарғы оң жақ бұрышында орналасқан және үш тігінен тураланған нүктелермен көрсетілген Chrome негізгі мәзір түймесіне басыңыз.
2. Ашылмалы мәзір пайда болғанда, тышқанның курсорын More tools ( Қосымша құралдар) опциясының үстіне апарыңыз.
3. Ішкі мәзір пайда болғанда, Әзірлеуші ​​құралдарын басыңыз.

Android
Android веб-торабындағы веб-сайттың көзін көру келесі мәтінді мекен-жайдың (немесе URL-мекенжайы) алдыңғы жағына қосу және оны жіберу: қарап шығу көзі: қарапайым . Бұған мысал бола алады : https: // www. . HTML және басқа код осы беттегі дереу белсенді терезеде көрсетіледі.

iOS
IPad, iPhone немесе iPod touch құрылғысындағы Chrome көмегімен бастапқы кодты қараудың өзіндік әдістері болмаса да, қарапайым және тиімдірек, Көрнекі қолданбаны көру сияқты үшінші тарап шешімдерін пайдалану.

Қолданбалар дүкенінде $ 0.99-ға қол жетімді, Көзді қарау бет URL мекенжайын (немесе оны кейде ең қарапайым жол болып табылатын Chrome-ның мекенжай жолынан көшіру / көшіру) сұрайды және бұл сол. HTML және басқа да бастапқы кодты көрсетумен қатар, қосымшада жеке бет активтерін көрсететін қойындылар, Құжат нысаны үлгісі (DOM), сонымен қатар бет өлшемі, куки және басқа да қызықты мәліметтер бар.

Microsoft Edge

Жегу: Windows

Edge браузері ағымдағы бетнің бастапқы кодын Өз Developer Tools интерфейсі арқылы көруге, талдауға және тіпті басқаруға мүмкіндік береді. Бұл ыңғайлы құралға қол жеткізу үшін осы пернелер тіркесімінің біреуін пайдалануға болады: F12 немесе CTRL + U. Оның орнына тінтуірді таңдағыңыз келсе, Edge мәзірінің батырмасын басыңыз (жоғарғы оң жақ бұрышта орналасқан үш нүкте) және тізімнен F12 Developer Tools опциясын таңдаңыз.

Құралды алғаш рет іске қосқаннан кейін, Edge шолғыштың контекстік мәзіріне екі қосымша опцияны қосады (веб-беттегі кез келген жерде тінтуірдің оң жақ түймешігімен басу арқылы қол жетімді): элементті тексеру және көзді қарау , соңғысы бастапқы кодпен толтырылған құралдар интерфейсі.

Mozilla Firefox

Қосылу: Linux, macOS, Windows

Беттің бастапқы кодын Firefox жұмыс үстелі нұсқасында көру үшін пернетақтада CTRL + U ( COMMAND + U ) пернелер тіркесімін басуыңызға болады, ол HTML және басқа веб-парақ үшін басқа кодты қамтитын жаңа қойынды ашатын болады.

Келесі мәтінді Firefox мекен-жай жолына тікелей URL-мекен-жайының сол жағына теру орнына бірдей дереккөздің ағымдық қойындыда пайда болуына әкеледі: көзі-көзі: (яғни, көзі-көзі: https: // www). .

Беттің бастапқы кодын алудың тағы бір жолы - Firefox-тың әзірлеуші ​​құралдары арқылы, келесі қадамдарды орындау арқылы қол жетімді.

1. Браузер терезесінің жоғарғы оң жақ бұрышында орналасқан және үш көлденең сызықпен көрсетілген негізгі мәзір түймешігін басыңыз.
2. Қалқымалы мәзір пайда болғанда, әзірлеуші «кілт» белгішесін нұқыңыз.
3. Веб-әзірлеуші мәтінмәндік мәзірі енді көрінуі керек. Бет көзі опциясын таңдаңыз.

Firefox, сондай-ақ, беттің белгілі бір бөлігінің бастапқы кодын көруге мүмкіндік береді, бұл мәселелерді оңай оқшаулауға мүмкіндік береді. Мұны істеу үшін алдымен тінтуірмен қызықтыратын аймақты бөлектеңіз. Одан кейін, тінтуірдің оң жақ түймешігімен нұқып, браузердің мәтінмәндік мәзірінен Таңдау көзін қарау параметрін таңдаңыз.

Android
Firefox Android нұсқасындағы бастапқы кодты қарау келесі мәтінмен веб-беттің URL-мекенжайын префиксинг арқылы қол жетімді: view-source:. Мысалы, HTML-кодты қарау үшін шолғыштың мекенжай жолына келесі мәтінді жіберіңіз: view-source: https: // www. .

iOS
IPad, iPhone немесе iPod touch құрылғыңыздағы веб-бет кодын қарауға ұсынылған әдіс App Store-дағы $ 0.99 үшін қол жетімді «Көрініс көзін шолу» бағдарламасы арқылы. Firefox-пен тікелей біріктірілмеген болса, сіз HTML-ны және осы бетке байланысты басқа кодты ашу үшін браузерден URL-мекен-жайын оңай көшіруіңізге және қоюыңызға болады.

Apple Safari

IOS және macOS жүйесінде іске қосу

iOS
IOS үшін Safari-ге әдепкі бойынша бет көзін көру мүмкіндігі кірмесе де, браузер App Store-да $ 0.99 үшін қол жетімді View Source бағдарламасымен біртұтас интеграцияланбайды.

Осы үшінші тарап қолданбасын орнатқаннан кейін Safari браузеріне оралып, экранның төменгі жағында орналасқан және квадратпен және жоғары көрсеткі арқылы орналасқан Share түймесін түртіңіз. IOS Share Sheet енді Safari терезесінің төменгі жартысын жабатын көрінуі керек. Оңға қарай айналдырып, Көріністі көру түймешігін таңдаңыз.

Белсенді беттің бастапқы кодының түсті кодталған, құрылымдық көрінісі енді бет активтерін, сценарийлерді және т.б. көруге мүмкіндік беретін басқа қойындылармен бірге көрсетілуі керек.

macOS
Safari жұмыс үстеліндегі нұсқасында беттің бастапқы кодын көру үшін, алдымен оны әзірлеу мәзірін қосу керек. Төмендегі қадамдар осы жасырылған мәзірді белсендіру және беттің HTML көзін көрсету арқылы жүреді.

1. Экранның жоғарғы жағында орналасқан шолғыш мәзіріндегі Safari түймесін басыңыз.
2. Ашылмалы мәзір пайда болғанда, Теңшелімдер параметрін таңдаңыз.
3. Safari-ның артықшылықтары енді көрінуі керек. Жоғарғы жолдың оң жағында орналасқан Кеңейтілген белгішесін басыңыз.
4. Қосымша бөлімнің төменгі жағына - бос жолға құсбелгі қойып, мәзір жолағындағы Show Show мәзірін көрсететін опция. Белгіге қою үшін осы жолаққа бір рет басыңыз және жоғарғы сол жақ бұрышта орналасқан қызыл «x» түймесін басу арқылы Басымдықтар терезесін жабыңыз.
5. Экранның жоғарғы жағында орналасқан Даму мәзірін нұқыңыз.
6. Ашылмалы мәзір пайда болғанда, Бет көзін көрсету параметрін таңдаңыз. Оның орнына келесі пернелер тіркесімін пайдалануға болады: COMMAND + OPTION + U.

Опера

Қосылу: Linux, macOS, Windows

Opera браузеріндегі белсенді веб-беттен бастапқы кодты көру үшін келесі пернелер тіркесімін пайдаланыңыз: CTRL + U (MacOS арналған COMMAND + OPTION + U ). Егер сіз ағымдағы қойындыда көзді жүктеуді қаласаңыз, мекен-жай жолағының ішіндегі бет URL мекен-жайының сол жағындағы келесі мәтінді енгізіңіз және Enter пернесін басыңыз: көзге көрініс көзі: (яғни, қарау-көзі: https: // www. ).

Opera-дың үстелдік нұсқасы сонымен бірге HTML-дің, CSS-ның және басқа элементтердің интеграцияланған әзірлеуші ​​құралдарын пайдалану арқылы көруге мүмкіндік береді. Әдепкі бойынша негізгі браузер терезесінің оң жағында пайда болатын осы интерфейсті іске қосу үшін келесі пернелер тіркесімін басыңыз: CTRL + SHIFT + I ( COMMOS + OPTION + I макроста).

Опера әзірлеуші ​​құрал-саймандары келесі қадамдарды орындау арқылы да қол жетімді.

1. Браузер терезесінің жоғарғы сол жақ бұрышында орналасқан Opera логотипін басыңыз.
2. Ашылмалы мәзір пайда болғанда, тышқанның курсорын More tools ( Қосымша құралдар) опциясының үстіне апарыңыз.
3. Жасақтаушы мәзірін көрсету түймешігін басыңыз.
4. Opera логотипін қайтадан басыңыз.
5. Ашылмалы мәзір пайда болғанда, меңзеріңізді Әзірлеушінің үстіне апарыңыз.
6. Ішкі мәзір пайда болғанда, Әзірлеуші ​​құралдарын басыңыз.

Вивальди

Vivaldi браузері ішіндегі бет көзін көрудің бірнеше жолы бар. Ең қарапайым - жаңа қойындыдағы белсенді беттің кодты беретін CTRL + U пернелер тіркесімі.

Сондай-ақ, келесі мәтінді беттің алдыңғы бетіне қосуға болады, ол ағымдағы қойындыда бастапқы кодты көрсетеді: view-source : . Бұған мысал бола алады : http: // www. .

Басқа әдіс браузердің біріктірілген әзірлеуші ​​құралдары арқылы, CTRL + SHIFT + I комбинациясын басу арқылы немесе шолғыштың Құралдар мәзірінде Developer Tools арқылы - жоғарғы сол жақ бұрышындағы 'V' логотипін басу арқылы қол жетімді. Dev құралдарын пайдалану беттің дереккөзін тереңірек талдауға мүмкіндік береді.