Seperti kebanyakan pengembang web, saya kadang-kadang suka melihat sumber situs web untuk melihat bagaimana markup mereka dibangun. Alat-alat seperti Firebug dan Alat Pengembang Chrome memudahkan untuk memeriksa kode, tetapi jika saya ingin menyalin bagian yang terisolasi dan bermain-main dengannya secara lokal, akan merepotkan untuk menyalin semua elemen individu dan css yang terkait. Dan mungkin sama banyaknya pekerjaan untuk menyelamatkan seluruh sumber dan memotong kode yang tidak terkait.

Akan lebih bagus jika saya bisa mengklik kanan sebuah simpul di Firebug dan memiliki opsi "Simpan HTML + CSS untuk simpul ini". Apakah alat semacam itu ada? Apakah mungkin untuk memperluas Alat Pengembang Firebug atau Chrome untuk menambahkan fitur ini?

SnappySnippet

Saya akhirnya menemukan waktu untuk membuat alat ini. Anda dapat menginstal SnappySnippet dari Github. Ini memungkinkan ekstraksi HTML + CSS mudah dari node DOM yang ditentukan (terakhir diperiksa). Selain itu, Anda dapat mengirim kode langsung ke CodePen atau JSFiddle. Nikmati!

Fitur lainnya

• membersihkan HTML (menghapus atribut yang tidak perlu, memperbaiki indentasi)
• mengoptimalkan CSS agar dapat dibaca
• sepenuhnya dapat dikonfigurasi (semua filter dapat dimatikan)
• bekerja dengan ::beforedan ::afterpseudo-elements
• UI yang bagus berkat proyek Bootstrap & Flat-UI

Kode

SnappySnippet adalah open source, dan Anda dapat menemukan kode di GitHub .

Penerapan

Karena saya telah belajar cukup banyak saat membuat ini, saya memutuskan untuk berbagi beberapa masalah yang saya alami dan solusi saya untuk mereka, mungkin seseorang akan menganggapnya menarik.

Upaya pertama - getMatchedCSSRules ()

Pada awalnya saya sudah mencoba mengambil aturan CSS asli (berasal dari file CSS di situs web). Cukup luar biasa, ini berkat sangat sederhana window.getMatchedCSSRules(), namun, itu tidak berhasil dengan baik. Masalahnya adalah bahwa kami hanya mengambil sebagian dari pemilih HTML dan CSS yang cocok dengan konteks keseluruhan dokumen, yang tidak cocok lagi dalam konteks cuplikan HTML. Karena memilih dan memodifikasi penyeleksi sepertinya bukan ide yang bagus, saya menyerah pada upaya ini.

Upaya kedua - getComputedStyle ()

Kemudian, saya mulai dari sesuatu yang disarankan oleh @CollectiveCognition - getComputedStyle(). Namun, saya benar-benar ingin memisahkan bentuk CSS HTML daripada mengurutkan semua gaya.

Masalah 1 - memisahkan CSS dari HTML

Solusinya di sini tidak terlalu indah tetapi cukup mudah. Saya telah menetapkan ID untuk semua node di subtree yang dipilih dan menggunakan ID itu untuk membuat aturan CSS yang tepat.

Masalah 2 - menghapus properti dengan nilai default

Menetapkan ID ke node bekerja dengan baik, namun saya menemukan bahwa setiap aturan CSS saya memiliki ~ 300 properti yang membuat keseluruhan CSS tidak dapat dibaca.
Ternyata yang getComputedStyle()mengembalikan semua kemungkinan properti CSS dan nilai yang dihitung untuk elemen yang diberikan. Beberapa di antaranya kosong, beberapa memiliki nilai default browser. Untuk menghapus nilai default, saya harus mendapatkannya dari browser terlebih dahulu (dan setiap tag memiliki nilai default yang berbeda). Solusinya adalah membandingkan gaya elemen yang berasal dari situs web dengan elemen yang sama dimasukkan ke dalam kosong <iframe>. Logikanya di sini adalah bahwa tidak ada style sheet di tempat yang kosong <iframe>, jadi setiap elemen yang saya tambahkan di sana hanya memiliki style browser default. Dengan cara ini saya bisa menyingkirkan sebagian besar properti yang tidak signifikan.

Masalah 3 - hanya menyimpan properti steno

Hal berikutnya yang saya lihat adalah bahwa properti yang memiliki padanan steno setara tidak perlu dicetak (misalnya ada border: solid black 1pxdan kemudian border-color: black;, border-width: 1pxitd.).
Untuk mengatasi ini, saya cukup membuat daftar properti yang memiliki padanan yang singkat dan menyaringnya dari hasilnya.

