Τι δίνει ο κώδικας σελίδας στο VK; Αποσυσκευασία και αποκωδικοποίηση σεναρίων JavaScript

Πώς να αλλάξετε τον κωδικό ενός στοιχείου στον ιστότοπο - πρώτα πρέπει να μάθετε σε ποιο αρχείο βρίσκεται αυτός ο κωδικός. Υπάρχουν πολλές μέθοδοι, αλλά θα περιγράψω μία που μου αρέσει περισσότερο και την οποία χρησιμοποιώ ο ίδιος.

Μπορείτε να δείτε τον κωδικό επιθυμητό στοιχείοκάντε δεξί κλικ και εξερευνήστε το ή κοιτάξτε πηγαίος κώδικαςσελίδες. Όλα τα προγράμματα περιήγησης έχουν παρόμοια μέθοδο για κάθε ένα, υπάρχουν ορισμένα πρόσθετα που πραγματοποιούν αυτές τις διαδικασίες.

Είτε όλοι νιώθουν άνετα με κάτι είτε όχι - δεν θα συζητήσουμε αυτό το θέμα. Το καθήκον μας είναι να βρούμε το αρχείο με τον κωδικό που βρίσκεται.

Πώς να βρείτε το αρχείο:

χρησιμοποιώ διαχειριστής αρχείων Συνολικός Διοικητής. Θεωρώ ότι αυτή είναι μια πολύ βολική μέθοδος.

Έτσι, για παράδειγμα, βρήκαμε ένα στοιχείο επισημαίνοντάς το στο πρόγραμμα περιήγησης και είδαμε ότι περικλείεται<div class = "wpb_wrapper">

Αρχικά, είναι καλύτερο να αντιγράψετε τον φάκελο με τον ιστότοπό σας από τον διακομιστή και να τον τοποθετήσετε σε ένα βολικό μέρος, για παράδειγμα, στην επιφάνεια εργασίας σας.

Αντίγραφο<div class = "wpb_wrapper"> και ανοίξτε το Commander. Επιλογή εργαλείων - αναζήτηση

Αναζήτηση τοποθεσίας - επιλέξτε τον προηγουμένως αποθηκευμένο φάκελο με τον ιστότοπο. Επιλέξτε το πλαίσιο κειμένου και πληκτρολογήστε αυτό που ψάχνετε

ή οτιδήποτε χρειαστείτε.

Το πρόγραμμα θα εμφανίσει τη θέση όλων των αρχείων στα οποία υπάρχει. Πώς να αλλάξετε τον κωδικό τοποθεσίας - γνωρίζετε ήδη ποιο αρχείο πρέπει να επεξεργαστεί.

Εάν δεν υπάρχει πρόγραμμα επεξεργασίας στον διακομιστή, αλλάξτε το στον υπολογιστή σας και μεταφορτώστε το μέσω FTP.

Πειραματιστείτε, συντομεύστε ή αυξήστε το ερώτημα - όλα θα βρεθούν, αλλά δεν πρέπει να αναζητήσετε δυναμικά φορτωμένα δεδομένα. Φυσικά δεν θα εμφανιστούν.

Τα στυλ μπορούν επίσης να αλλάξουν χρησιμοποιώντας το πρόγραμμα περιήγησης. Το επισημάναμε, είδαμε τον αριθμό γραμμής, ανοίξαμε το αρχείο στυλ και πληκτρολογήσαμε την επιθυμητή τιμή. Καλή τύχη!

Ψάχνοντας σε αμέτρητους ιστότοπους στο Διαδίκτυο, μπορείτε να συναντήσετε αυτούς που μας αρέσουν πολύ. Προκύπτουν αμέσως μια σειρά από ερωτήματα. Ο ιστότοπος δημιουργήθηκε με χρήση οικιακού κώδικα ή κάποιου είδους CMS; Τι στυλ CSS έχει; Ποιες είναι οι μετα-ετικέτες του; Και ούτω καθεξής.

