Cara Ndeleng Kode Sumber Halaman Web di Setiap Browser

Kaca web sing diwaca iki kalebu, ing antarane liyane, kode sumber. Mangkono informasi sing diundhuh browser web lan diterjemahke menyang apa sing saiki diwaca.

Paling browser web nyedhiyakake kemampuan kanggo ndeleng kode sumber saka kaca web tanpa piranti lunak tambahan sing dibutuhake, ora peduli apa jinis piranti sampeyan lagi ing.

Sawetara uga nawakake fungsi lan struktur sing canggih, saéngga luwih gampang kanggo maca HTML lan kode program liyane ing kaca.

Kenapa Sampeyan Ingin Nggolek Kode Sumber?

Ana sawetara alesan ngapa sampeyan pengin ndeleng kode sumber kaca. Yen sampeyan pangembang web, mbok menawa sampeyan kepengin nggoleki ing cover ing gaya tartamtu utawa implementasine tartamtu. Mungkin sampeyan kepuasan kualitas lan nyoba kanggo ngerteni apa bagean tartamtu saka kaca web wis rendering utawa nindakake cara iku.

Sampeyan uga bisa dadi pemula nyoba sinau carane ngode halaman dhewe lan nggoleki sawetara conto nyata. Mesthine, sampeyan bisa uga ora bakal nemtokake kategori kasebut lan mung pengin ndeleng sumber saka rasa penasaran.

Katrangan ing ngisor iki minangka pandhuan carane ndeleng kode sumber ing browser sing dipilih.

Google Chrome

Ngaktifake: Chrome OS, Linux, macOS, Windows

Versi desktop Chrome nawakake telung cara sing beda kanggo ndeleng kode sumber kaca, sing paling pisanan lan paling gampang nggunakake shortcut keyboard ing ngisor iki: CTRL + U ( COMMAND + OPTION + U on macOS).