Masalah 4 - menghapus properti awalan

Jumlah properti di setiap aturan secara signifikan menurunkan setelah operasi sebelumnya, tapi aku telah menemukan bahwa saya Sill memiliki banyak -webkit-sifat diawali bahwa saya belum pernah mendengar dari ( -webkit-app-region? -webkit-text-emphasis-position?).
Saya bertanya-tanya apakah saya harus menyimpan salah satu dari properti ini karena beberapa di antaranya tampak berguna ( -webkit-transform-origin, -webkit-perspective-origindll.). Saya belum menemukan cara memverifikasi ini, dan karena saya tahu bahwa sebagian besar waktu properti ini hanya sampah, saya memutuskan untuk menghapus semuanya.

Masalah 5 - menggabungkan aturan CSS yang sama

Masalah berikutnya yang saya temukan adalah bahwa aturan CSS yang sama diulang berulang kali (misalnya untuk masing-masing <li>dengan gaya yang sama persis ada aturan yang sama dalam output CSS dibuat).
Ini hanya masalah membandingkan aturan satu sama lain dan menggabungkan ini yang memiliki set properti dan nilai yang persis sama. Alhasil, bukannya #LI_1{...}, #LI_2{...}saya dapatkan #LI_1, #LI_2 {...}.

Masalah 6 - membersihkan dan memperbaiki lekukan HTML

Karena saya senang dengan hasilnya, saya pindah ke HTML. Itu tampak berantakan, sebagian besar karena outerHTMLproperti menjaganya tetap diformat persis seperti yang dikembalikan dari server.
Satu-satunya hal yang diambil dari kode HTML outerHTMLadalah pemformatan ulang kode sederhana. Karena ini adalah sesuatu yang tersedia di setiap IDE, saya yakin ada perpustakaan JavaScript yang melakukan hal itu. Dan ternyata saya benar (jquery-clean) . Terlebih lagi, saya mendapatkan ekstra penghapusan atribut yang tidak perlu ( style, data-ng-repeatdll.).

Soal 7 - filter melanggar CSS

Karena ada kemungkinan bahwa dalam beberapa keadaan filter yang disebutkan di atas dapat merusak CSS di snippet, saya telah membuat semuanya opsional. Anda dapat menonaktifkannya dari menu Pengaturan .

Saya awalnya mengajukan pertanyaan ini saya sedang mencari solusi Chrome (atau FireFox), tapi saya menemukan fitur ini di alat pengembang Internet Explorer. Cukup banyak yang saya cari (kecuali untuk javascript)

Hasil:

Browser Webkit (tidak yakin tentang FireBug) memungkinkan Anda untuk menyalin HTML suatu elemen dengan mudah, jadi itu adalah salah satu bagian dari proses keluar dari jalan.

Menjalankan ini (di konsol javascript) sebelum menyalin HTML untuk suatu elemen akan memindahkan semua gaya yang dihitung untuk elemen induk yang diberikan, serta semua elemen anak, ke atribut style inline yang kemudian akan tersedia sebagai bagian dari HTML .

var el = document.querySelector("#someid");
var els = el.getElementsByTagName("*");

for(var i = -1, l = els.length; ++i < l;){

    els[i].setAttribute("style", window.getComputedStyle(els[i]).cssText);

}

Ini adalah peretasan total dan Anda akan memiliki banyak atribut "sampah" css untuk mengarungi, tetapi setidaknya harus memulai.

Saya telah membuat alat ini bertahun-tahun yang lalu untuk tujuan yang sama:
http://www.betterprogramming.com/htmlclipper.html

Anda dapat menggunakan dan memperbaikinya.

Ini dapat dilakukan oleh Plugin Firebug yang disebut scrapbook

Anda dapat memeriksa opsi Javascript dalam pengaturan

Edit:

Ini juga bisa membantu

Firequark adalah ekstensi untuk Firebug untuk membantu proses Pengikisan Layar HTML. Firequark secara otomatis mengekstrak pemilih css untuk satu atau beberapa node html dari halaman web menggunakan Firebug (plugin pengembangan web untuk Firefox). Selektor css yang dihasilkan dapat diberikan sebagai input ke pencakar layar html seperti Scrapi untuk mengekstrak informasi. Firequark dibangun untuk melepaskan kekuatan pemilih css untuk penggunaan pengikisan layar html.

divclip adalah versi terbaru dari htmlclipper Florentin Sardan

