ฉันจะค้นหารูปภาพที่ไม่ได้ใช้และสไตล์ CSS ในเว็บไซต์ได้อย่างไร [ปิด]

มีวิธีใด (นอกเหนือจากการลองผิดลองถูก) ที่ฉันสามารถใช้เพื่อค้นหาไฟล์ภาพที่ไม่ได้ใช้งาน แล้วการประกาศ CSS สำหรับ ID และ Classes ที่ไม่มีอยู่ในไซต์ล่ะ

ดูเหมือนว่าอาจมีวิธีการเขียนสคริปต์ที่สแกนไซต์สร้างโปรไฟล์และดูว่ารูปภาพและสไตล์ใดบ้างที่ไม่เคยโหลด

มีมีส่วนขยาย Firefox ที่ พบพบตัวเลือก CSS ที่ไม่ได้ใช้ในหน้า มันมีมีตัวเลือกในการสไปเดอร์ทั้งไซต์ เวอร์ชัน 3.01.2ควร สามารถทำงานกับ Firefox เวอร์ชันใหม่กว่า

http://www.brothercake.com/dustmeselectors/

และนี่คือตัวเลือกอื่น:

https://addons.mozilla.org/en-US/firefox/addon/css-usage/

คุณไม่ต้องจ่ายค่าบริการเว็บใด ๆ หรือค้นหาส่วนเสริมคุณมีอยู่แล้วใน Google Chrome ภายใต้ F12 (Inspector)->Audits->Remove unused CSS rules

ภาพหน้าจอ:

อัปเดต: 30 มิ.ย. 2560

ตอนนี้ Chrome 59 ให้CSS และรหัส JS คุ้มครอง ดูhttps://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage

ในระดับไฟล์:

ใช้ wget เพื่อสไปเดอร์ไซต์อย่างจริงจังจากนั้นประมวลผลบันทึกเซิร์ฟเวอร์ http เพื่อรับรายชื่อไฟล์ที่เข้าถึงแตกต่างกับไฟล์ในไซต์

diff \
 <(sed some_rules httpd_log | sort -u) \
 <(ls /var/www/whatever | sort -u) \
 | grep something

CSS Redundancy Checkerเป็นเครื่องมือที่คุณเรียกใช้ในเครื่องซึ่งคุณส่งผ่านสไตล์ชีตและรายการ URL หรือไดเรกทอรีของไฟล์ HTML นี่คือคำอธิบายที่ระบุไว้ในไซต์ของเครื่องมือ:

สคริปต์ง่ายๆที่กำหนดสไตล์ชีต CSS และไฟล์. txt ที่แสดงรายการ URL ของไฟล์ HTML หรือไดเรกทอรีของไฟล์ HTML จะวนซ้ำอยู่เหนือสิ่งเหล่านี้ทั้งหมดและแสดงรายการคำสั่ง CSS ในสไตล์ชีตซึ่งไม่เคยเรียกใน HTML

โดยทั่วไปจะช่วยให้ไฟล์ CSS ของคุณมีความเกี่ยวข้องและกะทัดรัด และแม่นยำพอสมควร

ตามที่ Tim Murtaugh กล่าวไว้ในบล็อกโพสต์ A List Apart " 2 เครื่องมือในการทำให้ CSS ของคุณสะอาด ":

csscss

csscss จะแยกวิเคราะห์ไฟล์ CSS ที่คุณให้ไว้และแจ้งให้คุณทราบว่าชุดกฎใดมีการประกาศซ้ำกัน

และเกี่ยวข้องกับคำถามมากที่สุด:
helium-css

ฮีเลียมเป็นเครื่องมือในการค้นหา CSS ที่ไม่ได้ใช้ในหลาย ๆ หน้าบนเว็บไซต์

เครื่องมือนี้ใช้จาวาสคริปต์และเรียกใช้จากเบราว์เซอร์

Helium ยอมรับรายการ URL สำหรับส่วนต่างๆของไซต์จากนั้นโหลดและแยกวิเคราะห์แต่ละหน้าเพื่อสร้างรายการสไตล์ชีททั้งหมด จากนั้นไปที่แต่ละหน้าในรายการ URL และตรวจสอบว่ามีการใช้ตัวเลือกที่พบในสไตล์ชีตบนหน้าหรือไม่ สุดท้ายจะสร้างรายงานที่มีรายละเอียดแต่ละสไตล์ชีทและตัวเลือกที่ไม่พบว่าใช้ในหน้าใดก็ได้

ดูเหมือนว่าฉันจะจำ Adobe Dreamweaver หรือ Adobe Golive ที่มีคุณสมบัติในการค้นหาทั้งสไตล์และรูปภาพที่ไม่มีเจ้าของ จำไม่ได้แล้วว่าตอนนี้ อาจเป็นไปได้ทั้งสองอย่าง แต่คุณสมบัตินั้นซ่อนอยู่อย่างดี

TopStyleมีชุดเครื่องมือสำหรับค้นหาและจัดการกับคลาสเด็กกำพร้า นอกจากนี้ยังให้รายงานเกี่ยวกับตำแหน่งที่ใช้ ID และคลาสใน HTML ช่วยให้คุณเปิดและข้ามไปยังมาร์กอัปที่เกี่ยวข้องได้อย่างรวดเร็ว นี่คือคำประกาศจากเว็บไซต์เกี่ยวกับคุณสมบัตินี้:

