কোনও ওয়েবসাইটে অব্যবহৃত চিত্র এবং সিএসএস শৈলীগুলি কীভাবে খুঁজে পাব? [বন্ধ]

Question

অব্যবহৃত ইমেজ ফাইলগুলি খুঁজতে আমি কী ব্যবহার করতে পারি (পরীক্ষা এবং ত্রুটি ব্যতীত)? আইডি এবং ক্লাসগুলির জন্য সিএসএস ঘোষণাগুলি সম্পর্কে কীভাবে এমনকি সাইটে বিদ্যমান নেই?

দেখে মনে হচ্ছে কোনও স্ক্রিপ্ট লেখার কোনও উপায় থাকতে পারে যা সাইটটি স্ক্যান করে, এটি প্রোফাইল করে এবং কোন চিত্র এবং শৈলী কখনই লোড হয় না তা দেখুন।

Comments

আরে জোন ... ঠিক এখন (প্রশ্নোত্তর পড়ার পরে) আমি দেখেছি যে আপনিই সেই প্রশ্নটি জিজ্ঞাসা করেছিলেন। 4 বছর পরে আমি এখানে ঠিক একই জিনিস খুঁজছি! স্ট্যাকওভারফ্লো সত্যিই আশ্চর্যজনক ... যাইহোক: আমি কেবলমাত্র আপনার প্রোফাইলে থাকা "আমার মেশিনে কাজ করি" ব্যাজটি পছন্দ করি ... আমি মনে করি আমি এটি ধার করব! : ডি

— লেনিয়েল ম্যাককাফেরি

স্ট্যাকওভারফ্লো

— ল্যামি

কেবলমাত্র এই প্রশ্নটি সম্পাদিত হয়েছে যাতে এটি এসও এর নিয়মের মধ্যে ফিট করে। কমপক্ষে আমিও তাই আশা করি, কারণ সত্যই আমার নিজের উত্তর দরকার!

— এসএমবিগস

চিত্রগুলির জন্য গুল্প-মোছা-অব্যবহৃত-চিত্রগুলি চেষ্টা করুন

— লুই ফিলিপ

Answer 1

সেখানেসেখানে একটি ফায়ারফক্স এক্সটেনশন ছিল খুঁজে বের করেএকটি পৃষ্ঠায় অব্যবহৃত সিএসএস নির্বাচকদের পাওয়া গেছে। এটাহয়েছেপুরো সাইটটি মাকড়সা করার একটি বিকল্প ছিল। সংস্করণ 3.01উচিত ফায়ারফক্সের নতুন সংস্করণগুলির সাথে কাজ করতে পারে।

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

এবং এখানে আরও একটি বিকল্প রয়েছে:

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

Comments

হ্যাঁ, এটি কেবল ফায়ারফক্সের পুরানো সংস্করণে কাজ করবে তবে এটি: সিএসএস ব্যবহার - ফায়ারফক্স অ্যাডন একই রকম এবং এটি নতুন সংস্করণেও কাজ করবে।

— আন্দ্রে স্যালিসেটি

2018 এও কাজ করবেন না

— লনি সেরা

Answer 2

আপনাকে কোনও ওয়েব পরিষেবা দিতে হবে না বা কোনও অ্যাডন সন্ধান করতে হবে না, গুগল ক্রোমে আপনার এফ 12 এর আওতায় ইতিমধ্যে রয়েছে (Inspector)->Audits->Remove unused CSS rules

স্ক্রীনশট:

আপডেট: 30 জুন, 2017

এখন ক্রোম 59 সিএসএস এবং জেএস কোড কভারেজ সরবরাহ করে । Https://developers.google.com/web/updates/2017/04/devtools-release-notes# কভারেজ দেখুন

Comments

এই দুর্দান্ত, টিপ জন্য ধন্যবাদ!

— ব্রায়ান

বিদ্যমান সরঞ্জামগুলি ব্যবহার করা ভাল তবে এটি কেবল লোড হওয়া পৃষ্ঠাটিকেই স্ক্যান করে, পুরো সাইটটি নয়?

— মার্ক কুপার

অান্তরিক ধন্যবাদ. প্রতিক্রিয়াশীল ওয়েবসাইট সম্পর্কে সাবধান থাকুন কারণ এই এক বা একাধিক স্টাইল ব্যবহার হচ্ছে না তা জানতে আপনাকে বিভিন্ন আকারের জন্য পুনরায় লোড করতে হবে। এটি কেবল ভিউপোর্টের শৈলীর জন্য অনুসন্ধান করে।

