เช่นเดียวกับนักพัฒนาเว็บส่วนใหญ่ฉันมักจะดูแหล่งที่มาของเว็บไซต์เพื่อดูว่ามาร์กอัปของพวกเขาถูกสร้างขึ้นอย่างไร เครื่องมือต่าง ๆ เช่น Firebug และ Chrome Developer Tools ช่วยให้ตรวจสอบรหัสได้ง่าย แต่ถ้าฉันต้องการคัดลอกส่วนที่แยกต่างหากและเล่นกับมันในพื้นที่มันจะเป็นความเจ็บปวดที่จะคัดลอกองค์ประกอบทั้งหมดและ css ที่เกี่ยวข้อง และอาจเป็นไปได้มากที่จะช่วยประหยัดทั้งแหล่งและตัดรหัสที่ไม่เกี่ยวข้องออก

มันจะดีถ้าฉันสามารถคลิกขวาที่โหนดใน Firebug และมีตัวเลือก "บันทึก HTML + CSS สำหรับโหนดนี้" เครื่องมือดังกล่าวมีอยู่จริงหรือไม่? เป็นไปได้ไหมที่จะขยาย Firebug หรือ Chrome Developer Tools เพื่อเพิ่มคุณสมบัตินี้

SnappySnippet

ในที่สุดฉันก็พบว่าบางครั้งในการสร้างเครื่องมือนี้ คุณสามารถติดตั้งSnappySnippetจาก Github ช่วยให้สามารถแยก HTML + CSS ได้ง่ายจากโหนด DOM ที่ระบุ (ตรวจสอบล่าสุด) นอกจากนี้คุณสามารถส่งรหัสของคุณไปยัง CodePen หรือ JSFiddle ได้โดยตรง สนุก!

คุณสมบัติอื่น ๆ

• ล้าง HTML (ลบแอตทริบิวต์ที่ไม่จำเป็นแก้ไขการเยื้อง)
• เพิ่มประสิทธิภาพ CSS เพื่อให้สามารถอ่านได้
• กำหนดค่าได้อย่างสมบูรณ์ (ตัวกรองทั้งหมดสามารถปิดได้)
• ทำงานร่วมกับ::beforeและ::afterองค์ประกอบหลอก
• ขอบคุณดี UI เพื่อเงินทุนและจอ UIโครงการ

รหัส

SnappySnippet เปิดแหล่งที่มาและคุณสามารถหาโค้ดบน GitHub

การดำเนินงาน

เนื่องจากฉันได้เรียนรู้มากมายในขณะที่ทำสิ่งนี้ฉันตัดสินใจที่จะแบ่งปันปัญหาบางอย่างที่ฉันพบและวิธีแก้ปัญหาของพวกเขาให้กับใครบางคนอาจจะรู้สึกว่ามันน่าสนใจ

ความพยายามครั้งแรก - getMatchedCSSRules ()

ตอนแรกฉันพยายามเรียกค้นกฎ CSS ดั้งเดิม (มาจากไฟล์ CSS บนเว็บไซต์) ค่อนข้างน่าอัศจรรย์นี่เป็นเรื่องง่ายมากขอบคุณwindow.getMatchedCSSRules()อย่างไรก็ตามมันไม่ได้ผลดี ปัญหาคือเราได้รับเพียงส่วนหนึ่งของตัวเลือก HTML และ CSS ที่จับคู่ในบริบทของเอกสารทั้งหมดซึ่งไม่ได้จับคู่อีกต่อไปในบริบทของตัวอย่าง HTML เนื่องจากการแยกและแก้ไขตัวเลือกไม่ได้เป็นความคิดที่ดีฉันจึงล้มเลิกความพยายามนี้

ความพยายามครั้งที่สอง - getComputedStyle ()

จากนั้นผมได้เริ่มต้นจากสิ่งที่ @CollectiveCognition ปัญหา getComputedStyle()- อย่างไรก็ตามฉันต้องการแยก CSS ฟอร์ม HTML ออกจากกันจริงๆ

ปัญหา 1 - แยก CSS จาก HTML

การแก้ปัญหาที่นี่ไม่ได้สวยงามมาก แต่ค่อนข้างตรงไปตรงมา ฉันได้กำหนด ID ให้กับโหนดทั้งหมดในทรีย่อยที่เลือกและใช้ ID นั้นเพื่อสร้างกฎ CSS ที่เหมาะสม