Υπάρχουν πολλά εργαλεία που μπορούν να χρησιμοποιηθούν για την εξαγωγή πληροφοριών σχετικά με τον κώδικα μιας σελίδας ιστότοπου. Αλλά έχουμε πάντα το δεξί κουμπί του ποντικιού στο χέρι. Αυτό θα χρησιμοποιήσουμε, χρησιμοποιώντας τον ιστότοπό μου ως παράδειγμα.

Πώς να δείτε τον κώδικα της σελίδας;

Για να προβάλετε τον πηγαίο κώδικα μιας σελίδας ιστότοπου, πρέπει να τοποθετήσετε το ποντίκι σας σε οποιαδήποτε περιοχή της ιστοσελίδας (εκτός από εικόνες και συνδέσμους). Μετά από αυτό κάντε κλικ στο δεξί κουμπίποντίκια. Ένα παράθυρο με πολλές επιλογές θα ανοίξει μπροστά μας (στο διαφορετικά προγράμματα περιήγησηςμπορεί να διαφέρουν ελαφρώς). ΣΕ Google πρόγραμμα περιήγησης Chrome, για παράδειγμα, αυτές είναι οι εντολές:

  • πίσω;
  • προς τα εμπρός;
  • επανεκκίνηση?
  • αποθήκευση ως?
  • σφραγίδα;
  • Μετάφραση στα ρωσικά?
  • προβολή κώδικα σελίδας;
  • προβολή κώδικα.

Πρέπει να κάνουμε κλικ προβολή κώδικα σελίδας, και ο κώδικας html της σελίδας του ιστότοπου θα ανοίξει μπροστά μας.

Προβολή του κώδικα της σελίδας: τι να προσέξετε;

Έτσι, ο κώδικας σελίδας Html είναι μια αριθμημένη λίστα γραμμών, καθεμία από τις οποίες φέρει πληροφορίες σχετικά με τον τρόπο κατασκευής αυτού του ιστότοπου. Για να μάθουν γρήγορα να το καταλαβαίνουν αυτό ένας τεράστιος αριθμόςσημάδια και ειδικούς χαρακτήρες, πρέπει να κάνετε διάκριση μεταξύ διαφορετικών τμημάτων κώδικα.

Για παράδειγμα, γραμμές κώδικα μέσα στην ετικέτα head περιέχουν πληροφορίες για μηχανές αναζήτησηςκαι webmasters. Δεν εμφανίζονται στον ιστότοπο. Εδώ μπορείτε να δείτε πώς λέξεις-κλειδιάΑυτή η σελίδα προωθείται με βάση τον τρόπο που γράφεται ο τίτλος και η περιγραφή της. Μπορείτε επίσης να βρείτε έναν σύνδεσμο εδώ, κάνοντας κλικ στον οποίο θα μάθουμε για την οικογένεια γραμματοσειρές googleχρησιμοποιείται στον ιστότοπο.

Εάν ο ιστότοπος είναι κατασκευασμένος στο CMS WordPressή Joomla, τότε θα είναι επίσης ορατό εδώ. Για παράδειγμα, αυτή η περιοχή εμφανίζει πληροφορίες σχετικά με Θέμα WordPressή Πρότυπο Joomlaτοποθεσία. Μπορείτε να το δείτε διαβάζοντας τα περιεχόμενα των συνδέσμων που επισημαίνονται με μπλε χρώμα. Ένας σύνδεσμος δείχνει ένα πρότυπο ιστότοπου.

Για παράδειγμα:

//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3

Θα δούμε τα στυλ γραμματοσειράς CSS της σελίδας. Σε αυτήν την περίπτωση, χρησιμοποιείται η γραμματοσειρά. Αυτό μπορείτε να το δείτε εδώ - font-family: 'Source Sans Pro'.

Αυτός ο ιστότοπος έχει βελτιστοποιηθεί χρησιμοποιώντας ένα πρόσθετο SEO Yoast SEO. Αυτό μπορεί να φανεί από αυτήν την ενότητα κώδικα που σχολιάστηκε:

Αυτός ο ιστότοπος είναι βελτιστοποιημένος με τοΠροσθήκη Yoast SEO v3.4.2 - https://yoast.com/wordpress/plugins/seo/

