Როგორ იხილოთ ვებ-გვერდის კოდის ყველა კოდი ბრაუზერში

ვებ-გვერდი თქვენ კითხულობთ, სხვათა შორის, კოდის წყაროს. ეს არის თქვენი ვებ-ბრაუზერის ჩამოტვირთვის ინფორმაცია და ითარგმნება ის, რასაც ახლა კითხულობთ.

ვებ ბრაუზერების უმრავლესობამ უზრუნველყოს ვებ-გვერდის კოდის ნახვა, დამატებითი პროგრამული უზრუნველყოფის გარეშე, მიუხედავად იმისა, რა ტიპის მოწყობილობაა.

ზოგიერთი კი შესთავაზებს მოწინავე ფუნქციურობას და სტრუქტურას, რაც საშუალებას იძლევა უფრო ადვილად გამოიყენოთ HTML და სხვა პროგრამირების კოდი გვერდზე.

რატომ გსურთ იხილოთ კოდის კოდექსი?

არსებობს რამოდენიმე მიზეზი, რის გამოც შეიძლება დაგჭირდეთ გვერდის კოდის ნახვა. თუ თქვენ ვებ დეველოპერი, ალბათ გსურთ მიიღოს peek ქვეშ ჰიტები სხვა პროგრამისტი ის კონკრეტული სტილი ან განხორციელება. იქნებ ხარისხიანი გარანტია ხართ და ცდილობენ, დაადგინოთ, თუ რატომ არის ვებ-გვერდის გარკვეული ნაწილი გაწევრიანდეს ან ისე, როგორც ეს არის.

თქვენ ასევე შეიძლება იყოს დამწყები, რომ ისწავლონ, თუ როგორ უნდა დააკოპიროთ თქვენი საკუთარი გვერდები და ეძებენ ზოგიერთ რეალურ მაგალითს. რა თქმა უნდა, შესაძლებელია, რომ რომელიმე ამ კატეგორიაში არ მოხვდე და მკაფიო ცნობისმოყვარეობის წყარო გინდა.

ქვემოთ ჩამოთვლილია ინსტრუქციები, თუ როგორ იხილოთ კოდის სანახავი კოდი თქვენს ბრაუზერში.

გუგლ ქრომი

გაშვებული: Chrome OS, Linux, MacOS, Windows

Chrome- ის დესკტოპის ვერსია გთავაზობთ სამი სხვადასხვა მეთოდს გვერდის კოდის ნახვისთვის, პირველი და ყველაზე მარტივი შემდეგი კლავიშების გამოყენებით: CTRL + U ( COMMAND + OPTION + U მაკაოზე).