ปัญหา 2 - ลบคุณสมบัติที่มีค่าเริ่มต้น

การกำหนด ID ให้กับโหนดทำงานได้เป็นอย่างดีอย่างไรก็ตามฉันพบว่ากฎ CSS ของฉันแต่ละอันมีคุณสมบัติ ~ 300 รายการทำให้ CSS ทั้งหมดไม่สามารถอ่านได้
ปรากฎว่าgetComputedStyle()ส่งคืนคุณสมบัติและค่า CSS ที่เป็นไปได้ทั้งหมดที่คำนวณสำหรับองค์ประกอบที่กำหนด บางอันว่างเปล่าบางอันมีค่าเริ่มต้นของเบราว์เซอร์ ในการลบค่าเริ่มต้นฉันต้องรับพวกเขาจากเบราว์เซอร์ก่อน (และแต่ละแท็กมีค่าเริ่มต้นแตกต่างกัน) <iframe>การแก้ปัญหาคือการเปรียบเทียบรูปแบบขององค์ประกอบที่มาจากเว็บไซต์ที่มีองค์ประกอบเดียวกันแทรกเข้าไปในที่ว่างเปล่า เหตุผลในที่นี้คือไม่มีสไตล์ชีทในเปล่า<iframe>ดังนั้นองค์ประกอบแต่ละรายการที่ฉันต่อท้ายจะมีสไตล์เบราว์เซอร์เริ่มต้นเท่านั้น วิธีนี้ฉันสามารถกำจัดคุณสมบัติส่วนใหญ่ที่ไม่สำคัญออกไปได้

ปัญหาที่ 3 - การรักษาคุณสมบัติชวเลขเท่านั้น

สิ่งต่อไปที่ผมได้เห็นก็คือว่ามีคุณสมบัติเทียบเท่าชวเลขถูกพิมพ์ออกมาโดยไม่จำเป็น (เช่นมีborder: solid black 1pxแล้วborder-color: black;, border-width: 1pxITD.)
เพื่อแก้ปัญหานี้ฉันเพิ่งสร้างรายการคุณสมบัติที่มีการจดชวเลขและเทียบเท่าและกรองออกจากผลลัพธ์

ปัญหาที่ 4 - ลบคุณสมบัตินำหน้า

จำนวนของคุณสมบัติในแต่ละกฎที่ได้รับอย่างมีนัยสำคัญลดลงหลังจากการดำเนินการก่อนหน้านี้ แต่ฉันพบว่าฉันงัวมีจำนวนมากของ-webkit-คุณสมบัติที่มีคำนำหน้าว่าฉันไม่เคยได้ยินเสียงของ ( -webkit-app-region? -webkit-text-emphasis-position?)
ผมสงสัยว่าถ้าฉันควรเก็บใด ๆ ของคุณสมบัติเหล่านี้เพราะบางส่วนของพวกเขาดูเหมือนมีประโยชน์ ( -webkit-transform-origin, -webkit-perspective-originฯลฯ ) ฉันไม่ได้คิดวิธีการตรวจสอบนี้ แต่เนื่องจากฉันรู้ว่าส่วนใหญ่คุณสมบัติเหล่านี้เป็นเพียงขยะฉันตัดสินใจที่จะลบพวกเขาทั้งหมด

ปัญหาที่ 5 - การรวมกฎ CSS เดียวกัน

ปัญหาต่อไปที่ฉันเห็นคือกฎ CSS เดียวกันซ้ำแล้วซ้ำอีก (เช่นสำหรับแต่ละ<li>ตัวที่มีสไตล์เดียวกันแน่นอนมีกฎเดียวกันในเอาต์พุต CSS ที่สร้างขึ้น)
นี่เป็นเพียงเรื่องของการเปรียบเทียบกฎกับแต่ละอื่น ๆ และรวมสิ่งเหล่านี้ที่มีคุณสมบัติและค่าเดียวกัน เป็นผลให้แทนผมได้#LI_1{...}, #LI_2{...}#LI_1, #LI_2 {...}

ปัญหาที่ 6 - การล้างและแก้ไขการเยื้องของ HTML