— micah

স্টাইল শিটের ছাঁটাই করা ফাইলটি কোনওভাবেই সরিয়ে দেওয়ার পরে ম্যানুয়ালি মুছে ফেলার প্রক্রিয়াটি করবেন?

— ড্যানিয়েল সোকলোভস্কি

এটি কোনও একক ফাইলে তাদের সমস্ত সিএসএসকে সংকুচিত করে এমন সাইটগুলির পক্ষে টেকসই বিকল্প নাও হতে পারে। আপনি যদি কোনও নির্দিষ্ট পৃষ্ঠা নিরীক্ষণ করেন তবে এটি প্রচুর অব্যবহৃত সিএসএস দেখায় তবে সেই স্টাইলগুলি অন্য পৃষ্ঠাগুলিতে ব্যবহৃত হবে। সুতরাং, একক পৃষ্ঠার নিরীক্ষণ করা আমার মতে ভাল বিকল্প নয়।

— সৌরভএম

Answer 3

ফাইল স্তরে:

আক্রমণাত্মকভাবে সাইটটি মাকড়সা করার জন্য উইজেট ব্যবহার করুন এবং তারপরে ফাইলগুলির তালিকা অ্যাক্সেস পেতে http সার্ভার লগগুলি প্রসেস করুন, সাইটের ফাইলগুলির সাথে এটির চেয়ে আলাদা করুন

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

Comments

অতিরিক্ত কমান্ড-লাইন গেকেন্সি জন্য +1!

— ngeek

মিরর উইজেট বিকল্পটি অ-রেফারেন্সযুক্ত এবং অব্যবহৃত ফাইলগুলি স্বয়ংক্রিয়ভাবে ছাঁটাই করার একটি ভাল উপায় wget -m <your site>। স্টাইল শিটগুলি প্রথমে অব্যবহৃত নির্বাচকদের থেকে ছাঁটাই করা উচিত - এটি স্বয়ংক্রিয়ভাবে সেই

— টাস্কটির

Answer 4

সিএসএস রিডানডেন্সি চেকার এমন একটি সরঞ্জাম যা আপনি স্থানীয়ভাবে চালান যা আপনি স্টাইলশিট এবং URL এর একটি তালিকা বা এইচটিএমএল ফাইলের ডিরেক্টরিকে পাস করেন। সরঞ্জামটির সাইটে দেওয়া বিবরণটি এখানে:

একটি সহজ স্ক্রিপ্ট যা কোনও সিএসএস স্টাইলশিট এবং HTML টি ফাইলের একটি .txt ফাইল তালিকা URL বা HTML ফাইলের ডিরেক্টরি দেওয়া থাকে, সেগুলি দিয়ে আবার পুনরুক্ত হবে এবং স্টাইলশিটে সিএসএস বিবৃতি তালিকাভুক্ত করবে যা এইচটিএমএলে কখনও ডাকা হয় না।

মূলত, এটি আপনাকে আপনার সিএসএস ফাইলগুলি প্রাসঙ্গিক এবং কমপ্যাক্ট রাখতে সহায়তা করে। এবং এটি যুক্তিসঙ্গতভাবে সঠিক।

Answer 5

যেমনটি টেম মুর্তফো একটি তালিকা ছাড়াও ব্লগ পোস্টে উল্লেখ করেছেন, " আপনার সিএসএস পরিষ্কার রাখার জন্য দুটি সরঞ্জাম ":

csscss

সিএসএসএসএস আপনার দেওয়া যে কোনও সিএসএস ফাইলকে বিশ্লেষণ করবে এবং আপনাকে জানাবে যে কোন রোলসেটের নকল ঘোষণা রয়েছে have

এবং প্রশ্নের সর্বাধিক প্রাসঙ্গিক:
হিলিয়াম-সিএসএস

হিলিয়াম হ'ল একটি ওয়েব সাইটে বহু পৃষ্ঠায় অব্যবহৃত সিএসএস আবিষ্কার করার জন্য একটি সরঞ্জাম।

সরঞ্জামটি জাভাস্ক্রিপ্ট-ভিত্তিক এবং ব্রাউজার থেকে চলে।

