Di mana saya bisa menyalin html dari situs web?

Artikel ini akan memperkenalkan metode untuk menyalin kode HTML dari situs web menggunakan Elemen Inspeksi Google Chrome

Gunakan Opsi Edit As HTML Saat Memeriksa untuk Menyalin Kode HTML

Peramban web modern memiliki fitur inspect_ yang memungkinkan pengguna atau pengembang melihat konten dan gaya HTML yang digunakan di situs web. Kami juga dapat menyalin konten HTML atau memanipulasi konten HTML untuk melihat hasilnya di browser

Namun, dalam metode ini, kami tidak dapat langsung menyalin kode yang dapat dilihat saat memeriksa halaman web. Ada beberapa langkah untuk menyalin kode

Misalnya, klik kanan pada situs web, lalu Anda akan melihat beberapa opsi. Di akhir opsi, Anda akan melihat Inspect

Klik opsi Inspect_ atau gunakan pintasan, Ctrl+Shift+i. Kemudian, alat Inspect_ terbuka di bagian bawah atau di sisi kanan layar

Setelah memeriksa, kita dapat melihat kode HTML di sisi kiri alat pemeriksaan di tab Inspector. Kemudian klik kanan dan pilih edit as HTML

Atau, pilih elemen tingkat teratas yang ingin Anda salin. Kemudian salin HTML konten situs web yang diperlukan

Gunakan Opsi Copy Saat Memeriksa untuk Menyalin Kode HTML

Kami juga dapat menyalin konten HTML tertentu langsung dari pemeriksaan tanpa melalui opsi Edit As HTML

Setelah memeriksa situs web, kita dapat melihat konten HTML di sisi kiri pada tab Inspector. Kemudian kita dapat mengklik kanan pada elemen yang akan disalin dan memilih opsi inspect1

Ini akan menyalin seluruh kode HTML di dalam wadah atau bagian itu

Jika kami ingin menyalin seluruh kode, maka kami dapat mengklik kanan dan pergi untuk menyalin dan memilih opsi inspect1

Gunakan Opsi inspect_3 di Situs Web untuk Menyalin Kode HTML

Kita dapat melihat semua konten HTML_ yang digunakan untuk membuat situs web di dalam opsi inspect3. Jika kita mengklik kanan pada sebuah situs web, sebuah opsi akan muncul

Kita dapat melihat opsi inspect_3 di akhir opsi. Saat kami mengklik opsi tersebut, tab lain akan terbuka yang berisi semua kode HTML situs web

Jika Anda bekerja sebagai pengembang web front-end di tahun 2000-an, Anda pasti tahu betapa sulitnya menangani bug yang paling sederhana sekalipun. Anda memiliki halaman HTML yang menggunakan file CSS, dan file CSS tersebut dapat tumbuh cukup besar berdasarkan ukuran dan kompleksitas situs web. Dan begitu beberapa bug muncul, perlu waktu berhari-hari untuk menelusuri file CSS dan mengidentifikasi/menyelesaikan bug tersebut

Kemudian pada tahun 2006, lahirlah Firebug

Itu cukup banyak mengubah pengembangan front-end (dan terutama bagian debugging) dalam semalam. Faktanya, itu sangat hebat dan membantu sehingga browser pada saat itu (seperti Chrome dan Firefox) dengan cepat menggabungkannya

Saat ini, Anda mungkin mengetahui ini sebagai "Alat Inspeksi" yang tersedia di sebagian besar browser modern seperti Chrome, Firefox, Edge, dan lainnya. Dan dengan semua masalah "kecil" -nya, "Alat Inspeksi" bekerja cukup baik untuk pengembang, menghemat waktu mereka dan membuat proses debug front-end jauh lebih mudah

Namun evolusi tidak pernah berhenti, dan hari ini kami akan menunjukkan kepada Anda kemajuan logis dalam pemeriksaan front-end. Pemindaian CSS

Apa itu Pemindaian CSS?

CSS Scan adalah ekstensi browser modern yang bekerja dengan baik di Chrome, Firefox, Safari, Edge, dan mungkin semua browser berbasis Chromium

Tujuan Pemindaian CSS adalah untuk membantu Anda memeriksa, menyalin, dan mengedit CSS dengan cara tercepat, menghemat banyak waktu

Masalah utama dengan "Alat Inspeksi" adalah menyediakan terlalu banyak data, membuatnya sulit untuk dinavigasi dan hanya menyalin aturan CSS yang benar-benar diperlukan sambil menghilangkan gaya yang berlebihan

Selain itu, "Alat Inspeksi" menganggap HTML dan CSS sebagai entitas yang terpisah, sehingga menyalin bahkan tombol sederhana memerlukan beberapa langkah untuk mendapatkan struktur HTML dan gaya CSS yang membuatnya cerah dan bersinar.

Ekstensi CSS Scan memecahkan masalah ini dengan cukup baik

Tidak ada klik kanan dan tidak ada pemeriksaan

Tidak ada gaya yang membosankan untuk dilalui