Όλες οι πληροφορίες που περιέχονται στην ετικέτα σώματος εμφανίζονται από το πρόγραμμα περιήγησης στην οθόνη της οθόνης. Εδώ βλέπουμε τον κώδικα html της σελίδας και στο κάτω μέρος υπάρχει ο κώδικας σεναρίου Yandex Metrics. Περιβάλλεται από μια σχολιασμένη ετικέτα με το κείμενο:

/Μετρητής Yandex.Metrika

Ας το συνοψίσουμε

Έχοντας κάνει μια μάλλον επιφανειακή ανάλυση του κώδικα αρχική σελίδα site, μπορούμε να βγάλουμε ένα συμπέρασμα σχετικά με τα εργαλεία με τα οποία δημιουργήθηκε αυτή η σελίδα. Είδαμε σε αυτό:

  • CMS WordPress;
  • Γραμματοσειρά Google Source Sans Pro.
  • Θέμα WordPress – Σίδνεϊ.
  • Προσθήκες Yoast.
  • Μετρητής μετρήσεων Yandex.

Τώρα η αρχή της ανάλυσης κώδικας htmlΗ σελίδα του ιστότοπου είναι αρκετά σαφής. Δεν είναι καθόλου απαραίτητο να κρατήσετε ανοιχτή τη σελίδα που ερευνάτε στο πρόγραμμα περιήγησης. Μπορείτε να αποθηκεύσετε τον κώδικα της σελίδας στον υπολογιστή σας χρησιμοποιώντας τους συνδυασμούς πλήκτρων ctrl+a, ctrl+c, ctrl+v. Επικολλήστε το σε οποιοδήποτε επεξεργαστής κειμένου(Το Notepad++ είναι καλύτερο) και αποθηκεύστε με επέκταση html. Με αυτόν τον τρόπο, μπορείτε να το μελετήσετε πιο βαθιά ανά πάσα στιγμή και να βρείτε πιο χρήσιμες πληροφορίες για τον εαυτό σας.

Αυτό το άρθρο είναι μια προσθήκη στο άρθρο σχετικά με την απεμπλοκή σεναρίων. Εδώ θα εξετάσουμε τις βασικές αρχές της κρυπτογράφησης και της συσκευασίας, τα αδύναμα σημεία προστασίας, τις μεθόδους χειροκίνητης αφαίρεσης, καθώς και καθολικά εργαλείαΓια αυτόματη αφαίρεσησυσκευαστές και προστασία κρέμας με Σενάρια JavaScript. ΣΕ πρόσφαταΌλο και περισσότερο, ο πηγαίος κώδικας των σεναρίων κρυπτογραφείται ή συσκευάζεται. Το Yandex, το DLE και άλλα δημοφιλή έργα άρχισαν να παρασύρονται με αυτό και οι όμορφες ιστορίες σχετικά με τη "φροντίδα των χρηστών", την "εξοικονόμηση κυκλοφορίας" και άλλες ανοησίες φαίνονται πολύ αστείες. Λοιπόν, αν κάποιος έχει κάτι να κρύψει, τότε το καθήκον μας είναι να τον φέρουμε στο φως.

Ας ξεκινήσουμε με τη θεωρία. Λόγω των χαρακτηριστικών Εκτέλεση JavaScriptόλοι οι κρυπτογραφητές και οι συσκευαστές, παρά την ποικιλομορφία τους, έχουν μόνο δύο παραλλαγές του αλγορίθμου: ή εναλλακτικά: Η δεύτερη μέθοδος χρησιμοποιείται συχνότερα για προστασία πηγαίος κώδικας htmlσελίδες, καθώς και διάφορα Trojans για ένεση στη σελίδα κακόβουλος κώδικας, όπως ένα κρυφό πλαίσιο. Μπορούν να συνδυαστούν και οι δύο αλγόριθμοι, η "πολυπλοκότητα" και η πολυπλοκότητα του αποκρυπτογραφητή μπορεί να είναι οτιδήποτε, μόνο η ίδια η αρχή παραμένει αμετάβλητη.