হিলিয়াম কোনও সাইটের বিভিন্ন বিভাগের জন্য ইউআরএলগুলির একটি তালিকা গ্রহণ করে তারপরে সমস্ত স্টাইলশিটের একটি তালিকা তৈরি করতে প্রতিটি পৃষ্ঠা লোড করে এবং পার্স করে। এরপরে এটি ইউআরএল তালিকার প্রতিটি পৃষ্ঠাতে পরিদর্শন করে এবং স্টাইলশিটে পাওয়া নির্বাচকদের পৃষ্ঠাগুলিতে ব্যবহার করা হয়েছে কিনা তা পরীক্ষা করে। অবশেষে, এটি প্রতিবেদন তৈরি করে যা প্রতিটি স্টাইলশিট এবং নির্বাচকদের বিশদ দেয় যা প্রদত্ত পৃষ্ঠাগুলির কোনওটিতে ব্যবহৃত হয় নি।

Answer 6

আমি মনে করি অ্যাডোব ড্রিমউইভার বা অ্যাডোব গোলিভ উভয়ের মধ্যেই এতিম শৈলী এবং চিত্র উভয়ই খুঁজে পাওয়ার বৈশিষ্ট্য রয়েছে; এখন যা মনে করতে পারছি না সম্ভবত উভয়ই, তবে বৈশিষ্ট্যগুলি ভালভাবে লুকানো ছিল।

Comments

হ্যাঁ আপনি ড্রিমউইভার এতিম ফাইলগুলি পেতে পারেন। এটি সাইটে> লিঙ্কগুলি পরীক্ষা করে তারপরে ড্রপ-ডাউনটি এতিম ফাইলগুলিতে পরিবর্তন করুন। তবে তুলনামূলক বনাম পরম লিঙ্কগুলি সম্পর্কে সতর্ক থাকুন। এটি আমাকে কেবল বলেছিল যে আমার সমস্ত চিত্রগুলি এতিম ফাইল ছিল কারণ প্রকৃত লিঙ্কগুলি ওয়েবে থাকা চিত্রগুলির লাইভ কপিগুলিকে চিত্রগুলির স্থানীয় অনুলিপিগুলিতে নির্দেশ করে।

— স্টুয়ার্ট ইয়ং

Answer 7

টপ স্টাইলের কাছে অনাথ শ্রেণির অবস্থান নির্ধারণ এবং ডিল করার জন্য সরঞ্জামগুলির একটি স্যুট রয়েছে। এটি আপনাকে এইচটিএমএলতে আইডি এবং ক্লাসগুলি কোথায় ব্যবহার করা হয় তা সম্পর্কিত প্রতিবেদন দেবে, আপনাকে দ্রুত খোলার এবং প্রাসঙ্গিক মার্কআপে এড়িয়ে যাওয়ার অনুমতি দেয়। এই বৈশিষ্ট্যটি সম্পর্কে ওয়েবসাইট থেকে ব্লার্ব এখানে দেওয়া হয়েছে:

সাইটের প্রতিবেদনগুলি: এক নজরে দেখুন যেখানে আপনার সাইটে শৈলী ব্যবহৃত হয়। আপনি কোথায় স্টাইলের ক্লাস প্রয়োগ করেছেন সেগুলি কোনও স্টাইল শীটে সংজ্ঞায়িত নয়, বা কোন স্টাইলের ক্লাসগুলি সংজ্ঞায়িত করা হয়েছে তা ব্যবহার করা হয়নি তা দেখুন।

অপরিচিত ওয়েবসাইটগুলি ছড়িয়ে দেওয়ার জন্য খুব দরকারী।

যদিও এটি অব্যবহৃত চিত্রগুলি খুঁজে পায় না।

Comments

কেন এই উত্তরটি ভোট দেওয়া হচ্ছে?

— চার্লস রোপার

Answer 8

পরীক্ষামূলক বিকাশকারী বৈশিষ্ট্যগুলির মধ্যে একটি হিসাবে " সিএসএস কভারেজ" এর জন্য বিকাশকারী সরঞ্জামদণ্ডে ক্রোম ক্যানারি বিল্ডের বিকল্প রয়েছে। এই বিকল্পগুলি টাইমলাইন ট্যাবে আসে এবং অব্যবহৃত CSS এর তালিকা পাওয়ার জন্য ব্যবহার করা যেতে পারে।