Cukup klik kiri elemen yang Anda suka di situs web, dan Anda akan memiliki aturan CSS yang siap untuk membuat tombol yang tepat di situs web Anda sendiri

Dan selama Anda menginginkannya, satu klik yang sama akan menyalin pemilih CSS dan struktur HTML juga

Kedengarannya bagus?

Bagaimana cara menginstal ekstensi CSS Scan di browser Anda?

CSS Scan adalah ekstensi browser, jadi hal pertama yang harus dilakukan adalah pergi ke toko ekstensi browser Anda dan mencari CSS Scan

Jika menggunakan Chrome, Anda dapat melakukannya di sini. Dan jika Anda menggunakan Firefox, Safari, atau Edge, Anda akan menerima instruksi saat membelinya

Klik tombol biru "Tambahkan ke Chrome" dan ekstensi akan dipasang di browser Anda dalam waktu singkat

Ini adalah ekstensi premium, jadi pertama kali Anda membukanya, Anda harus menambahkan kunci lisensi (yang dapat Anda peroleh di situs web resmi CSS Scan)

Cukup masukkan kunci lisensi Anda, klik tombol hijau dan Anda akan siap untuk pemeriksaan HTML/CSS termudah

Bagaimana cara menyiapkan Pemindaian CSS?

Segera setelah Anda memvalidasi kunci lisensi Anda, ekstensi akan mulai berfungsi

Opsi "Jeda" akan menjeda ekstensi, sehingga bilah alat terlihat, Anda tidak akan lagi melihat jendela CSS mengambang setiap kali Anda mengarahkan kursor ke elemen, dan Anda dapat dengan bebas mengeklik seluruh situs web

Opsi "Pindahkan" akan memindahkan bilah alat ekstensi dari atas ke bawah, jika Anda lebih suka menyimpannya di sana atau ada beberapa elemen di belakangnya, seperti tajuk

Dan untuk dapat menggunakannya secara optimal dan sesuai dengan preferensi Anda, Anda harus mencentang item “Options” terlebih dahulu

Ada beberapa opsi dan preferensi yang harus dilalui, dan Anda dapat men-tweaknya dengan cepat, tergantung pada apa yang ingin Anda lakukan saat itu.

Antara lain, ekstensi ini menawarkan Anda kemampuan untuk menyalin hanya CSS atau keduanya CSS dan HTML, apa yang harus dilakukan dengan gaya induk dan anak, konversi unit ukuran font ke piksel, apakah akan mengabaikan ukuran kotak, dan lain-lain

Dan di akhir menu opsi, Anda memiliki daftar pintasan keyboard yang tersedia, karena banyak dev lebih memilih keyboard daripada mouse bila memungkinkan

Dan setelah Anda memilih opsi yang paling sesuai untuk Anda, saatnya untuk benar-benar mulai menyalin gaya elemen dengan cara termudah yang memungkinkan

Rasa sakit menggunakan Inspect Tool

Untuk contoh ini, saya akan menyalin beberapa gaya dan HTML dari beranda BBC

Tetapi Anda dapat menggunakan cara mudah yang sama untuk menyalin elemen dan CSS apa pun dari situs web mana pun yang tersedia untuk umum

Cara mudah akan mengikuti di bagian selanjutnya karena sebaliknya, mari kita lihat betapa sulitnya dengan Alat Inspeksi

Di beranda situs web BBC, mari kita lihat elemen berita bisnis terbaru itu

Ini memiliki header putih yang bagus dengan latar belakang merah, lalu satu set item daftar yang diberi nomor dengan gaya. Dan sebagai sentuhan terakhir, setiap item daftar langsung memiliki warna latar belakang yang berbeda

“Biasanya”, kita dapat menggunakan alat Inspeksi Chrome untuk menyalin HTML terlebih dahulu

Dan itu tidak terlihat sulit

Tetapi mendapatkan CSS untuk seluruh daftar, sambil menyingkirkan hal-hal yang berlebihan, memang sulit

As you can see, we have the “most-popular” div, then the “top-list” div, an

, and then the list that contains multiple elements.Each contains an tag, and within each tag, we have a and an , plus the ::after pseudo element. (adsbygoogle = window.adsbygoogle || []).push({}); While we don’t have to copy each repetitive element (like and ), we still need to separately copy the CSS rules of 9 distinctive elements within this list design!Dan Anda mungkin berpikir oke, kami akan menyalin 9 aturan CSS untuk setiap pemilih yang berbedaTapi apakah Anda tahu CSS mana yang harus disalin?As you can see from the above screenshot, just the CSS for is so big that it can’t fit on the screen.Dan kami memiliki 9 elemen untuk dilalui, ditambah mengesampingkan BANYAK CSS yang sebenarnya tidak diperlukan, namun Chrome menunjukkan gaya terkait di sana, terlepas dari apakah itu benar-benar digunakanDi sinilah ekstensi CSS Scan menjadi sangat bergunaCara mudah menyalin HTML dan CSS dari situs web mana pun dengan CSS Scan