Nalika ditekan, trabasan iki mbukak tab browser anyar sing nampilake HTML lan kode liyane kanggo kaca aktif. Sumber iki werna-coded lan disusun kanthi cara sing luwih gampang kanggo ngemot lan nggoleki apa sing dikarepake. Sampeyan uga bisa teka ing kono kanthi ngetik teks ing ngisor iki ing baris alamat Chrome, ditambahake ing sisih kiwa URL situs web , lan ngetokake tombol Enter : view-source: (ie, view-source: https: // www .).

Cara katelu yaiku liwat piranti pangembang Chrome, sing ngidini sampeyan njupuk nyilem sing luwih jero menyang kode halaman uga ngapiki kanthi cepet kanggo tujuan pangujian lan pangembangan. Antarmuka pribadi pangembang bisa dibukak lan ditutup kanthi nggunakake trabasan tombol iki: CTRL + SHIFT + I ( COMMAND + OPTION + I on macOS). Sampeyan uga bisa miwiti kanthi njupuk path ing ngisor iki.

  1. Klik tombol menu utama Chrome, dumunung ing sudhut tengen ndhuwur lan diwakili dening telung vertikal-aligned titik.
  2. Nalika menu gulung mudhun katon, tarik kursor mouse liwat pilihan Piranti liyane .
  3. Nalika sub-menu katon, klik ing Piranti pangembang .

Android
Ndeleng sumber halaman web ing Chrome kanggo Android kaya gampang minangka nambah teks kasebut ing ngarep alamat (utawa URL) lan ngajokake: view-source:. Conto iki bakal dadi sumber tampilan: https: // www. . HTML lan kode liyane saka kaca kasebut bakal cepet ditampilake ing jendela aktif.

iOS
Nalika ora ana cara native kanggo ndeleng kode sumber kanthi nggunakake Chrome ing iPad, iPhone utawa iPod touch, sing paling gampang lan paling efektif yaiku nggunakke solusi pihak katelu kayata aplikasi View Source.

Kasedhiya kanggo $ 0,99 ing App Store, Ndeleng Sumber prompts sampeyan kanggo ngetik URL kaca (utawa nyalin / nempel saka garis alamat Chrome, sing kadhangkala path paling gampang kanggo njupuk) lan sing. Saliyane nuduhake HTML lan kode sumber liyane, app uga nduweni tab sing nampilake aset kaca individu, Document Object Model (DOM), uga ukuran kaca, cookie lan rincian menarik liyane.

Microsoft Edge

Running on: Windows

Browser Edge ngidini sampeyan ndeleng, nganalisa lan malah ngolah kode sumber kaca saiki liwat antarmuka Piranti Pangembang . Kanggo ngakses toolset praktis iki sampeyan bisa nggunakake salah sawijining trabasan tombol: F12 utawa CTRL + U. Yen sampeyan luwih milih mouse, klik tombol menu Edge (telung titik sing ana ing pojok kiwa ndhuwur) lan pilih opsi Tools Developer F12 saka dhaftar.

Sawise piranti dev ditampilake kaping pisanan, Edge nambahake rong pilihan tambahan menyang menu konteks browser (bisa diakses kanthi ngeklik tengen ing ngendi wae ing kaca web): Mriksa unsur lan Sumber tampilan, sing bakal mbukak bagean Debugger dev antarmuka pribadi digandhengake karo kode sumber.

Mozilla Firefox

Ngaktifake: Linux, MacOS, Windows

Kanggo ndeleng kode sumber kaca ing versi desktop Firefox sampeyan bisa ngetik tombol CTRL + U ( COMMAND + U on macOS) ing keyboard sampeyan, sing bakal mbukak tab anyar sing ngemot HTML lan kode liyane kanggo kaca web aktif.

Ngetik teks ing ngisor iki menyang alamat alamat Firefox, langsung menyang sisih kiwa URL kaca, bakal nyebabake sumber sing padha muncul ing tab saiki yaiku: view-source: (ie, view-source: https: // www.) .

Cara liya kanggo ngakses kode sumber kaca yaiku liwat piranti pangembang Firefox, diakses kanthi njupuk langkah ing ngisor iki.

  1. Klik tombol menu utama, sing ana ing pojok kanan ndhuwur jendhela browser lan diwakili dening telung baris horisontal.
  2. Nalika menu pop-up metu, klik ing Developer "lambang" lambang.
  3. Menu konteks Pengembang Web saiki kudu katon. Pilih pilihan Page Source .

Firefox uga ngidini sampeyan ndeleng kode sumber kanggo bagean tartamtu saka kaca, supaya gampang ngisolasi masalah. Kanggo nindakake, pisanan nyorot area sing sampeyan seneng karo mouse sampeyan. Sabanjure, klik-tengen banjur pilih Ndeleng Sumber Pilihan saka menu konteks browser.

Android
Ndeleng kode sumber ing versi Android Firefox bisa ditampa kanthi ngebek-e mbethah URL halaman web nganggo teks ing ngisor iki: view-source:. Contone, kanggo ndeleng sumber HTML sing ngirimake teks kasebut ing baris alamat browser: view-source: https: // www. .

iOS
Cara sing disaranake kanggo ndeleng kode sumber halaman web ing iPad, iPhone utawa iPod touch liwat app View Source, kasedhiya ing App Store kanggo $ 0.99. Nalika ora digabung langsung karo Firefox, sampeyan bisa nyalin lan nempelake URL saka browser menyang aplikasi supaya bisa ngandhani kode HTML lan kode liyane sing ana hubungane karo kaca kasebut.

Apple Safari

Ngaktifake iOS lan macOS

iOS
Senajan Safari kanggo iOS ora kalebu kemampuan kanggo ndeleng sumber halaman kanthi gawan, browser ora nggabungake kanthi mulus karo aplikasi Tampilan Sumber - kasedhiya ing App Store kanggo $ 0.99.

Sawise nginstal app pihak katelu iki bali menyang browser Safari banjur tunyuk tombol Share, sing ana ing ngisor layar lan diwakili dening kothak lan panah munggah. Lembar Simpen iOS saiki kudu katon, overlaying ing sisih ngisor jendhela Safari. Gulung menyang sisih tengen lan pilih tombol View Source .

Perwakilan kabentuk kode sumber kaca aktif saiki kudu ditampilake, bebarengan karo tab liyane sing ngidini sampeyan ndeleng aset, skrip, lan liya-liyane.

macOS
Kanggo ndeleng kode sumber kaca ing versi desktop Safari, sampeyan kudu ngaktifake menu Develop sawijining. Langkah-langkah ing ngisor iki mbukak sampeyan kanthi ngaktifake menu sing didhelikake lan nampilake sumber HTML kaca.

  1. Klik ing Safari ing menu browser, sing ana ing sisih ndhuwur layar.
  2. Nalika menu gulung mudhun, pilih opsi Preferensi .
  3. Preferensi Safari saiki kudu katon. Klik ing lambang Advanced , dumunung ing sisih tengen tengen baris ndhuwur.
  4. Menyang dhasar saka bagean Advanced yaiku pilihan labeled Show Show in menu bar , diiringi kothak kosong. Klik ing kothak iki bebarengan kanggo nyeleh tandha mriksa ing, lan nutup jendhela Preferensi kanthi ngeklik 'x' abang sing ditemokake ing sudhut kiwa ndhuwur.
  5. Klik ing menu Develop , dumunung ing sisih ndhuwur layar.
  6. Nalika menu gulung mudhun, pilih Show Page Source . Sampeyan uga bisa nggunakake trabasan tombol ing ngisor iki tinimbang: COMMAND + OPTION + U.

Opera

Ngaktifake: Linux, MacOS, Windows

Kanggo ndeleng kode sumber saka kaca web aktif ing browser Opera, gunakake trabasan tombol ing ngisor iki: CTRL + U ( COMMAND + OPTION + U on macOS). Yen luwih seneng ngunggah sumber ing tab saiki, ketik teks ing ngisor iki ing sisih kiwa URL kaca ing bilah alamat lan pencet Ketik : sumber tampilan: (ie, view-source: https: // www. ).

Versi desktop Opera uga ngidini sampeyan ndeleng sumber HTML, CSS lan elemen liyane kanthi nggunakake piranti pangembang sing terintegrasi. Kanggo nglakokake antarmuka iki, sing bakal nampilake ing sisih tengen jendhela browser utama, pencet shortcut keyboard ing ngisor iki: CTRL + SHIFT + I ( COMMAND + OPTION + I on macOS).

Toolset pangembang Opera uga bisa diakses kanthi njupuk langkah-langkah ing ngisor iki.

  1. Klik ing logo Opera, sing ana ing pojok kiwa ndhuwur jendhela browser.
  2. Nalika menu gulung mudhun katon, tarik kursor mouse liwat pilihan Piranti liyane .
  3. Klik ing Show menu pangembang .
  4. Klik ing logo Opera maneh.
  5. Nalika menu gulung mudhun, hurung kursor sampeyan saka Developer .
  6. Nalika sub-menu katon, klik Alat Pangembang .

Vivaldi

Ana pirang-pirang cara kanggo ndeleng sumber halaman ing browser Vivaldi. Sing paling gampang liwat tombol CTRL + U keyboard, sing menehi kode saka kaca aktif ing tab anyar.

Sampeyan uga bisa nambah teks ing ngisor iki ing ngarep kaca URL, sing nuduhake kode sumber ing tab saiki: view-source:. Conto iki bakal tampilan-sumber: http: // www. .

Cara liya liwat piranti pangembang sing terintegrasi browser, bisa diakses kanthi mencet kombinasi CTRL + SHIFT + aku liwat opsi Alat Pangembang ing menu Tools browser - kanthi ngeklik logo 'V' ing sudhut kiwa ndhuwur. Nggunakake alat dev mbisakake analisis sing luwih jero babagan sumber halaman.