Και στις δύο περιπτώσεις αποδεικνύεται ότι οι λειτουργίες eval()Και document.write()Μεταδίδονται πλήρως αποκρυπτογραφημένα δεδομένα. Πώς να τους υποκλέψει; Δοκιμάστε να αντικαταστήσετε eval()επί συναγερμός(), και στο ανοιχτό MessageBox θα δείτε αμέσως το αποκρυπτογραφημένο κείμενο Ορισμένα προγράμματα περιήγησης σάς επιτρέπουν να αντιγράψετε κείμενο από τα MessageBox, αλλά είναι καλύτερο να χρησιμοποιήσετε αυτόν τον ημιαυτόματο αποκωδικοποιητή:

  1. < html >
  2. < head >< title >Αποκωδικοποιητής JavaScript
  3. < body >
  4. < script type = "text/javascript" >
  5. // Λειτουργία εγγραφής αποτελεσμάτων αποκρυπτογράφησης στο αρχείο καταγραφής
  6. αποκωδικοποιητής λειτουργίας (str) (
  7. έγγραφο. getElementById("αποκωδικοποιημένο" ). τιμή += str + "\n" ;
  8. < textarea id = "decoded" style = "width:900px; height:500px;" >
  9. < script type = "text/javascript" >

Για παράδειγμα, ας πάρουμε κάποιο σενάριο από το Yandex, αφού δούμε τον πηγαίο κώδικα, βλέπουμε κάτι ανθυγιεινό:

Eval(function(p,a,c,k,e,r)(e=function(c)(return(c c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36)));if(!
"".replace(/^/,String))(while(c--)r=k[c]||e(c);k=)];e=function())(return"\w+") ;c=1);ενώ(c--)if(k[c])
p=p.replace(new RegExp("\b"+e(c)+"\b","g"),k[c]);return p)("$.1e
.18=8(j)(3 k=j["6-9"]||"#6-9";3 l=j["6-L"]||".u-L";3 m=j ["6-L-17"]
||"";3 n=j["1d"]||0;$(5).2(".6-9").14("7");$(5).2(".6 -9").Z("7",8(
)(3 a=$(5).x();3 o=$(5).x();3 h=$(5).B("C");$(5).v("g -4");$(5).16(
$(k).q());3 t=$(o).2("15");3 c=$(o).2(".b-r");3 d=$(o).2 (".b-12");
[οι υπόλοιπες ίδιες ανοησίες κόβονται]

Θα πω αμέσως ότι αυτό το σενάριο επεξεργάζεται το JavaScript Compressor, είναι εύκολο να αναγνωριστεί από την υπογραφή του - το χαρακτηριστικό όνομα της συνάρτησης στην αρχή του σεναρίου. Αντιγραφή του όλου πηγήσενάριο, αντικαταστήστε το πρώτο ισοτιμίαεπί αποκρυπτογράφος, επικολλήστε το στον αποκωδικοποιητή και αποθηκεύστε το ως σελίδα html Ανοίξτε το σε οποιοδήποτε πρόγραμμα περιήγησης και δείτε ότι το μη συσκευασμένο σενάριο εμφανίζεται αμέσως στην περιοχή κειμένου. Είναι πολύ νωρίς για να χαρούμε όλες οι αλλαγές γραμμής και η μορφοποίηση του κώδικα. Πώς να το αντιμετωπίσετε αυτό γράφεται στο άρθρο σχετικά με την αποσυμφόρηση.

Δεύτερο παράδειγμα. Εδώ είναι η σελίδα html που καλύπτεται πρόγραμμα HTMLΠροστάτης. Αυτή είναι μια σελίδα που δείχνει τις δυνατότητες του προγράμματος, επομένως όλες οι επιλογές είναι ενεργοποιημένες εκεί: αποκλεισμός επιλογής κειμένου και αντιγραφή, απενεργοποίηση του δεξιού κουμπιού του ποντικιού, προστασία εικόνων, απόκρυψη της γραμμής κατάστασης, κρυπτογράφηση κώδικα html κ.λπ. Ας ανοίξουμε τον πηγαίο κώδικα και ας ρίξουμε μια ματιά. Στην κορυφή βρίσκεται το ήδη γνωστό document.write και ένα κρυπτογραφημένο σενάριο. Το τρέχουμε μέσω του αποκωδικοποιητή, παίρνουμε μια λειτουργία για την αποκρυπτογράφηση του κύριου περιεχομένου:

Κωδικός (JavaScript):

  1. hp_ok = true ;συνάρτηση hp_d01 (s )( ... cut ... o = ar . join ("" )+ os ; document . write (o )

Αντικαθιστούμε το τελευταίο document.write στη συνάρτηση με αποκωδικοποιητή και εισάγουμε μετά από αυτό και τα τρία υπόλοιπα κρυπτογραφημένα σενάρια:

  1. < script type = "text/javascript" >
  2. // Επικολλήστε πρώτα το κρυπτογραφημένο σενάριο εδώ
  3. // αντικαταστήστε όλες τις κλήσεις σε eval() και document.write() με decoder().
  4. hp_ok = true ;συνάρτηση hp_d01 (s )( .... o = ar . join ("" )+ os ; αποκωδικοποιητής (o );
  5. hp_d01 (unescape (">QAPKRV%22NCLEWC ....
  6. hp_d01 (unescape ( ">QAPKRV%22NCLEWCEG? HctcQa ...
  7. hp_d01 (unescape ( ">`mf(%22`eamnmp? !DDDDDD %22v ...

Για ευκολία, τα σενάρια δεν δίνονται πλήρως σε αυτό το άρθρο, πρέπει να τα αντιγράψετε στο σύνολό τους. Ανοίγουμε τον αποκωδικοποιητή στο πρόγραμμα περιήγησης και βλέπουμε τα σενάρια ασφαλείας που έχει προσθέσει το πρόγραμμα και το αποκρυπτογραφημένο κείμενο πηγής της σελίδας. Για ευκολία, μπορείτε να αποκρυπτογραφήσετε μόνο το τρίτο σενάριο, το οποίο περιέχει τον κώδικα html της σελίδας. Αυτή είναι όλη η προστασία. Όπως μπορείτε να δείτε, τίποτα περίπλοκο. Άλλες προστασίες για σελίδες HTML καταργούνται με τον ίδιο τρόπο.

Ας περάσουμε από τη χειροκίνητη αποκρυπτογράφηση στην αυτόματη αποκρυπτογράφηση. Για να καταργήσω τον πρώτο τύπο προστασίας, τροποποίησα ελαφρώς το σενάριο Beautify Javascript που είναι ήδη γνωστό σε εσάς και το μεταγλωττίζω σε ένα αρχείο exe. Χειρίζεται τις περισσότερες προστασίες JavaScript και περιτυλίγματα που έχω δει χωρίς κανένα πρόβλημα.

Eval.JavaScript.Unpacker.1.1-PCL.rar (12.124 byte)


Για πιο δύσκολες περιπτώσεις, θα πρέπει να χρησιμοποιήσετε βαρύ πυροβολικό. Αυτό δωρεάν έργο, σχεδιασμένο για την έρευνα Trojans και άλλου κακόβουλου κώδικα. Δεδομένου ότι όλα τα προγράμματα που έχουν σχεδιαστεί για την προστασία των πνευματικών δικαιωμάτων είναι σαφώς κακόβουλα, η Malzilla θα μας βοηθήσει στην καταπολέμησή τους. Λήψη (προς το παρόν είναι 1.2.0), αποσυσκευάστε, εκκινήστε. Ανοίξτε τη δεύτερη καρτέλα Αποκωδικοποιητής, επικολλήστε τον κωδικό του κρυπτογραφημένου σεναρίου στο επάνω παράθυρο, πατήστε το κουμπί Εκτέλεση σεναρίου.



Σε ένα φάκελο eval_tempΌλα τα αποτελέσματα της εκτέλεσης των συναρτήσεων eval() αθροίζονται, συμπεριλαμβανομένων των ενδιάμεσων. Μπορείτε να τα δείτε κάνοντας κλικ στο κουμπί Εμφάνιση αποτελεσμάτων eval()., το κείμενο θα ανοίξει στο κάτω παράθυρο. Μπορεί να αντιγραφεί, να επικολληθεί στο επάνω παράθυρο και να μορφοποιηθεί αμέσως με το πάτημα ενός κουμπιού Κωδικός μορφής. Εκτός από τον αποκωδικοποιητή, το Malzilla διαθέτει πολλά περισσότερα εργαλεία και ρυθμίσεις που διευκολύνουν την αφαίρεση οποιασδήποτε προστασίας από σενάρια JavaScript.



Μπορείτε επίσης να δώσετε προσοχή σε ένα ακόμη δωρεάν εργαλείογια εργασία με κρυπτογραφημένα σενάρια - FreShow. Έχει λιγότερες λειτουργίες, αλλά έχει ένα μέρος να είναι. Από το offsite μπορείτε να κάνετε λήψη ενός βίντεο επίδειξης που δείχνει ένα παράδειγμα εργασίας με το πρόγραμμα.

Όπως μπορείτε να δείτε, δεν υπάρχει τίποτα δύσκολο στην αφαίρεση προστασίας από σενάρια JavaScript και σελίδες html. Συνεχίζετε ακόμα να υπερασπίζεστε τα άθλια «δικαιώματα του συγγραφέα» σας; Τότε ερχόμαστε σε εσάς!

Απελευθερώσαμε νέο βιβλίο«Μάρκετινγκ περιεχομένου σε κοινωνικά δίκτυα: Πώς να μπείτε στο μυαλό των συνδρομητών σας και να τους κάνετε να ερωτευτούν την επωνυμία σας."

Συνεισφέρω

Ο πηγαίος κώδικας του ιστότοπου είναι ένα σύνολο σήμανσης HTML, Στυλ CSSκαι σενάρια JavaScript που λαμβάνει το πρόγραμμα περιήγησης από τον διακομιστή ιστού.

Περισσότερα βίντεο στο κανάλι μας - μάθετε το διαδικτυακό μάρκετινγκ με τη SEMANTICA

Μπορεί να συγκριθεί με ένα σύνολο εντολών που δίνονται στους στρατιώτες από έναν διοικητή. Φανταστείτε ότι το κοινό δεν βλέπει ούτε ακούει το αφεντικό. Από την άποψή τους, ο στρατός εκτελεί ενέργειες ανεξάρτητα. Στην περίπτωσή μας, ο διοικητής είναι το πρόγραμμα περιήγησης, οι εντολές είναι ο πηγαίος κώδικας και οι στρατιώτες που βαδίζουν είναι το τελικό αποτέλεσμα.

Ο ιστότοπος αποθηκεύεται σε διακομιστή web, ο οποίος στέλνει τη σελίδα κατόπιν αιτήματος του χρήστη. Ένα αίτημα είναι να πληκτρολογήσετε μια διεύθυνση URL στη γραμμή διευθύνσεων, να κάνετε κλικ σε έναν σύνδεσμο ή να κάνετε κλικ σε ένα κουμπί υποβολής σε μια φόρμα. Δεν έχει σημασία σε ποια γλώσσα είναι γραμμένες οι ιστοσελίδες ή αν περιλαμβάνουν ένα στοιχείο λογισμικού. Το τελικό αποτέλεσμα οποιουδήποτε αλγόριθμου από την πλευρά του διακομιστή είναι ένα σύνολο ετικετών html και κειμένου.
Ο πηγαίος κώδικας της σελίδας είναι ένα σύνολο δεδομένων που περιλαμβάνει:

  • html σήμανσης?
  • φύλλο στυλ ή σύνδεσμος αρχείου.
  • προγράμματα γραμμένα σε JavaScript ή συνδέσμους σε αρχεία με κώδικα.

Αυτές οι τρεις ενότητες υποβάλλονται σε επεξεργασία από το πρόγραμμα περιήγησης. Για τον διακομιστή, αυτό είναι απλώς το κείμενο που πρέπει να σταλεί ως απάντηση στο αίτημα.

Γιατί ίσως χρειαστεί να μελετήσουμε τον πηγαίο κώδικα

Ό,τι βλέπουμε, μπορούμε να αναλύσουμε και να εφαρμόσουμε για να λύσουμε ορισμένα προβλήματα που προκύπτουν κατά την εργασία με τον ιστότοπο, ειδικά κατά τη βελτιστοποίησή του. Βλέποντας τον πηγαίο κώδικα, μπορούμε:

  • Δείτε τις μετα-ετικέτες του ιστότοπού σας ή κάποιου άλλου για να τις αναλύσετε.
  • Δείτε την παρουσία ή την απουσία ορισμένων στοιχείων στον ιστότοπο: μετρητές, κωδικοί αναγνώρισης διάφορα συστήματα, ορισμένα σενάρια και άλλα πράγματα.
  • Μάθετε τις παραμέτρους των στοιχείων: μεγέθη, χρώματα, γραμματοσειρές.
  • Βρείτε τη διαδρομή προς φωτογραφίες και άλλα στοιχεία που βρίσκονται στη σελίδα.
  • Εξερευνήστε συνδέσμους από τη σελίδα.
  • Βρείτε προβλήματα με τον κώδικα που παρεμβαίνουν στη διαδικασία βελτιστοποίησης ιστότοπου: αυτά που δεν αναφέρονται ξεχωριστά αρχείαστυλ, σενάρια, μη έγκυρος κώδικας.

Αυτά είναι τα βασικά χαρακτηριστικά, αλλά στην πραγματικότητα, έχοντας τη δυνατότητα να διαβάσετε τον κώδικα, μπορείτε να μάθετε πολλά περισσότερα για τη σελίδα.

Πώς να δείτε τον πηγαίο κώδικα ενός ιστότοπου

Δεν θα είναι δυνατό να γίνει αυτό πλήρως με τη μορφή με την οποία έχει αναρτηθεί στον διακομιστή από το πρόγραμμα περιήγησης. Αλλά μπορείτε να δείτε όλη τη σήμανση κάνοντας δεξί κλικ στη σελίδα. Εδώ και παραπέρα Παράδειγμα GoogleΧρώμιο.

Επιλέξτε την επιλογή "Προβολή κώδικα σελίδας" και λάβετε την πλήρη καταχώριση σε ξεχωριστή καρτέλα.

Είναι απλώς ένα κείμενο που πρέπει να αναλύσεις για να καταλάβεις. Αλλά μπορείτε να λάβετε διαδραστικό κώδικα χρησιμοποιώντας τα εργαλεία προγραμματιστή.

Πώς να βρείτε τον πηγαίο κώδικα μιας σελίδας ιστότοπου

Κάντε κλικ στο εικονίδιο μενού στο πρόγραμμα περιήγησης. Τις περισσότερες φορές είναι στα δεξιά και μοιάζει με τρεις τελείες ή ρίγες.

Στην ενότητα πρόσθετα εργαλείαεπιλέξτε «Εργαλεία προγραμματιστή».

Θα ανοίξει ένα παράθυρο που δείχνει την ενεργή κατάσταση του κωδικού. Αυτό σημαίνει ότι όταν κάνετε κλικ στη σήμανση, το στυλ του στοιχείου θα εμφανιστεί δίπλα του και τα επιλεγμένα μπλοκ θα επισημανθούν στη σελίδα.

Στην καρτέλα "Πηγή" μπορείτε να δείτε τα περιεχόμενα ορισμένων αρχείων: σενάρια, γραμματοσειρές, εικόνες.

Στην καρτέλα "Ασφάλεια", μπορείτε να ελέγξετε το πιστοποιητικό του ιστότοπου.

Η καρτέλα "Έλεγχοι" θα σας βοηθήσει να ελέγξετε τον πόρο που δημοσιεύτηκε στη φιλοξενία.

Εάν η θέση του πίνακα στα δεξιά δεν είναι βολική, μπορείτε να κάνετε κλικ στις τρεις τελείες και να την αλλάξετε επιλέγοντας το επιθυμητό στοιχείο.

Πώς να δείτε μετα-ετικέτες

Κάθε έγγραφο HTML περιλαμβάνει ετικέτες δομής. Εδώ είναι μερικά από αυτά:

  1. Html – ολόκληρο το έγγραφο.
  2. Επικεφαλής – κεφαλίδες τμήματος υπηρεσιών.
  3. Τίτλος – τίτλος σελίδας (εμφανίζεται στην καρτέλα).
  4. Body – το σώμα του εγγράφου.
  5. H1-H6 – επικεφαλίδες κειμένου σελίδας.
  6. Άρθρο – άρθρο.
  7. Ενότητα - τμήμα.
  8. Μενού – μενού.
  9. Div – μπλοκ.
  10. Span – κορδόνι.
  11. P – παράγραφος.
  12. Τραπέζι – τραπέζι.

Τα στοιχεία έχουν σχεδιαστεί για να οριοθετούν λογικά τμήματα σε μια σελίδα, εάν είναι απαραίτητο, έχουν σχεδιαστεί χρησιμοποιώντας στυλ. Περιέχουν κείμενο που είναι κατά κάποιο τρόπο ορατό στη σελίδα. Αλλά μέσα ετικέτα Κεφάλιυπάρχουν πληροφορίες σέρβις. Μετα-ετικέτες χρησιμοποιούνται για να το υποδείξουν. Όλα όσα γράφονται σε αυτά προορίζονται για τον διακομιστή και τις μηχανές αναζήτησης.

Το περιεχόμενό τους δεν μπορεί να εντοπιστεί με άλλο τρόπο.

Ας προσέξουμε Ετικέτα συνδέσμου. Με τη βοήθειά του, καθορίζονται σύνδεσμοι προς εξωτερικά αρχεία που περιλαμβάνονται. Εάν θέλετε, μπορείτε να δείτε τα περιεχόμενα και να τα αποθηκεύσετε στο δίσκο. Για να το κάνετε αυτό, μετακινήστε το δείκτη στη διεύθυνση και πατήστε RMB. Επιλέξτε "Άνοιγμα σε νέα καρτέλα".

Θα ανοίξει σε νέα καρτέλα καθορισμένο αρχείο, το οποίο μπορείτε να δείτε ή να αποθηκεύσετε.

Πώς να προβάλετε τον πηγαίο κώδικα μιας σελίδας για τον εντοπισμό σφαλμάτων ενός σεναρίου

Σε αυτήν την περίπτωση, είναι πιο βολικό να ανοίξετε τη σελίδα στο τοπικό μηχάνημα. Εάν χρειάζεται μόνο να διορθώσετε τη σήμανση, τα στυλ και τα σενάρια, τότε αυτό μπορεί να γίνει απευθείας από το φάκελο. Ο κώδικας HTML εμφανίζεται με τον ίδιο τρόπο. Εδώ είναι τα λάθη Κώδικας JavaScriptμπορείτε να δείτε στην καρτέλα "Κονσόλα". Αυτό δείχνει την περιγραφή του σφάλματος και τον αριθμό γραμμής όπου παρουσιάστηκε.

Η σύνταξη φαίνεται απευθείας στον κώδικα. Για αυτό προορίζεται η καρτέλα "Πηγή".

Πώς να δείτε τον κωδικό ενός συγκεκριμένου στοιχείου

Για μεγάλες σελίδεςΜε ένας μεγάλος αριθμόςστοιχεία είναι δύσκολο να βρεθούν απαιτούμενος κωδικόςσε όλη τη σήμανση. Σε αυτή την περίπτωση, θα πρέπει να χρησιμοποιήσετε ειδική ομάδα μενού περιβάλλοντος. Μετακινήστε το ποντίκι πάνω από το κομμάτι και πατήστε RMB. Επιλέξτε την εντολή «Προβολή κώδικα».

Θα ανοίξει το ίδιο παράθυρο, αλλά με εστίαση στο επιλεγμένο αντικείμενο.

Περίληψη

Σας είπαμε ποιος είναι ο πηγαίος κώδικας της σελίδας. Αρκεί να κατακτήσετε βασικές γνώσεις HTML και CSS και να χρησιμοποιήσετε βολικά εργαλείαπρογραμματιστή, μπορείτε να διορθώσετε τα δικά σας έγγραφα HTML.

Η προβολή του κώδικα πόρων στο Διαδίκτυο θα σας επιτρέψει να μάθετε όχι μόνο από δική σας εμπειρία, αλλά και χρησιμοποιήστε πραγματικά παραδείγματα εργασίας. Και για τους ειδικούς SEO, οι μετα-ετικέτες θα είναι χρήσιμες, οι πληροφορίες στις οποίες μπορούν να πουν πολλά για τον ιστότοπο.