Mari kembali ke daftar yang sama di beranda BBC

Dan kemudian buka opsi Pemindaian CSS dan pastikan bahwa kita menyalin CSS dan HTML elemen turunan

Selain itu, untuk menargetkan seluruh bagian dengan mudah, sambil mengarahkan kursor ke sebuah elemen, Anda dapat menekan keyboard panah (atas dan bawah) untuk menavigasi pohon DOM sehingga Anda dapat menargetkan elemen orang tua, saudara kandung, dan anak

Sekarang klik "Lanjutkan" dan ekstensi akan siap digunakan

Mengarahkan kursor ke elemen apa pun akan langsung memberi Anda kode yang diperlukan untuk membuat ulang elemen itu

Dan ini sangat membantu ketika Anda ingin membuat ulang satu atau dua elemen

Namun kami ingin membuat ulang seluruh bagian, dan kami dapat melakukannya juga dengan satu arahkan kursor dan klik

As you can see above, we have hovered the entire

element, so all child elements and associated CSS will be included.

Sekarang klik kiri saja dan semua aturan akan disalin ke clipboard Anda

Itu dia

Sekarang setelah kode disalin, Anda dapat menempelkannya langsung ke kode sumber situs web Anda, tetapi hanya untuk melihat apakah itu berhasil, buat file baru bernama "indeks. html” di desktop Anda, lalu buka editor kode pilihan Anda dan rekatkan kode dari clipboard Anda

Simpan file, lalu buka di browser Anda

Betapa mudah dan mengagumkannya itu

Anda juga dapat mengekspornya ke Codepen dan memainkannya atau menyimpannya di cloud dengan menyematkan jendela CSS terlebih dahulu (menekan bilah spasi)

Pertimbangan lebih lanjut saat menggunakan CSS Scan

Seperti yang ditunjukkan di atas, ekstensi Pemindaian CSS mungkin merupakan cara termudah untuk mengumpulkan HTML dan CSS dari situs web mana pun

Meskipun ini adalah ekstensi berbayar, ini akan menghemat banyak waktu dan terbayar dalam beberapa hari jika bukan menit

Tapi ini tidak semua

Meskipun ekstensi ini sangat mudah digunakan, ekstensi ini dikemas dengan opsi canggih yang tidak dapat dimuat dalam artikel ini

Dimulai dengan Pemindaian CSS 3. 0, Anda dapat mengekspor kode HTML/CSS langsung ke Codepen, untuk memudahkan pengujian dan berbagi dengan rekan dan rekan kerja Anda

Dan tidak seperti "Alat Inspeksi", dengan Pemindaian CSS Anda dapat secara otomatis menyalin tidak hanya pemilih standar, tetapi juga yang semu

Pemilih seperti. melayang,. sebelum dan. setelah akan dimasukkan, jadi tidak hanya tombol yang Anda salin akan terlihat bagus, tetapi juga akan seinteraktif seperti di situs web asli

Edit CSS dengan cepat dengan CSS Scan

Jika Anda menyukai kemungkinan untuk mengubah kode CSS dengan cepat di "Alat Inspeksi", Anda akan senang mengetahui bahwa ini juga dapat dilakukan di Pemindaian CSS

Yang perlu Anda lakukan hanyalah menekan bilah spasi pada keyboard sambil mengarahkan kursor ke elemen yang ingin Anda salin. Ini akan mengunci jendela gaya pada tempatnya, dan memungkinkan Anda membuat perubahan langsung

Katakanlah Anda ingin mengubah latar belakang tajuk dan warna angka dalam daftar dari atas

Arahkan kursor ke elemen judul dan tekan bilah spasi, lalu arahkan kursor ke elemen angka dan tekan bilah spasi lagi

Ini akan mengunci editor kode untuk kedua elemen di tempatnya. Sekarang cukup ubah warna dari editor

Kemudian Anda cukup menyalin kode dengan satu klik dan menempatkan elemen ke dalam proyek Anda

Seperti semua ini tidak cukup, CSS Scan tidak hanya menyalin gaya untuk desain desktop. Itu akan menyalin seluruh set aturan untuk elemen (atau elemen) itu, termasuk aturan untuk setiap browser dan resolusi yang tersedia

Secara keseluruhan, sangat menyenangkan menggunakan ekstensi CSS Scan untuk mengambil gaya dan markup dengan cepat. Sangat mudah digunakan dan dikemas dengan fitur canggih, Anda harus mencobanya untuk mempercayainya

Bagaimana cara menyalin HTML dari situs web?

Salin HTML. Tekan pintasan CTRL+C untuk menyalin, atau klik kanan teks yang Anda pilih dan klik Salin .

Bagaimana cara menyalin kode HTML di Chrome?

Lakukan hal berikut. .

Select the top most element, you want to copy. (To copy all, select ).

Klik kanan

Pilih Edit sebagai HTML

Sub-jendela baru terbuka dengan teks HTML

Ini kesempatanmu. Tekan CTRL+A/CTRL+C dan salin seluruh bidang teks ke jendela lain