დაჭერისას, ეს მალსახმობი ხსნის ახალი ბრაუზერის ჩანართს, რომელიც აჩვენებს HTML და სხვა კოდს აქტიური გვერდისთვის. ეს წყარო არის ფერადი კოდირებული და სტრუქტურირებული ისე, რომ გაადვილებს გამარტივებას და პოულობს რას ეძებთ. ასევე შეგიძლიათ მიიღოთ შემდეგი ტექსტის შესასვლელად Chrome- ის მისამართების ბარაში, რომელიც შედის ვებ-გვერდის მარცხენა მხარეს და დააჭირეთ ღილაკს Enter : View source: (ანუ, view source: https: // www. .).

მესამე მეთოდი არის Chrome- ის დეველოპერის ხელსაწყოების საშუალებით , რომელიც საშუალებას მოგცემთ მიიღოთ ღრმა ჩაბმა გვერდის კოდით, ასევე შესამოწმებლად ტრიპტისა და განვითარების მიზნით. დეველოპერის ხელსაწყოების ინტერფეისი შეიძლება გაიხსნას და დაიხურა ამ კლავიშის გამოყენებით: CTRL + SHIFT + I ( COMMAND + OPTION + I on MacOS). თქვენ ასევე შეგიძლიათ დაიწყოს მათ მიერ აღებული შემდეგი გზა.

1. დაწკაპეთ Chrome- ის მთავარი მენიუ ღილაკი, რომელიც მდებარეობს ზედა მარჯვენა კუთხეში და წარმოდგენილია სამი ვერტიკალურად შედგენილი წერტილებით.
2. როდესაც ჩამოსაშლელი მენიუ გამოჩნდება, გააქტიურეთ თქვენი კურსორი მეტი ხელსაწყოების პარამეტრზე.
3. როდესაც ქვე-მენიუ გამოჩნდება, დააწკაპუნეთ დეველოპერის ხელსაწყოებზე .

Android
Android- ისთვის Chrome- ის ვებ-გვერდის წყაროების ნახვა ისეთივე მარტივია, რომლითაც მისი მისამართი (ან URL) წინ დაამატეთ შემდეგი ტექსტი: დაალაგე:. ამის მაგალითი იქნებოდა თვალსაჩინო წყარო: https: // www. . HTML და სხვა კოდი გვერდიდან მომენტალურად გამოჩნდება აქტიურ ფანჯარაში.

iOS
მიუხედავად იმისა, რომ თქვენს iPad, iPhone ან iPod Touch- ის Chrome- ის გამოყენებით კოდის ნახვისთვის არ არსებობს მშობლიური მეთოდები, ყველაზე მარტივი და ყველაზე ეფექტურია მესამე მხარის გამოსავლის გამოყენება, როგორიცაა View Source app.

ხელმისაწვდომია აპლიკაციის მაღაზიაში $ 0.99, იხილეთ წყარო URL- ს (ან დააკოპირეთ Chrome- ის მისამართების ბარიდან, რომელიც ზოგჯერ უმარტივე გზას იღებს) და ეს არის ის. გარდა ამისა, აჩვენებს HTML და სხვა კოდის, app ასევე აქვს ჩანართების რომ ცარიელია ინდივიდუალური გვერდი აქტივები, დოკუმენტის ობიექტის მოდელი (DOM), ასევე გვერდი ზომა, cookies და სხვა საინტერესო დეტალები.

Microsoft Edge

გაშვებული: Windows

Edge ბრაუზერი საშუალებას გაძლევთ ნახოთ, ანალიზი და კიდევ მანიპულირება მიმდინარე გვერდის წყაროს კოდი მეშვეობით დეველოპერი ინსტრუმენტები ინტერფეისი. ამ ხელსაყრელი ინსტრუმენტების წვდომისათვის შეგიძლიათ გამოიყენოთ რომელიმე ამ კლავიშთა კომბინაცია: F12 ან CTRL + U. თუ გსურთ, თაგვის ნაცვლად, დააჭირეთ Edge- ის მენიუს ღილაკს (ზედა მარჯვენა კუთხეში მდებარე სამი წერტილია) და აირჩიეთ F12 შემქმნელი ინსტრუმენტები ვარიანტი სიიდან.

მას შემდეგ, რაც Dev ინსტრუმენტები პირველად აწარმოებს, Edge დასძენს ორი დამატებითი პარამეტრი ბრაუზერის კონტექსტური მენიუში (ხელმისაწვდომია ვებ-გვერდზე ნებისმიერ ადგილას მარჯვენა ღილაკით): შეამოწმეთ ელემენტი და იხილე წყარო , რომელიც უკანასკნელს გახსნის Debugger- ს ინსტრუმენტების ინტერფეისი დასახლებულ წყაროდ.

Mozilla Firefox

გაშვებული: Linux, MacOS, Windows

ფაილების დესკტოპის ვერსიის სანახავად დააჭირეთ ღილაკს CTRL + U ( Command + U on MacOS) თქვენს კლავიატურაზე, რომელიც გახსნის ახალ ჩანართს, რომელიც შეიცავს HTML და სხვა კოდის აქტიურ ვებ გვერდს.

Firefox- ის მისამართების ბარიში პირდაპირ გვერდის URL- ზე ჩაწერის შემდეგ ტექსტს შეაქვს იგივე წყარო, რომელიც გამოჩნდება ამჟამინდელ ჩანართში ნაცვლად : (იხ. წყარო: https: // www.) .

გვერდის წყაროს კოდირების კიდევ ერთი გზა Firefox- ის დეველოპერის ხელსაწყოების მეშვეობით არის ხელმისაწვდომი, შემდეგ ნაბიჯების მიღებით.

1. დააჭირეთ მთავარ მენიუ ღილაკს, რომელიც მდებარეობს ბრაუზერის ფანჯრის ზედა მარჯვენა კუთხეში და წარმოდგენილია სამი ჰორიზონტალური ხაზით.
2. როდესაც pop-out menu გამოჩნდება, დააწკაპუნეთ დეველოპერის "wrench" ხატი.
3. ვებ დეველოპერის კონტექსტური მენიუ ახლა უნდა გამოჩნდეს. აირჩიეთ გვერდი წყარო ვარიანტი.

Firefox ასევე შეგიძლიათ იხილოთ კოდის კონკრეტული ნაწილის კოდის ნახვა, რაც ადვილად იზოლირებას იძლევა. ამის გაკეთება, პირველი ხაზს უსვამს იმ ტერიტორიას, რომელიც თქვენს მაუსით არის დაინტერესებული. შემდეგი, მარჯვენა ღილაკით და აირჩიეთ შერჩევა წყარო ბრაუზერის კონტექსტური მენიუდან.

Android
Firefox- ის Android- ის ვერსიის ნახვა შეგიძლიათ იხილოთ ვებ-გვერდის URL- ს მიერ შემდეგი ტექსტით: View source:. მაგალითად, HTML წყაროების სანახავად გსურთ გამოგიგზავნოთ შემდეგი ტექსტი ბრაუზერის მისამართების ზოლში: view source: https: // www. .

iOS
ჩვენი რეკომენდირებული მეთოდი ვებ-გვერდის კოდის ნახვისთვის iPad, iPhone ან iPod touch- ზე არის View Source აპლიკაციის მეშვეობით, რომელიც ხელმისაწვდომია App Store- ში $ 0.99. მიუხედავად იმისა, რომ არ არის ინტეგრირებული უშუალოდ Firefox- თან, თქვენ შეგიძლიათ ადვილად დააკოპირეთ URL- ის ბრაუზერისგან, რათა შეიქმნას HTML და სხვა კოდი, რომელიც დაკავშირებულია გვერდზე.

Apple Safari

გაშვებული iOS და MacOS

iOS
მიუხედავად იმისა, რომ iOS- სთვის Safari არ შეიცავს გვერდის წყაროს კოპირების შესაძლებლობას, ბრაუზერი სათანადოდ ინტეგრირდება View Source აპლიკაციით - App Store- ში ხელმისაწვდომია $ 0.99.

მესამე მხარის აპლიკაციის დამონების შემდეგ, Safari ბრაუზერიდან დაბრუნების შემდეგ დააჭირეთ ღილაკს "Share" ღილაკზე, რომელიც მდებარეობს ეკრანის ქვედა ნაწილზე და წარმოდგენილია სკვერი და ისარი. IOS- ის ფურცელი უნდა იყოს ხილული, თქვენი Safari ფანჯრის ქვედა ნახევარში. გადაახვიეთ მარჯვნივ და შეარჩიეთ ნახვა წყარო ღილაკი.

აქტიური გვერდის კოდის კოდის კოდირებული, სტრუქტურირებული წარმომადგენლობა ახლა უნდა გამოჩნდეს სხვა ჩანართებთან ერთად, რომელიც საშუალებას გაძლევთ, იხილოთ გვერდი აქტივები, სკრიპტები და სხვა.

macos
გვერდის კოდის სანახავად Safari- ის საგამომცემლო ვერსიაში, ჯერ უნდა გამოვიყენოთ მისი განვითარების მენიუ. ნაბიჯები ქვემოთ ფეხით თქვენ მეშვეობით გააქტიურება ამ ფარული მენიუ და ჩვენებისას HTML- ის HTML წყარო.

1. დააწკაპუნეთ Safari- ში ბრაუზერის მენიუში, რომელიც ეკრანის ზედა ნაწილში მდებარეობს.
2. როდესაც ჩამოსაშლელი მენიუ გამოჩნდება, აირჩიეთ პარამეტრების ვარიანტი.
3. Safari- ის პარამეტრები უნდა იყოს ახლა. დაწკაპეთ გაფართოებული ხატი, რომელიც მდებარეობს ზედა რიგის მარჯვენა მხარეს.
4. გაფართოებული განყოფილების ბოლოში არის ვარიანტი შერჩეული შოუ მენიუში მენიუში , რომელსაც თან ახლავს ცარიელი ფანჯარა. დააჭირეთ ამ ყუთში ერთხელ, რათა შეამოწმეთ იგი, და დააჭირეთ Preferences window- ს მარჯვენა ზედა მარცხენა კუთხეში წითელი x- ზე დაჭერით.
5. დაწკაპეთ განვითარების მენიუ, რომელიც მდებარეობს ეკრანის ზედა ნაწილში.
6. როდესაც ჩამოსაშლელი მენიუ გამოჩნდება, აირჩიეთ გვერდი წყარო . ასევე შეგიძლიათ გამოიყენოთ შემდეგი კლავიშების კომბინაცია: COMMAND + OPTION + U.

ოპერა

გაშვებული: Linux, MacOS, Windows

ოპერის ბრაუზერის აქტიური ვებ-გვერდის საწყისი კოდის სანახავად გამოვიყენოთ შემდეგი კლავიშები: CTRL + U ( COMMAND + OPTION + U on MacOS). თუ გსურთ მონიშნოთ წყარო მიმდინარე ბლოკში, ჩაწერეთ შემდეგი ტექსტის მისამართი URL- ის მისამართში და მიუთითეთ : დააჭირეთ წყარო: (ანუ view source: https: // www. ).

ოპერის დესკტოპის ვერსია ასევე საშუალებას გაძლევთ იხილოთ HTML წყარო, CSS და სხვა ელემენტები ინტეგრირებული დეველოპერის საშუალებების გამოყენებით . ამ ინტერფეისის დასაწყებად, რომელიც თქვენს მთავარ ბრაუზერის ფანჯრის მარჯვენა მხარეს გამოჩნდება, დააჭირეთ შემდეგ კლავიშს: CTRL + SHIFT + I ( COMMAND + OPTION + I მაკაოზე).

Opera- ის დეველოპერის ხელსაწყო ასევე ხელმისაწვდომია შემდეგი ნაბიჯებით.

1. დააწკაპუნეთ ოპერის ლოგოზე, რომელიც ბრაუზერის ფანჯრის ზედა მარცხენა კუთხეში მდებარეობს.
2. როდესაც ჩამოსაშლელი მენიუ გამოჩნდება, გააქტიურეთ თქვენი კურსორი მეტი ხელსაწყოების პარამეტრზე.
3. დაწკაპეთ შოუ დეველოპერი მენიუ .
4. დააჭირეთ ოპერის ლოგოს კვლავ.
5. როდესაც ჩამოსაშლელი მენიუ გამოჩნდება, დაიცავით თქვენი კურსორი დეველოპერზე .
6. როდესაც ქვე-მენიუ გამოჩნდება, დააწკაპუნეთ დეველოპერის ინსტრუმენტებიზე .

ვივალდი

ვილდის ბრაუზერიდან რამდენიმე გვერდი არსებობს. უმარტივესი არის CTRL + U- ის კლავიშთა მეშვეობით, რომელიც წარმოადგენს ახალ ჩანართში აქტიური გვერდის კოდს.

თქვენ ასევე შეგიძლიათ დაამატოთ შემდეგი ტექსტი გვერდის URL- ის წინ, რომელიც აჩვენებს კოდის წინამდებარე tab- ს: view source:. მაგალითისთვის ეს იქნება თვალსაჩინო წყარო: http: // www. .

კიდევ ერთი მეთოდია ბრაუზერის ინტეგრირებული დეველოპერის საშუალებით, რომელიც ხელმისაწვდომია CTRL + SHIFT + I- ის დაჭერით ან ბრაუზერის ინსტრუმენტების მენიუში დეველოპერის ხელსაწყოების საშუალებით დაჭერით - მარჯვენა ზედა კუთხეში "V" ლოგოზე დაჭერით. გამოყენება dev ინსტრუმენტები საშუალებას იძლევა გაცილებით სიღრმისეული ანალიზი გვერდზე წყარო.