เนื่องจากฉันมีความสุขกับผลลัพธ์ฉันจึงย้ายไปที่ HTML ดูเหมือนเป็นระเบียบส่วนใหญ่เป็นเพราะouterHTMLคุณสมบัติทำให้มันจัดรูปแบบตรงตามที่มันถูกส่งกลับจากเซิร์ฟเวอร์
โค้ด HTML สิ่งเดียวที่นำมาจากouterHTMLความต้องการคือการฟอร์แมตโค้ดแบบง่าย เนื่องจากเป็นสิ่งที่มีอยู่ใน IDE ทุกตัวฉันจึงมั่นใจว่ามีไลบรารี JavaScript ที่ทำสิ่งนั้นได้อย่างแน่นอน และปรากฎว่าฉันถูกขวา (jQuery ทำความสะอาด) ยิ่งกว่านั้นฉันได้รับการลบคุณลักษณะที่ไม่จำเป็นออกเป็นพิเศษ ( styleและdata-ng-repeatอื่น ๆ )

ปัญหาที่ 7 - ตัวกรองการแบ่ง CSS

เนื่องจากมีโอกาสที่ในบางสถานการณ์ที่ตัวกรองที่กล่าวถึงข้างต้นอาจทำลาย CSS ในตัวอย่างข้อมูลฉันได้กำหนดให้ทั้งหมดเป็นตัวเลือก คุณสามารถปิดการใช้งานได้จากเมนูการตั้งค่า

ตอนแรกฉันถามคำถามนี้ว่าฉันกำลังมองหาโซลูชัน Chrome (หรือ FireFox) แต่ฉันพบคุณลักษณะนี้ในเครื่องมือของนักพัฒนา Internet Explorer ค่อนข้างดีสิ่งที่ฉันกำลังมองหา (ยกเว้นจาวาสคริปต์)

ผลลัพธ์:

เบราว์เซอร์ Webkit (ไม่แน่ใจเกี่ยวกับ FireBug) ช่วยให้คุณสามารถคัดลอก HTML ขององค์ประกอบได้อย่างง่ายดายดังนั้นนั่นเป็นส่วนหนึ่งของกระบวนการ

การเรียกใช้สิ่งนี้ (ในคอนโซล javascript) ก่อนที่จะคัดลอก HTML สำหรับองค์ประกอบจะย้ายสไตล์ที่คำนวณทั้งหมดสำหรับองค์ประกอบหลักที่กำหนดรวมถึงองค์ประกอบลูกทั้งหมดลงในแอตทริบิวต์สไตล์แบบอินไลน์ซึ่งจะพร้อมใช้งานเป็นส่วนหนึ่งของ 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);

}

เป็นแฮ็ครวมและคุณจะมีแอตทริบิวต์ "ขยะ" CSS จำนวนมากเพื่อลุย แต่อย่างน้อยควรเริ่มต้นของคุณ

ฉันได้สร้างเครื่องมือนี้เมื่อหลายปีก่อนเพื่อจุดประสงค์เดียวกัน:
http://www.betterprogramming.com/htmlclipper.html

คุณสามารถใช้และปรับปรุงได้

สามารถทำได้โดยปลั๊กอิน Firebug ที่เรียกว่าscrapbook

คุณสามารถตรวจสอบตัวเลือกจาวาสคริปต์ในการตั้งค่า

แก้ไข:

สิ่งนี้ยังสามารถช่วย

Firequark เป็นส่วนเสริมของ Firebug เพื่อช่วยในการประมวลผล HTML Screen Scraping Firequark แยกตัวเลือก css โดยอัตโนมัติสำหรับโหนด html เดียวหรือหลายโหนดจากหน้าเว็บโดยใช้ Firebug (ปลั๊กอินการพัฒนาเว็บสำหรับ Firefox) ตัวเลือก css ที่สร้างขึ้นสามารถให้เป็นอินพุตสำหรับเครื่องขูดหน้าจอ html เช่น Scrapi เพื่อดึงข้อมูล Firequark สร้างขึ้นเพื่อปลดปล่อยพลังของ css selector สำหรับการใช้งานการขูดหน้าจอ html

divclipเป็น htmlclipperรุ่นล่าสุดของ Florentin Sardan

พร้อมการปรับปรุงที่ทันสมัย: ES5, HTML5, CSS แบบกำหนดขอบเขต ...

คุณสามารถแยก div ที่มีสไตล์โดยทางโปรแกรมด้วย:

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

สนุก.