รายงานไซต์: ดูภาพรวมที่ใช้สไตล์ในไซต์ของคุณ ค้นหาว่าคุณใช้คลาสสไตล์ที่ไม่ได้กำหนดไว้ในสไตล์ชีตที่ใดหรือดูว่าคลาสสไตล์ใดที่คุณได้กำหนดไว้ซึ่งไม่ได้ใช้

มีประโยชน์มากสำหรับการผ่าเว็บไซต์ที่ไม่คุ้นเคย

แต่ไม่พบภาพที่ไม่ได้ใช้งาน

Chrome Canary build มีตัวเลือกในแถบเครื่องมือสำหรับนักพัฒนาสำหรับ " CSS Coverage"เป็นหนึ่งในฟีเจอร์ทดลองสำหรับนักพัฒนาซอฟต์แวร์ ตัวเลือกนี้จะปรากฏขึ้นในแท็บไทม์ไลน์และสามารถใช้เพื่อรับรายการ CSS ที่ไม่ได้ใช้งาน

โปรดทราบว่าคุณจะต้องเปิดใช้งานคุณสมบัตินี้ในการตั้งค่าในแถบเครื่องมือสำหรับนักพัฒนาด้วย ฟีเจอร์นี้น่าจะนำมาใช้ในการเปิดตัว Chrome อย่างเป็นทางการ

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

การใช้ CSS - Firefox Addon

เครื่องมือเล็ก ๆ นี้ให้รายการกฎ css ที่ html บางตัวใช้อยู่

นี่คือเปิด Code Pen

คลิกRun code snippetจากนั้นคลิกที่Full pageเพื่อเข้าสู่ จากนั้นทำตามคำแนะนำในตัวอย่างข้อมูล คุณสามารถเรียกใช้แบบเต็มหน้าเพื่อดูว่าใช้งานได้กับ html / css ของคุณ

แต่มันง่ายกว่าแค่คั่นปากกาโค้ดของฉันไว้เป็นเครื่องมือ

/* CSS CLEANER INSTRUCTIONS
   1. Paste your HTML into the HTML window
   2. Paste your CSS into the CSS window
   5. The web page result now ends with a list of just the CSS used by your HTML!
*/

function cssRecursive(e) {
  var cssList = css(e);
  for (var i = 0; i < e.children.length; ++i) {
    var childElement = e.children[i];
    cssList = union(cssList, cssRecursive(childElement));
  }
  return cssList;
}

function css(a) {
  var sheets = document.styleSheets,
    o = [];
  a.matches = a.matches || a.webkitMatchesSelector || a.mozMatchesSelector || a.msMatchesSelector || a.oMatchesSelector;
  for (var i in sheets) {
    var rules = sheets[i].rules || sheets[i].cssRules;
    for (var r in rules) {
      if (a.matches(rules[r].selectorText)) {
        o.push(rules[r].cssText);
      }
    }
  }
  return o;
}

function union(x, y) {
  return unique(x.concat(y));
};

function unique(x) {
  return x.filter(function(elem, index) {
    return x.indexOf(elem) == index;
  });
};

document.write("<br/><hr/><code style='background-color:white; color:black;'>");
var allCss = cssRecursive(document.body);
for (var i = 0; i < allCss.length; ++i) {
  var cssRule = allCss[i];
  document.write(cssRule + "<br/>");
}
document.write("</code>");

เครื่องมือทั้งหมดที่แสดงที่นี่เหมาะสำหรับ CSS ฉันไม่รู้เกี่ยวกับ Dreamweaver & Co. แต่ฉันทำโปรแกรมเล็ก ๆ อยู่พักหนึ่งเพื่อช่วยฉันทำความสะอาดโครงการเว็บไซต์ของฉัน

ค้นหา-ที่ไม่ได้ใช้ไฟล์

มันไม่ได้ช่วยเกี่ยวกับ CSS & สิ่งของ แต่จะใช้รูปภาพที่ไม่มีเจ้าของและไฟล์ประเภทอื่น ๆ แทน

หวังว่าจะช่วยได้!

Helium CSS เป็นเครื่องมือที่ยอดเยี่ยมสำหรับสิ่งนี้ ควรสังเกตว่าคุณควรเรียกใช้เครื่องมือนี้ในเว็บไซต์เวอร์ชันพัฒนาหรือเวอร์ชันท้องถิ่นของคุณ หากคุณเรียกใช้สิ่งนี้ในเวอร์ชันที่ใช้งานจริงผู้เยี่ยมชมของคุณจะสามารถเห็นสภาพแวดล้อมการทดสอบฮีเลียม

https://github.com/geuis/helium-css

http://www.unknownerror.org/opensource/geuis/helium-css

หากต้องการตอบคำถามของคุณเกี่ยวกับเครื่องมือในการค้นหาไฟล์ภาพที่ไม่ได้ใช้คุณสามารถใช้ Xenu Link Sleuthเพื่อสไปเดอร์ไซต์ของคุณเพื่อค้นหารูปภาพทั้งหมดที่ไซต์ของคุณใช้ จากนั้น Xenu จะแจ้งให้คุณเข้าถึง ftp เพื่อให้สามารถรวบรวมข้อมูลไดเร็กทอรีของคุณเพื่อค้นหาไฟล์ที่ไม่มีเจ้าของ ฉันยังไม่ได้ใช้มันบนเซิร์ฟเวอร์ที่ใช้งานจริง แต่มันก็คุ้มค่าที่จะพิจารณา

แก้ไข: คุณต้องระวังอย่าลบภาพที่จาวาสคริปต์ใช้