dengan perangkat tambahan modern: ES5, HTML5, CSS cakupan ...

Anda dapat mengekstrak div bergaya dengan pemrograman:

var html = require("divclip").bySel(".article-body");
console.log(html);

Nikmati.

Tidak diperlukan plugin. Hal ini dapat dilakukan dengan sangat sederhana dengan Alat Pengembang asli Internet Explorer 11 hanya dengan satu klik, sangat bersih. Tepat pada elemen dan periksa elemen itu, dan klik kanan pada beberapa blok dan pilih "Salin elemen dengan gaya". Anda bisa melihatnya di gambar di bawah ini.

Ini memberikan kode css sangat bersih, seperti

.menu { 
    margin: 0;
}
.menu li {
    list-style: none;
}

Akhir-akhir ini saya membuat ekstensi chrome "eXtract Snippet" untuk menyalin elemen yang diperiksa, html dan hanya css dan kueri media yang relevan dari sebuah halaman. Perhatikan bahwa ini akan memberi Anda CSS relevan yang sebenarnya

https://chrome.google.com/webstore/detail/extract-snippet/bfcjfegkgdoomgmofhcidoiampnpbdao?hl=id

Alat dengan satu solusi untuk ini saya tidak menyadarinya, tetapi Anda dapat menggunakan ekstensi Firebug dan Pengembang Web pada saat yang sama.

Gunakan Firebug untuk menyalin bagian html yang Anda perlukan (Elemen Inspeksi) dan Pengembang Web untuk melihat css mana yang dikaitkan dengan elemen (Memanggil Pengembang Web "Lihat Informasi Gaya" - ini berfungsi seperti "Elemen Inspeksi" Firebug, tetapi alih-alih menampilkan html markup itu menunjukkan CSS terkait dengan markup itu).

Ini bukan persis apa yang Anda inginkan (satu kali klik untuk segalanya), tapi itu cukup dekat, dan setidaknya intuitif.

Saya juga membutuhkan fitur ini di Firebug! Sampai saat itu, pendekatan lain adalah dengan menggunakan layanan online ini untuk menghapus kelas dan mengkonversi css ke gaya inline.

http://clipboardjs.com melakukan ini dan cukup baik. Meskipun harapan Anda terhadap versi yang disalin sama persis dengan yang asli sehingga Anda dapat bermain dan belajar dengannya, mungkin tidak realistis.

Cukup salin bagian yang Anda inginkan dari halaman web dan rekatkan di editor wysiwyg. Periksa sumber html dengan mengklik tombol "sumber" pada bilah alat editor.

Saya telah menemukan cara termudah ini ketika saya bekerja di situs Drupal. Saya menggunakan wysiwyg CKeditor.

jQuery.fn.extend({
getStyles: function() {
    var rulesUsed = [];
    var sheets = document.styleSheets;
    for (var c = 0; c < sheets.length; c++) {
        var rules = sheets[c].rules || sheets[c].cssRules;
        for (var r = 0; r < rules.length; r++) {
            var selectorText = rules[r].selectorText.toLowerCase().replace(":hover","");
            if (this.is(selectorText) || this.find(selectorText).length > 0) {
                rulesUsed.push(rules[r]);
            }
        }
    }
    var style = rulesUsed.map(function(cssRule) {
        return cssRule.selectorText.toLowerCase() + ' { ' + cssRule.style.cssText.toLowerCase() + ' }';
    }).join("\n");
    return style;
}
});

pemakaian:$("#login_wrapper").getStyles()

Saya telah mengadaptasi jawaban terpilih teratas sebagai bookmarklet dragabble.

Cukup kunjungi halaman ini dan seret tombol "Jalankan Kode JQuery" ke bilah bookmark Anda.

Ada plugin firefox yang menyimpan seluruh halaman HTML, CSS, dll. Tapi saya belum melihat satu yang melakukan sebagian menghemat.

Saya ingat IE 5.5 memiliki apa yang Anda cari;)

Saya telah memeriksa semua alat yang disebutkan sebagai jawaban di sini. Tapi mereka memberikan berulang, HTML CSS kotor dengan wajah cantik yang Anda tatap. Mereka tidak memberimu JS.

Apa yang saya lakukan:

1. Pertama saya menyaring iklan yang tidak diperlukan pada halaman
2. Kemudian, simpan halaman web lengkap bersama dengan menghubungkan sumber daya.
3. Hapus HTML, CSS, dan JS yang tidak perlu
4. menjaga tautan sumber daya satu per satu dengan hati-hati.