ไม่จำเป็นต้องมีปลั๊กอิน สามารถทำได้อย่างง่ายดายด้วย Internet Explorer 11 Native Developer Tools เพียงคลิกเดียวก็สะอาดมาก เพียงขวาที่องค์ประกอบและตรวจสอบองค์ประกอบนั้นและคลิกขวาที่บล็อกและเลือก "คัดลอกองค์ประกอบที่มีรูปแบบ" คุณสามารถดูได้ในภาพด้านล่าง

มันให้รหัส css ที่สะอาดมากเช่น

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

เมื่อเร็ว ๆ นี้ฉันได้สร้างส่วนขยาย "eXtract Snippet" สำหรับการคัดลอกองค์ประกอบที่ตรวจสอบ html และเฉพาะ css และแบบสอบถามสื่อที่เกี่ยวข้องจากหน้า โปรดทราบว่านี่จะให้ CSS ที่เกี่ยวข้องกับคุณจริงๆ

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

เครื่องมือที่มีโซลูชันเดียวสำหรับสิ่งนี้ที่ฉันไม่รู้ แต่คุณสามารถใช้ส่วนขยาย Firebug และWeb Developer ได้ในเวลาเดียวกัน

ใช้ Firebug เพื่อคัดลอกส่วน html ที่คุณต้องการ (ตรวจสอบองค์ประกอบ) และนักพัฒนาเว็บเพื่อดู css ที่เกี่ยวข้องกับองค์ประกอบ (เรียกนักพัฒนาเว็บ "ดูข้อมูลสไตล์" - มันทำงานเหมือน "องค์ประกอบตรวจสอบ" ของ Firebug แต่แทนที่จะแสดง html มาร์กอัปจะแสดง CSS ที่เกี่ยวข้องกับมาร์กอัปนั้น)

มันไม่ได้เป็นอย่างที่คุณต้องการ (เพียงคลิกเดียวสำหรับทุกสิ่ง) แต่มันค่อนข้างใกล้และอย่างน้อยก็ใช้งานง่าย

ฉันต้องการฟีเจอร์นี้ใน Firebug! อีกวิธีหนึ่งคือการใช้Online Service นี้เพื่อลบคลาสและแปลง css เป็นรูปแบบอินไลน์

http://clipboardjs.comทำสิ่งนี้และค่อนข้างดี แม้ว่าความคาดหวังของคุณเกี่ยวกับเวอร์ชันที่คัดลอกนั้นจะเหมือนกับต้นฉบับดังนั้นคุณจึงสามารถเล่นและเรียนรู้ได้ แต่อาจไม่เหมือนจริง

เพียงคัดลอกส่วนที่คุณต้องการจากหน้าเว็บและวางลงในเครื่องมือแก้ไข wysiwyg ตรวจสอบ html source โดยคลิกที่ปุ่ม "source" บนแถบเครื่องมือตัวแก้ไข

ฉันพบวิธีที่ง่ายที่สุดในการทำงานกับไซต์ Drupal ฉันใช้ CKeditor wysiwyg

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;
}
});

การใช้งาน:$("#login_wrapper").getStyles()

ฉันได้ปรับคำตอบที่ได้รับการโหวตสูงสุดเป็น bookmarklet แบบลากได้

เพียงไปที่หน้านี้และลากปุ่ม "เรียกใช้ jQuery Code" ไปที่แถบบุ๊กมาร์กของคุณ

มีปลั๊กอิน Firefoxที่บันทึกทั้ง HTML, CSS, ฯลฯ .. แต่ฉันไม่ได้เห็นที่บันทึกบางส่วน

ฉันจำ IE 5.5 ได้สิ่งที่คุณมองหา;)

ฉันผ่านเครื่องมือทั้งหมดที่กล่าวถึงเป็นคำตอบที่นี่ แต่พวกเขาก็ให้ HTML CSS สกปรกซ้ำไปซ้ำมาพร้อมกับใบหน้าที่สวยงามที่คุณจ้องมอง พวกเขาไม่ให้ JS คุณ

สิ่งที่ฉันทำ:

1. ก่อนอื่นฉันจะกรองโฆษณาที่ไม่จำเป็นต้องใช้ในหน้านั้น
2. จากนั้นบันทึกหน้าเว็บที่สมบูรณ์พร้อมกับการเชื่อมโยงทรัพยากร
3. ลบ HTML, CSS และ JS ที่ไม่จำเป็นออก
4. ให้ยกเลิกการเชื่อมโยงทรัพยากรทีละรายการอย่างระมัดระวัง