দয়া করে নোট করুন যে আপনাকে বিকাশকারী সরঞ্জামদণ্ডের সেটিংসেও এই বৈশিষ্ট্যটি সক্ষম করতে হবে। এই বৈশিষ্ট্যটি সম্ভবত এটি অফিসিয়াল ক্রোম রিলিজ করতে হবে।

Answer 9

আমি এই সরঞ্জামটি পেয়েছি যা ফায়ারফক্সের সমস্ত সংস্করণে কাজ করে! এটি কীভাবে কাজ করে তা শিখতে একটু সময় লাগে তবে একবার শুরু হয়ে গেলে এটি বেশ ভাল বলে মনে হয়। এটি সিএসএসের সিলেক্টরদের চিহ্নিত করে সিএসএসের একটি নতুন সংস্করণ সংরক্ষণ করবে যাতে আপনার প্রয়োজন হলে দ্রুত ফিরে যেতে পারেন।

সিএসএস ব্যবহার - ফায়ারফক্স অ্যাডন

Answer 10

এই ছোট্ট সরঞ্জামটি আপনাকে কিছু এইচটিএমএল দ্বারা ব্যবহৃত সিএসএস নিয়মের একটি তালিকা দেয়।

এখানে এটি কোড পেনে রয়েছে

এটিতে Run code snippetক্লিক করার Full pageজন্য ক্লিক করুন , তারপরে ক্লিক করুন । তারপরে স্নিপেটের নির্দেশাবলী অনুসরণ করুন। এটি আপনার এইচটিএমএল / সিএসএসের সাথে কাজ করে দেখতে এটি পুরো পৃষ্ঠা চালাতে পারেন।

তবে কেবল একটি সরঞ্জাম হিসাবে আমার কোড পেনটিকে বুকমার্ক করা সহজ।

/* 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>");

Answer 11

এখানে তালিকাভুক্ত সমস্ত সরঞ্জাম সিএসএসের জন্য দুর্দান্ত। আমি ড্রিমউইভার অ্যান্ড কোং সম্পর্কে জানি না তবে আমার ওয়েবসাইট প্রকল্পগুলি পরিষ্কার করার জন্য আমি কিছুক্ষণ আগে একটি ছোট প্রোগ্রাম তৈরি করেছি

এই-অব্যবহৃত ফাইল

এটি সিএসএস এবং স্টাফগুলিতে সহায়তা করে না, বরং অনাথ চিত্র এবং অন্যান্য ধরণের ফাইলের সাহায্যে।

আশা করি এটা সাহায্য করবে!

Answer 12

হিলিয়াম সিএসএস এটির জন্য দুর্দান্ত সরঞ্জাম। যদিও আপনার ওয়েবসাইটটির বিকাশ বা স্থানীয় সংস্করণে আপনার এই সরঞ্জামটি চালানো উচিত তা লক্ষ করা উচিত। আপনি যদি এটি কোনও উত্পাদন সংস্করণে চালান তবে আপনার দর্শনার্থীরা হিলিয়াম পরীক্ষার পরিবেশটি দেখতে সক্ষম হবেন।

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

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

Comments

হেলিয়াম ইতিমধ্যে উত্তর দেওয়া হয়েছিল। এটি এই উত্তরের একটি মন্তব্য হওয়া উচিত ছিল।

— জান ডগজেন

Answer 13

অব্যবহৃত চিত্র ফাইলগুলি খুঁজে পাওয়ার কোনও সরঞ্জাম সম্পর্কে আপনার প্রশ্নের জবাব দেওয়ার জন্য, আপনি আপনার সাইটটি যে সমস্ত চিত্র ব্যবহার করেন সেগুলি সন্ধানের জন্য আপনার সাইটটিকে মাকড়সা করতে জেনু লিঙ্ক স্লুথ ব্যবহার করতে পারেন । তারপরে জেনু আপনাকে এফটিপি এক্সেসের অনুরোধ জানায় যাতে এটি অনাথ ফাইলগুলি খুঁজতে আপনার ডিরেক্টরিগুলি ক্রল করতে পারে। আমি এখনও এটি একটি প্রোডাকশন সার্ভারে ব্যবহার করি নি তবে এটি দেখার পক্ষে উপযুক্ত বলে মনে হচ্ছে।

সম্পাদনা: জাভাস্ক্রিপ্ট দ্বারা ব্যবহৃত চিত্রগুলি মুছে ফেলার জন্য আপনাকে কেবল সতর্ক থাকতে হবে।

Comments

ডাউন-ভোট কেন?

— এসএমবিগস