Zhvilluesit e shfletuesve janë kujdesur për komoditetin e atyre që krijojnë faqe që hapen në të njëjtët shfletues, përkatësisht, webmasterët. Ata kanë shtuar mjete zhvilluesish në funksionet standarde, me të cilat mund të hapni lehtësisht dhe shikoni kodin burimor të faqes së faqes në shfletues: HTML, CSS, JavaScript (JS), merrni të dhëna të ndryshme të dobishme në lidhje me strukturën e faqes, kryeni analizën teknike të saj. Në përgjithësi, për të parë shumë gjëra të dobishme.
Sigurisht, këto mjete përdoren jo vetëm nga krijuesit e faqeve për punë, por edhe nga përdoruesit e zakonshëm që mund të shohin të dhëna të ndryshme të dobishme me kodin burimor.
Në këtë artikull, do të mësoni se si të shikoni kodin burimor të një faqe siti në një shfletues (si të hapni kodin e faqes HTML, CSS, JavaScript).
Si të hapni kodin burimor të një faqe në një shfletues
Ekzistojnë dy mënyra për të hapur kodin burimor të një faqeje interneti në një shfletues:
- Përdorimi i çelësave të nxehtë;
- Hapni nga menyja e kontekstit.
Ctrl + U- një kombinim i çelësave të nxehtë për të parë kodin burimor të të gjithë faqes së faqes në një dritare të re të veçantë. Standard për të gjithë shfletuesit: Google Chrome, Opera, Mozilla Firefox, shfletues Yandex, IE.
Mund të futni gjithashtu mjetet e zhvilluesit si më poshtë:
Për të gjetur shpejt kodin, fjalën ose tekstin e kërkuar në faqe, mund të përdorni standardin e kombinimit të çelësave të nxehtë të kërkimit për të gjithë shfletuesit: Ctrl + G.
Video udhëzime:
Shiko kodin e artikullit | eksploroni artikullin | inspektoni një artikull
Nëse befas duhet të shikoni jo të gjithë kodin burimor, por të shfaqni vetëm një pjesë të veçantë të tij, një pjesë në faqe, atëherë mjeti i mëparshëm nuk do të funksionojë. Për ta bërë këtë, ekziston një funksion tjetër në mjetet e zhvilluesit, i cili do të diskutohet më poshtë.
Si të shikoni kodin e një elementi në një faqe:
Përveç kësaj, mund të përdorni shkurtoret e tastierës për të hyrë shpejt në inspektimin e elementeve.
Çelësat e nxehtë (butonat):
Google Chrome: Ctrl + Shift + I dhe Ctrl + Shift + C
Opera: Ctrl + Shift + I dhe Ctrl + Shift + C
Mozilla Firefox: Ctrl + Shift + I dhe Ctrl + Shift + C
Shfletuesi Yandex: Ctrl + Shift + I dhe Ctrl + Shift + C
Pas veprimeve të ndërmarra, kodi burimor i faqes në internet do të hapet në të njëjtën dritare të shfletuesit:
I gjithë kodi HTML do të jetë në kolonën e majtë të madhe. Dhe stilet CSS janë në të djathtë.
Avantazhi i kësaj metode, natyrisht, është se përdoruesi ka mundësinë të ndryshojë kodin burimor, të modifikojë stilet. Kjo do të thotë, ju mund të modifikoni stilet në faqe dhe të shihni se si do të duket me stile të caktuara, pa pasur nevojë të bëni menjëherë ndryshime në skedarët që janë në serverët pritës. Për të ndryshuar ose shtuar kodin e programit, duhet të klikoni dy herë në fragmentin ose zonën e dëshiruar. Sigurisht, rregullimi i kodit të shfletuesit nuk do të zbatohet në serverët pritës. Prandaj, në të ardhmen, në çdo rast, do t'ju duhet ta kopjoni këtë kod dhe ta shkruani në skedarë.
Ky udhëzues video detajon dhe ju tregon se si të punoni me mjetet e zhvilluesit:
Ashtu si kjo, në internet, pikërisht në shfletues, mund të shikoni kodin burimor të faqes së faqes, të merrni të dhëna bazë për kodin HTML dhe CSS, t'i ndryshoni dhe kopjoni ato, pa pasur nevojë të shkarkoni skedarët e kësaj faqeje në kompjuterin tuaj.
Nga rruga, përdoruesit e papërvojë të internetit që kanë ndryshuar kodin e faqes dhe presin që ai të ruhet do të zhgënjehen. Në fund të fundit, pas rifreskimit të faqes, të gjitha ndryshimet në të do të zhduken. Kjo nuk mjafton për të hakuar faqen 🙂
Si të shikoni kodin burimor në një telefon Android
Do të doja gjithashtu të vërej se mjetet e zhvilluesit janë të disponueshme jo vetëm në versionin desktop të shfletuesve, domethënë në kompjuterë dhe laptopë. Në telefonat dhe tabletët (Android, IOS), mund të shikoni gjithashtu kodin burimor.
Për ta bërë këtë, shtoni prefiksin e burimit të pamjes në URL-në e faqes së inspektuar:
Për shembull:
pamje-burimi: https: // site / turbo-rezhim-opera /
1 votë
Ditë të mbarë, të dashur lexues të blogut tim. Ndodh që të gjeni ndonjë veçori të bukur në faqe dhe pyetja fillon të mundojë se si krijuesi arriti një efekt kaq interesant.
Rezulton se gjetja e përgjigjes është shumë e thjeshtë. Dhe nëse keni disa aftësi, atëherë mund të grumbulloni shumë çipa të tillë dhe të krijoni uebsajtin tuaj unik në një kohë të shkurtër.
Sot do të flasim se si të hapim kodin e një faqeje, një element specifik dhe të mësojmë se si ta përdorni këtë aftësi në avantazhin tuaj.
Njohuri bazë për kodin
Faqja ime është e destinuar për fillestarët dhe së pari do të doja t'ju tregoja shkurtimisht për faqet dhe kodin në përgjithësi.
Për të vizatuar një figurë, pastaj prerë atë në pjesë të vogla, shkruani kodin, falë të cilit shfletuesi do të mbledhë përsëri të gjithë elementët në një tërësi të vetme. Gjithçka duket shumë e ndërlikuar? Aspak, dhe nuk duhet të pikëlloheni për këtë.
Kështu krijohen faqet e internetit cilësore. Nëse dëshironi - përfshihuni në këtë biznes dhe studioni, nuk ka dëshirë - askush nuk mund t'ju detyrojë.
Mund të them vetëm një gjë ... nuk ka asgjë më të këndshme sesa të shohësh se si fjalët e pakuptueshme të shkruara nga ti shndërrohen në një tërësi të vetme dhe marrin jetë: lidhjet funksionojnë, butonat lëvizin, fotot lëvizin, teksti zvarritet. Unë mendoj se e di se si u ndje Victor Frankenstein.
Kur filloni të kuptoni gjuhën sekrete dhe shihni se gjithçka është në të vërtetë shumë më e thjeshtë nga sa dukej fillimisht, nuk mund të mos besoni në forcat tuaja dhe aftësitë e trurit. Është shumë e lezetshme.
Si bëhen faqet? Idealisht, së pari. Ai thjesht vizaton një fotografi. Për shembull, siç tregohet në foton më poshtë. Ndërsa kjo është vetëm një imazh, një fotografi. Asnjë lidhje nuk funksionon, kur klikoni nuk shkoni askund, nuk kryhet asnjë kërkim.
Sipas kësaj fotografie. Hidhini një sy pamjes së ekranit më poshtë. Ju mund të mendoni se ky është një grup simbolesh qesharake dhe shumë komplekse. Në fakt, gjithçka nuk është aq e vështirë, ekziston një algoritëm i caktuar.
Ka vetëm rreth 150 etiketa, dhe secila prej tyre është përgjegjëse për një veprim specifik: lidhje, transferim, bold, ngjyrë, titull etj. Nuk është aq e vështirë t'i kuptosh ato nëse ka një dëshirë dhe nuk e shqetëson kohën.
Me njohuri për këto atribute, pothuajse çdo detyrë mund të zgjidhet. Këtu janë vetëm mënyra për të arritur qëllimin, secili zhvillues gjen të tijën.
Krijuesit me përvojë shohin menjëherë se si të arrijnë rezultatin, ndërsa të tjerët duhet të mendojnë, të kërkojnë një përgjigje në artikuj ose në kodin burimor të konkurrentëve. Ata thjesht marrin pjesën që u nevojitet nga një faqe e palës së tretë dhe e modifikojnë vetë. Kjo shkurton ndjeshëm procesin e punës.
Më vonë, unë do t'ju tregoj një shembull specifik.
Shiko kodin
Pra, më lejoni së pari t'ju tregoj se si të vazhdoni nëse keni nevojë të mësoni html-in e dikujt tjetër. Më pas do t'i hedhim një vështrim më të afërt të gjitha çështjeve të tjera.
Menyra me e mire
Metoda që do të përshkruaj së pari është pak e vështirë për fillestarët, por si hyrje, do të jetë e dobishme, lexoni më tej. Hapni faqen dhe klikoni në butonin e djathtë të miut. Zgjidhni artikullin "Ruaj si ..."
Ruani të gjithë faqen e internetit. Siç mund ta shihni në pamjen e ekranit, unë kam shkarkuar tashmë gjithçka paraprakisht. Këtu kemi dy dosje.
Gjithçka që ju nevojitet është këtu. Çdo artikull. Nëse e kuptoni këtë, mund të merrni shpejt gjithçka që ju nevojitet. Por, një detyrë e tillë po bëhet gjithnjë e më e pamundur. Shkarkimi nuk është në vazhdim. Çfarë duhet të bëni nëse është e ndaluar të kopjoni faqen?
Ky është Google Chrome
Siç mund ta keni vënë re tashmë, unë përdor më shpesh Google Chrome dhe gjetja e kodit të dikujt tjetër në këtë shfletues është po aq e lehtë sa të vrasësh dardha. Si në parim, dhe në çdo tjetër. Skema jo vetëm që do të jetë e ngjashme, por edhe identike. Hapni faqen, kodin e së cilës duam të zbulojmë dhe klikoni kudo me butonin e djathtë të miut. Në dritaren që shfaqet, klikoni "Shiko kodin e faqes".
Një fletë kodi do të hapet në një dritare të re, e cila është mjaft e vështirë për një fillestar për t'u kuptuar. Por, mos u shqetësoni para kohe.
Nëse duhet të dini kodin e vetëm një elementi, thjesht kaloni mbi të me miun dhe kliko me të djathtën. Ne zgjedhim një funksion tjetër të kromit: "Shiko kodin e elementit".
Për shembull, mund të më interesojë se si është bërë logoja, duke përdorur një fotografi apo një gjuhë programimi? Në fund të fundit, ju mund të vizatoni një katror duke përdorur css. Shumë ekspertë këshillojnë të kodoni sa më shumë informacion që të jetë e mundur. Si funksionojnë në faqet e njohura?
Kështu u shfaq informacioni i nevojshëm. html sipër, css poshtë. Këto janë dy gjuhë. E para është përgjegjëse për komponentin e tekstit, dhe e dyta për dizajnin. Nëse nuk do të kishte css, atëherë do të duhej të përshkruanit ngjyrën, madhësinë e shkronjave çdo herë. Për çdo faqe, është një kohë shumë e gjatë. Por nëse nuk do të kishte html, atëherë nuk do të kishim tekste. Shpjeguar rëndë, por në përgjithësi, gjithçka është kështu.
Meqë ra fjala, nëse jeni të interesuar se si funksionon këtu, mund të shihni lidhjen me foton më poshtë. Këtu është përgjigja juaj.
Mozilla Firefox
Nëse ju pëlqen të punoni në muff, atëherë gjithçka do të jetë saktësisht e njëjtë. Hapni faqen dhe klikoni në butonin e djathtë të miut. "Kodi burimor i faqes" nëse dëshironi të shihni të gjithë kodin në tërësi.
Kur rri pezull mbi ndonjë element, bëhet e mundur hapja e kodit të tij.
Këtu, të dhënat shfaqen në fund të ekranit, por përndryshe gjithçka është saktësisht e njëjtë.
Shfletuesi Yandex
Në shfletuesin Yandex, gjithçka është saktësisht e njëjtë si në dy versionet e mëparshme, hapni faqen, kliko me të djathtën, shiko kodin e faqes.
Zhvendosni kursorin mbi një element nëse duam të zbulojmë saktësisht kodin e tij.
Gjithçka shfaqet këtu në të njëjtën mënyrë si në krom.
Opera
Dhe së fundi, Opera.
Nga rruga, ju mund të keni vënë re se nuk është e nevojshme të përdorni miun. Ekziston një shkurtore e shpejtë e tastierës për të hapur kodin dhe është e njëjtë për të gjithë shfletuesit: CTRL + U.
Për artikujt: Ctrl + Shift + C.
Kështu duket rezultati.
Do të jetë interesante për fillestarët
Tani shikoni se si funksionon gjithçka. Ju gjeni një faqe dhe ju pëlqen vërtet një element. Për shembull, ky. Ju tashmë e dini se si të hapni kodin e elementit.
Tani kopjoni atë.
Unë përdor, ngjit këtë kod në një skedar të ri html, në etiketën e trupit (trupi në anglisht).
Tani le të shohim se si duket gjithçka në shfletues.
Gati. Në mënyrë që teksti të rreshtohet në skajet dhe të marrë një ngjyrë të gjelbër, duhet të lidhni css me këtë dokument dhe të kopjoni një kod tjetër nga faqja nga e cila e kemi shtypur këtë.
Tani nuk do ta bëj këtë. Duhet më shumë kohë, edhe e imja edhe e juaja. Mendoj se do t'i përshkruaj të gjitha detajet në publikimet e mia të ardhshme. Abonohuni në buletinin dhe jini të parët që dini për artikullin.
Nëse nuk e duroni dot dhe dëshironi të mësoni më shumë rreth html dhe css tani, atëherë tradicionalisht mund t'ju rekomandoj kurse trajnimi falas.
Këtu janë 33 mësime për t'ju bërë të zotëroni html - "Kurs falas HTML" .
Dhe këtu është informacioni i plotë rreth css - "Kurs CSS falas (45 mësime video!)" .
Tani ju dini pak më shumë. Ju uroj çdo sukses në përpjekjet tuaja. Deri herën tjetër!
Shkathtësi ndryshoni kodin burimor të faqesËshtë një aftësi e dobishme për një përdorues të avancuar të internetit. Duke zëvendësuar kodin HTML, ju mund të ndryshoni faqen e hapur të internetit sipas dëshirës tuaj. Në këtë artikull do t'ju tregojmë, si të ndryshoni kodin e faqes në Google Chrome. Sidoqoftë, në shfletuesit e tjerë gjithçka bëhet në të njëjtën mënyrë, kështu që nuk duhet të ketë ndonjë vështirësi.
Cili është kodi HTML i një faqeje?
Çdo faqe që hapni në një shfletues ka gjuhën e saj të shënjimit HTML. Ky kod është etiketa dhe tekst. Etiketat janë lloj etiketash që i tregojnë shfletuesit se si të shfaqë një pjesë të caktuar të faqes. Teksti është përmbajtja e faqes, ajo që shikon përdoruesi. Gjithashtu, stilet CSS mund të lidhen me faqen, të cilat vendosin pamjen e elementeve të faqes. për të ndryshoni kodin burimor të faqes Ju nuk keni nevojë të njihni HTML dhe CSS në thellësi, dhe së shpejti do ta shihni vetë.
Pse të ndryshoni një faqe në internet?
Mund të ndryshoni të dhënat në sit, të ndryshoni tekstin e mesazhit, të bëni një pamje të rreme të ekranit. Ju lutemi vini re se të gjitha ndryshimet janë të dukshme vetëm për ju dhe kur të rifreskoni faqen, ato do të zhduken. Gjithashtu të dhënat e ndryshuara nuk do të jenë reale. Për shembull, nëse nuk kam 10 dollarë dhe ndryshoj në 100, atëherë nuk do të kem më para. Kjo është vetëm shfaqja e faqes nga shfletuesi. Shembull:
Pas:
Si shembull, unë do të marr të njëjtin sajt dhe do të modifikoj njoftimin e mëparshëm të artikullit "" Hapja e faqes kryesore në Google Chrome. Klikoni me të djathtën në elementin që dua të ndryshoj, për shembull, titullin e njoftimit dhe zgjidhni "Shiko kodin".
Në dritaren që hapet, shkoni te skeda Elemente dhe shihni kodin HTML të faqes. Në të ju duhet të gjeni tekstin me interes për ne. (nënvizuar me të kuqe)
Tani do të fshij tekstin e vjetër dhe do të vendos të riun.
Kaq, titulli i njoftimit është ndryshuar. Tani do të ndryshoj vetë njoftimin, etiketat dhe titullin.
Mund të futni një imazh tjetër duke ndryshuar atributin src në etiketën img.
Pra, sot do të shikojmë disa mjete të dobishme për një master Web që e bëjnë jetën më të lehtë për paraqitjen e faqes në internet. Le të fillojmë me tastierën e webmasterit në Google Chrome. Dhe le të kalojmë mbi pyetjet që lindin më shpesh nga web-master gjatë paraqitjes së faqes.
Për të hyrë në tastierë, hapni faqen tuaj në Google Chrome, kliko me të djathtën kudo në faqen e internetit dhe zgjidhni Shiko Kodin e Faqes nga menyja rënëse e kontekstit, ose në një artikull specifik për kërkime duke zgjedhur elementin Shiko Kodin " .
Në krye, do të keni të listuara disa skeda. Sot do të flasim për skedën "Elementet". , i cili paraqet elementet e një faqe interneti me etiketat, veçoritë e theksuara, duke theksuar folenë e elementeve, duke përfaqësuar hierarkinë e një elementi në pemën DOM (shih në fund, nga prindi rrënjë deri tek ai aktual i eksploruar), aftësinë për të redaktoni elementet, një listë të vetive të tyre, merrni parasysh kërkimin sipas elementeve dhe le të njihemi me shikimin e stileve css që lidhen me elementët, etj.
Si mund t'i shoh të gjitha stilet që lidhen me një element specifik? Cila po aplikohet tani? Në cilat skedarë ndodhen?
Pra, asgjë nuk mund të jetë më e lehtë! Hapni shfletuesin Google Chrome, hapni faqen tonë - burimin e pyetjeve, kliko me të djathtën në elementin e dëshiruar, nëse është i dukshëm në kontekstin e faqes dhe zgjidhni "Shiko kodin e elementit" nga menyja e kontekstit.
Në fund, ne kemi një tastierë me një skedë të theksuar në të majtë "Elementet" dhe të gjitha stilet që lidhen me elementin në të djathtë, ku: Stilet e llogaritura- këto janë stile të përgjithshme "përmbledhëse" që i janë caktuar një elementi nga rregullat css dhe cilësimet e shfletuesit të përdoruesit (mjedisi i tij), dhe skeda është shembur.
Por ne jemi të interesuar për skedën "Stilet", e zgjeruar nën të, në të cilën renditen një nga një të gjitha stilet e caktuara për një element, si dhe skedarët ku tregohen këto rregulla për këtë element sipas llojit, id, klasës, emri, prona, atributi, etj. Në të njëjtën kohë, nëse rregulli css ka kaluar, atëherë ai është ripërcaktuar më herët / më vonë (gjë që e bën të lehtë gjurmimin se cili nga rregullat css ka përparësi dhe zbatohet në këtë rast për elementin).
Poshtë konsolës është një rresht që tregon një element në hierarkinë e dokumentit, duke ju lejuar lehtësisht të shikoni të gjithë listën e elementeve prindër nga rrënja në elementin e zgjedhur. Diçka si thërrime buke.
Etiketa HTML nuk është e dukshme në kontekstin e faqes? Apo duhet të gjeni të gjitha etiketat, për shembull, sipas një klase, emri, vetie, lloji të caktuar?
Hapni faqen në Google Chrome, klikoni me të djathtën, hapni menunë e kontekstit, zgjidhni « Shiko kodin e faqes » ... Shtypni kombinimin e tastit "CTRL + F" në të njëjtën kohë, shkruani frazën që na nevojitet ( Për shembull: klasa = ”mbushje ") dhe lundroni nëpër listën e rezultateve të gjetura, gjatë rrugës duke parë të gjitha stilet që lidhen me elementët e dëshiruar në anën e djathtë të faqes.
Si të shikoni kodin html të elementit (ve) të ngarkuar në mënyrë dinamike (për shembull: nga Ajax)
Ne presim që faqja të ngarkohet në Google Chrome. Ne kryejmë veprimet e nevojshme që Ajax të funksionojë. Klikoni me të djathtën mbi të dhënat e ngarkuara, zgjidhni "Shiko kodin e elementit" nga menyja e kontekstit, ekzaminoni rezultatin në tastierën në skedën "Elementet" në të majtë.
Shikoni ndryshimet në stilet css në kohë reale
Nga rruga, është gjithashtu e përshtatshme të vëzhgoni, nëse është e nevojshme, cilat stile i caktohen një elementi në fluturim, për shembull, kur lëvizni galerinë dhe ngjarjet e tjera me kohëmatës. Të gjitha stilet e caktuara nga javascript në kohë reale do të shfaqen në pronë stil elementin e përzgjedhur në dritaren në skedën "Elementet".
Vështrim i drejtpërdrejtë i efektit të rregullave css në prezantimin e etiketave html
Google Chrome ofron një tastierë interaktive për stilet css. Dhe kjo do të thotë që ju jo vetëm që mund të shikoni se cilat stile janë aplikuar për elementin, por gjithashtu mund të lëvizni kursorin e miut mbi css të specifikuar nga vetitë, ta aktivizoni atë duke përdorur shenjën që shfaqet në të djathtë ose ta çaktivizoni duke hequr zgjedhjen e flamurit dhe shikoni rezultatin që rezulton në faqe.
Ndryshimi i strukturës së prezantimit të elementeve html në fluturim (djathtas në shfletues)
Pra, ne kemi mësuar tashmë se si të eksplorojmë strukturën e një dokumenti në internet në Google Chrome, tani do të shohim shkurtimisht elementët e redaktimit në fluturim. Ne shkojmë në tastierë në çdo mënyrë të përshtatshme për ne. Ne gjejmë elementin e kërkuar në skedën "Elementet", kliko me të djathtën mbi të, duke thirrur kështu menunë e kontekstit që shfaqet:
- Shto atribut- shton një atribut për elementin e specifikuar. Sapo kursori të aktivizohet, fillojmë të vendosim vetinë e dëshiruar. për shembull: le të shkruajmë emrin = ”artikullImage”, i cili do t'i shtohet menjëherë artikullit tonë.
- Redakto atributin- nëse klikoni me të djathtën mbi një atribut elementi, artikulli bëhet i disponueshëm redaktoniatribut... Kliko, modifiko.
Shembull përdorimi: ne harruam fjalëkalimin e ruajtur nën yjet në Google Chrome (nëse fjalëkalimi është ruajtur në këtë shfletues). Klikoni me të djathtën mbi artikullin me një fjalëkalim, klikoni në "Shiko kodin e artikullit" , në tastierën në të majtë në skedën Elementet klikoni në llojin e atributit = "fjalëkalimi" me butonin e djathtë të mausit, klikoni majtas Redaktoatribut, duke ndryshuar atributin lloj =”fjalëkalimi " në lloj =”tekst ", dhe tani, në vend të yjeve, i njëjti fjalëkalim shfaqet në formën e tekstit.
- Redaktohtml- kliko me të djathtën mbi një artikull në tastierë Elementet, zgjidhni Redaktohtml, ndryshoni kodin sipas dëshirës tuaj.
- KopjosiHTML- kopjoni pjesën HTML që na nevojitet për kërkime të mëtejshme, të themi, në një bllok shënimesh, ose për qëllime të tjera ku duhet të aplikojmë saktësisht të njëjtën paraqitje. Ne kursejmë kohë.
- KopjoXPATH- kopjon paraqitjen XPATH të strukturës nga rrënja e elementit prind në elementin e zgjedhur.
- Fshijenyje- nëse duhet të hiqni elementin aktual të zgjedhur dhe të gjithë fëmijët e tij nga konteksti i faqes së internetit dhe shikoni rezultatin.
- fjalëmbështjell- do të japë pamjen e faqes së internetit në kontekstin e tastierës Elementet më të lexueshme.
Në artikujt vijues, ne do të vazhdojmë shqyrtimin tonë të mjeteve për webmasterin, dhe në veçanti, do të njihemi me pjesën tjetër të skedave të veglave për webmasterin në Google Chrome, dhe gjithashtu merrni parasysh korrigjimin e gabimeve të javascript duke përdorur shfletues të ndryshëm
