{"id":1088,"date":"2023-08-25T00:00:00","date_gmt":"2023-08-25T00:00:00","guid":{"rendered":"https:\/\/tech-lib.eu\/tech\/jak-zobrazit-zdrojovy-kod-v-prohlizeci-chrome\/"},"modified":"2023-08-25T00:00:00","modified_gmt":"2023-08-25T00:00:00","slug":"jak-zobrazit-zdrojovy-kod-v-prohlizeci-chrome","status":"publish","type":"post","link":"https:\/\/tech-lib.eu\/tech\/jak-zobrazit-zdrojovy-kod-v-prohlizeci-chrome\/","title":{"rendered":"Jak zobrazit zdrojov\u00fd k\u00f3d v prohl\u00ed\u017ee\u010di Chrome"},"content":{"rendered":"
\n
<\/div>\n

P\u0159\u00e1li jste si n\u011bkdy nahl\u00e9dnout do k\u00f3du webov\u00e9 str\u00e1nky a dozv\u011bd\u011bt se v\u00edce o jej\u00ed konstrukci? Pokud jako prohl\u00ed\u017ee\u010d pou\u017e\u00edv\u00e1te Google Chrome, m\u00e1te \u0161t\u011bst\u00ed! Chrome nab\u00edz\u00ed jednoduchou metodu pro prohl\u00ed\u017een\u00ed zdrojov\u00e9ho k\u00f3du jak\u00e9koli webov\u00e9 str\u00e1nky. Tento p\u0159\u00edsp\u011bvek vysv\u011btl\u00ed, jak prozkoumat zdrojov\u00fd k\u00f3d v prohl\u00ed\u017ee\u010di Chrome, a poskytne odpov\u011bdi na n\u011bkter\u00e9 souvisej\u00edc\u00ed ot\u00e1zky. <\/p>\n

Jak si v prohl\u00ed\u017ee\u010di Chrome p\u0159e\u010d\u00edst zdrojov\u00fd k\u00f3d? <\/div>\n

Chcete-li v prohl\u00ed\u017ee\u010di Chrome zobrazit zdrojov\u00fd k\u00f3d webov\u00e9 str\u00e1nky, postupujte jednodu\u0161e podle t\u011bchto pokyn\u016f: Otev\u0159ete webovou str\u00e1nku, jej\u00ed\u017e zdrojov\u00fd k\u00f3d chcete zobrazit. 2. Klikn\u011bte kdekoli na str\u00e1nce prav\u00fdm tla\u010d\u00edtkem my\u0161i (krom\u011b obr\u00e1zku nebo odkazu) a z kontextov\u00e9 nab\u00eddky vyberte mo\u017enost „Inspect“. Pot\u00e9 se zobraz\u00ed panel N\u00e1stroje pro v\u00fdvoj\u00e1\u0159e Chrome. 3. V horn\u00ed \u010d\u00e1sti panelu N\u00e1stroje pro v\u00fdvoj\u00e1\u0159e je li\u0161ta s nab\u00eddkami. Na kart\u00e1ch vyberte polo\u017eku „Elements“ (Prvky). 4. Zdrojov\u00fd k\u00f3d HTML str\u00e1nky bude nyn\u00ed viditeln\u00fd na lev\u00e9 stran\u011b panelu. Klepnut\u00edm na \u0161ipky vedle zna\u010dek m\u016f\u017eete ur\u010dit\u00e9 oblasti k\u00f3du rozbalovat a sbalovat. Jak pou\u017e\u00edvat funkci vyhled\u00e1v\u00e1n\u00ed zdrojov\u00e9ho k\u00f3du v prohl\u00ed\u017ee\u010di Chrome? <\/p>\n

<\/div>\n

Chrome nab\u00edz\u00ed praktickou funkci vyhled\u00e1v\u00e1n\u00ed, pokud ve zdrojov\u00e9m k\u00f3du hled\u00e1te konkr\u00e9tn\u00ed \u010d\u00e1st k\u00f3du. Zde je n\u00e1vod, jak ji pou\u017e\u00edt: Otev\u0159ete panel N\u00e1stroje pro v\u00fdvoj\u00e1\u0159e a vyberte mo\u017enost „Prvky“. <\/p>\n

<\/div>\n

2. Na prav\u00e9 stran\u011b panelu se zobraz\u00ed vyhled\u00e1vac\u00ed pole „Naj\u00edt“. Zadejte hledan\u00fd k\u00f3d nebo hledan\u00fd v\u00fdraz. 3. Chrome p\u0159i zad\u00e1v\u00e1n\u00ed zv\u00fdrazn\u00ed p\u0159\u00edslu\u0161n\u00e9 \u010d\u00e1sti zdrojov\u00e9ho k\u00f3du. Chcete-li se pohybovat ve v\u00fdsledc\u00edch hled\u00e1n\u00ed, pou\u017eijte tla\u010d\u00edtka se \u0161ipkami vedle vyhled\u00e1vac\u00edho panelu. <\/p>\n

Jak v prohl\u00ed\u017ee\u010di Chrome \u010d\u00edst a m\u011bnit zdrojov\u00fd k\u00f3d? <\/div>\n

P\u0159esto\u017ee prohl\u00ed\u017ee\u010d Chrome nab\u00edz\u00ed mo\u017enost prohl\u00e9dnout si zdrojov\u00fd k\u00f3d webov\u00e9 str\u00e1nky, nem\u00e1 v sob\u011b zabudovan\u00fd editor. Ke kr\u00e1tkodob\u00fdm \u00faprav\u00e1m v\u0161ak m\u016f\u017eete pou\u017e\u00edt kartu N\u00e1stroje pro v\u00fdvoj\u00e1\u0159e. Postup je n\u00e1sleduj\u00edc\u00ed: <\/p>\n

<\/div>\n

1. Klikn\u011bte na webovou str\u00e1nku prav\u00fdm tla\u010d\u00edtkem my\u0161i a v\u00fdb\u011brem mo\u017enosti „Inspect“ spus\u0165te okno N\u00e1stroje pro v\u00fdvoj\u00e1\u0159e. 2. Na kart\u011b Prvky vyhledejte oblast k\u00f3du, kterou chcete zm\u011bnit. 3. Poklep\u00e1n\u00edm na k\u00f3d jej otev\u0159ete k \u00faprav\u00e1m. Nyn\u00ed m\u016f\u017eete k\u00f3d upravovat. 4. M\u011bjte na pam\u011bti, \u017ee tyto zm\u011bny jsou do\u010dasn\u00e9 a nebudou ulo\u017eeny. Pokud chcete prov\u00e9st trval\u00e9 \u00fapravy, mus\u00edte m\u00edt p\u0159\u00edstup ke zdrojov\u00fdm soubor\u016fm k\u00f3du serveru. <\/p>\n

Jak mohu zkop\u00edrovat zdrojov\u00fd k\u00f3d prohl\u00ed\u017ee\u010de? <\/div>\n

Chrome umo\u017e\u0148uje jednoduch\u00e9 zkop\u00edrov\u00e1n\u00ed zdrojov\u00e9ho k\u00f3du webov\u00e9 str\u00e1nky pro pou\u017eit\u00ed jako reference nebo pro anal\u00fdzu: 1. Klikn\u011bte na webovou str\u00e1nku prav\u00fdm tla\u010d\u00edtkem my\u0161i a v\u00fdb\u011brem mo\u017enosti „Inspect“ spus\u0165te okno N\u00e1stroje pro v\u00fdvoj\u00e1\u0159e. 2. Klikn\u011bte na webovou str\u00e1nku a vyberte mo\u017enost „Inspect“. 2. Klepn\u011bte prav\u00fdm tla\u010d\u00edtkem my\u0161i na zdrojov\u00fd k\u00f3d HTML na kart\u011b Prvky. 3. Chcete-li zv\u00fdrazn\u011bn\u00fd k\u00f3d zkop\u00edrovat, vyberte z kontextov\u00e9 nab\u00eddky mo\u017enost „Kop\u00edrovat“. 4. Pot\u00e9 m\u016f\u017eete k\u00f3d vlo\u017eit do textov\u00e9ho editoru nebo jin\u00e9ho programu a d\u00e1le jej pou\u017e\u00edvat. <\/p>\n

<\/div>\n

Z\u00e1v\u011brem lze \u0159\u00edci, \u017ee v\u00fdvoj\u00e1\u0159sk\u00e9 n\u00e1stroje v prohl\u00ed\u017ee\u010di Google Chrome nab\u00edzej\u00ed robustn\u00ed sb\u00edrku n\u00e1stroj\u016f pro prohl\u00ed\u017een\u00ed a zkoum\u00e1n\u00ed zdrojov\u00e9ho k\u00f3du. Chrome nab\u00edz\u00ed n\u00e1stroje pro kontrolu struktury webov\u00e9 str\u00e1nky, vyhled\u00e1v\u00e1n\u00ed konkr\u00e9tn\u00edho k\u00f3du, moment\u00e1ln\u00ed \u00fapravy k\u00f3du a kop\u00edrov\u00e1n\u00ed k\u00f3du pro dal\u0161\u00ed v\u00fdzkum. Pus\u0165te se tedy do zkoum\u00e1n\u00ed zdrojov\u00e9ho k\u00f3du sv\u00fdch obl\u00edben\u00fdch webov\u00fdch str\u00e1nek, abyste se dozv\u011bd\u011bli v\u00edce o jejich fungov\u00e1n\u00ed.<\/p><\/div>\n

\n
FAQ<\/div>\n
\n
Lze zobrazit zdrojov\u00fd k\u00f3d roz\u0161\u00ed\u0159en\u00ed Chrome?<\/div>\n

Ano, m\u016f\u017eete se pod\u00edvat na zdrojov\u00fd k\u00f3d roz\u0161\u00ed\u0159en\u00ed Chrome. Zde je n\u00e1vod, jak na to: V kroku 1 otev\u0159ete prohl\u00ed\u017ee\u010d Chrome v po\u010d\u00edta\u010di. <\/p>\n

<\/div>\n

2. V\u00fdb\u011brem t\u0159\u00ed te\u010dek v prav\u00e9m horn\u00edm rohu okna prohl\u00ed\u017ee\u010de otev\u0159ete nab\u00eddku. 3. V rozbalovac\u00ed nab\u00eddce vyberte mo\u017enost „Dal\u0161\u00ed n\u00e1stroje“ a pot\u00e9 klikn\u011bte na polo\u017eku „Roz\u0161\u00ed\u0159en\u00ed“. Na kart\u011b Extensions (Roz\u0161\u00ed\u0159en\u00ed) vyhledejte roz\u0161\u00ed\u0159en\u00ed, jeho\u017e zdrojov\u00fd k\u00f3d chcete p\u0159e\u010d\u00edst. 6. Pod podrobnostmi o roz\u0161\u00ed\u0159en\u00ed vyhledejte za\u0161krt\u00e1vac\u00ed pol\u00ed\u010dko „Developer mode“ (V\u00fdvoj\u00e1\u0159sk\u00fd re\u017eim). Chcete-li aktivovat re\u017eim pro v\u00fdvoj\u00e1\u0159e, klikn\u011bte na n\u011bj. Po aktivaci v\u00fdvoj\u00e1\u0159sk\u00e9ho re\u017eimu se zp\u0159\u00edstupn\u00ed dal\u0161\u00ed nastaven\u00ed specifick\u00e1 pro dan\u00e9 roz\u0161\u00ed\u0159en\u00ed. 7. V z\u00e1vislosti na druhu roz\u0161\u00ed\u0159en\u00ed, kter\u00e9 chcete zobrazit, vyhledejte odkaz „Inspect views“ nebo „Background page“. 8. Otev\u0159en\u00ed n\u00e1stroj\u016f pro v\u00fdvoj\u00e1\u0159e v nov\u00e9m okn\u011b nebo kart\u011b kliknut\u00edm na odkaz „Inspect views“ nebo „Background page“. 9. V okn\u011b N\u00e1stroje pro v\u00fdvoj\u00e1\u0159e vyberte kartu „Zdroje“. <\/p>\n

<\/div>\n

10. Zde naleznete zdrojov\u00fd k\u00f3d roz\u0161\u00ed\u0159en\u00ed. Soubory lze proch\u00e1zet, k\u00f3d lze prohl\u00ed\u017eet a upravovat a lze dokonce nastavit body p\u0159eru\u0161en\u00ed pro lad\u011bn\u00ed. <\/p>\n

<\/div>\n

P\u0159esto\u017ee je mo\u017en\u00e9 \u010d\u00edst zdrojov\u00fd k\u00f3d roz\u0161\u00ed\u0159en\u00ed Chrome, je nezbytn\u00e9 respektovat pr\u00e1va tv\u016frc\u016f a nepou\u017e\u00edvat k\u00f3d neopr\u00e1vn\u011bn\u011b nebo se \u0161patn\u00fdmi \u00famysly. <\/p>\n<\/div>\n

\n
Jak zobraz\u00edm soubor HTML?<\/div>\n

Chcete-li zobrazit soubor HTML v prohl\u00ed\u017ee\u010di Chrome, postupujte podle n\u00e1sleduj\u00edc\u00edch krok\u016f: V kroku 1 otev\u0159ete v po\u010d\u00edta\u010di prohl\u00ed\u017ee\u010d Google Chrome. <\/p>\n

<\/div>\n

2. Chcete-li otev\u0159\u00edt pr\u016fzkumn\u00edka soubor\u016f, stiskn\u011bte kl\u00e1vesy „Ctrl + O“ (nebo „Command + O“ v po\u010d\u00edta\u010di Mac). 3. Vyhledejte soubor HTML, kter\u00fd chcete zobrazit, vyberte jej a klikn\u011bte na tla\u010d\u00edtko „Otev\u0159\u00edt“. <\/p>\n

<\/div>\n

4. Otev\u0159e se nov\u00e1 karta s viditeln\u00fdm obsahem souboru HTML. <\/p>\n

<\/div>\n

Chcete-li m\u00edsto toho prozkoumat obsah souboru HTML, m\u016f\u017eete jej p\u0159et\u00e1hnout p\u0159\u00edmo do aktivn\u00edho prohl\u00ed\u017ee\u010de Chrome. <\/p>\n<\/div>\n

\n
Jak zkop\u00edrovat zdrojov\u00fd k\u00f3d v prohl\u00ed\u017ee\u010di Chrome?<\/div>\n

Ke kop\u00edrov\u00e1n\u00ed zdrojov\u00e9ho k\u00f3du v prohl\u00ed\u017ee\u010di Chrome m\u016f\u017eete pou\u017e\u00edt tyto kroky: V prvn\u00edm kroku otev\u0159ete webovou str\u00e1nku, jej\u00ed\u017e zdrojov\u00fd k\u00f3d chcete zobrazit. 2. Klepn\u011bte prav\u00fdm tla\u010d\u00edtkem my\u0161i na libovoln\u00e9 voln\u00e9 m\u00edsto na str\u00e1nce. 3. Z kontextov\u00e9 nab\u00eddky, kter\u00e1 se zobraz\u00ed v kroku t\u0159i, vyberte mo\u017enost „Zobrazit zdrojov\u00fd k\u00f3d str\u00e1nky“. T\u00edm se otev\u0159e nov\u00e1 karta se zobrazen\u00fdm zdrojov\u00fdm k\u00f3dem HTML webov\u00e9 str\u00e1nky. 4. Klepn\u011bte prav\u00fdm tla\u010d\u00edtkem my\u0161i kamkoli do zdrojov\u00e9ho k\u00f3du na nov\u00e9 kart\u011b. 5. Chcete-li zkop\u00edrovat cel\u00fd zdrojov\u00fd k\u00f3d, vyberte z kontextov\u00e9 nab\u00eddky mo\u017enost „Kop\u00edrovat“ nebo stiskn\u011bte kl\u00e1vesovou zkratku (Ctrl+C na po\u010d\u00edta\u010di se syst\u00e9mem Windows nebo Command+C na po\u010d\u00edta\u010di Mac). <\/p>\n

<\/div>\n

6. Zkop\u00edrovan\u00fd zdrojov\u00fd k\u00f3d pak m\u016f\u017eete pomoc\u00ed kl\u00e1vesov\u00e9 zkratky (Ctrl+V na po\u010d\u00edta\u010di se syst\u00e9mem Windows nebo Command+V na po\u010d\u00edta\u010di Mac) nebo kliknut\u00edm prav\u00fdm tla\u010d\u00edtkem my\u0161i a v\u00fdb\u011brem mo\u017enosti „Vlo\u017eit“ vlo\u017eit do libovoln\u00e9ho textov\u00e9ho editoru, dokumentu nebo editoru k\u00f3du. Pomoc\u00ed prohl\u00ed\u017ee\u010de Chrome m\u016f\u017eete zkop\u00edrovat zdrojov\u00fd k\u00f3d webov\u00e9 str\u00e1nky pro studijn\u00ed nebo jin\u00e9 \u00fa\u010dely podle t\u011bchto pokyn\u016f.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

P\u0159\u00e1li jste si n\u011bkdy nahl\u00e9dnout do k\u00f3du webov\u00e9 str\u00e1nky a dozv\u011bd\u011bt se v\u00edce o jej\u00ed konstrukci? Pokud jako prohl\u00ed\u017ee\u010d pou\u017e\u00edv\u00e1te Google Chrome, m\u00e1te \u0161t\u011bst\u00ed! Chrome nab\u00edz\u00ed jednoduchou metodu pro prohl\u00ed\u017een\u00ed zdrojov\u00e9ho k\u00f3du jak\u00e9koli webov\u00e9 str\u00e1nky. Tento p\u0159\u00edsp\u011bvek vysv\u011btl\u00ed, jak prozkoumat zdrojov\u00fd k\u00f3d v prohl\u00ed\u017ee\u010di Chrome, a poskytne odpov\u011bdi na n\u011bkter\u00e9 souvisej\u00edc\u00ed ot\u00e1zky. Jak si v … \u010c\u00edst d\u00e1l<\/a><\/p>\n","protected":false},"author":936,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[398],"tags":[],"class_list":["post-1088","post","type-post","status-publish","format-standard","hentry","category-vyvoj-webu"],"_links":{"self":[{"href":"https:\/\/tech-lib.eu\/tech\/wp-json\/wp\/v2\/posts\/1088","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tech-lib.eu\/tech\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tech-lib.eu\/tech\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tech-lib.eu\/tech\/wp-json\/wp\/v2\/users\/936"}],"replies":[{"embeddable":true,"href":"https:\/\/tech-lib.eu\/tech\/wp-json\/wp\/v2\/comments?post=1088"}],"version-history":[{"count":0,"href":"https:\/\/tech-lib.eu\/tech\/wp-json\/wp\/v2\/posts\/1088\/revisions"}],"wp:attachment":[{"href":"https:\/\/tech-lib.eu\/tech\/wp-json\/wp\/v2\/media?parent=1088"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tech-lib.eu\/tech\/wp-json\/wp\/v2\/categories?post=1088"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tech-lib.eu\/tech\/wp-json\/wp\/v2\/tags?post=1088"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}