परीक्षण उद्देश्यों के लिए ब्राउज़र में सीएसएस को कैसे निष्क्रिय करें

116

क्या कोई तरीका है कि मैं सभी बाहरी सीएसएस को एक ब्राउज़र (फ़ायरफ़ॉक्स, क्रोम ...) में अक्षम कर सकता हूं?

धीमी इंटरनेट कनेक्शन का उपयोग करते समय, कभी-कभी सीएसएस जानकारी के बिना ब्राउज़र द्वारा केवल नंगे HTML लोड किया जाता है। ऐसा लगता है कि पृष्ठ को स्क्रीन पर कच्चा रखा गया है। आपने StackOverflow के साथ भी इस पर ध्यान दिया होगा।

मैं यह सुनिश्चित करना चाहता हूं कि मेरा वेब पेज ठीक दिखाई दे, भले ही सीएसएस फाइलें लोड न हों।

मेरा मतलब यह नहीं था कि मैं बाह्य सीएसएस इनलाइन को रूपांतरित करना चाहता हूं। लेकिन मैं ब्राउज़र से सभी सीएसएस को स्पष्ट रूप से अक्षम करने का एक तरीका चाहता हूं ताकि मैं अपने तत्वों को बेहतर, पठनीय तरीके से पुन: प्रस्तुत कर सकूं।

मुझे पता है कि मैं <लिंक rel = 'स्टाइलशीट'> प्रविष्टियाँ निकाल सकता हूं, लेकिन क्या होगा यदि मेरे पास बहुत सारे लिंक किए गए पृष्ठ हैं?

html css browser

— ATOzTOA
स्रोत

4

यह एक बहुत अच्छा सवाल है। जैसा कि प्रतीत होता है, उदाहरण के लिए, क्रोम एक तरह से लेखक शैली की शीट को "बंद" करने की अनुमति नहीं देता है जो एक मानक उपयोगकर्ता के लिए स्वीकार्य है। यह क्रोम को सीएसएस 2.1 के अनुरूप नहीं बनाता है, जैसा कि कल्पना के अध्याय 3.2.6 में देखा जा सकता है, जहां यह कहा जाता है कि, "यूए को उपयोगकर्ता को लेखक शैली शीट के प्रभाव को बंद करने की अनुमति देनी चाहिए।" वही अन्य ब्राउज़रों के लिए सच हो सकता है जो इसे मूल रूप से अनुमति नहीं देते हैं।

— निकब्राइट

1

पृष्ठ पर राइट-क्लिक करें, संदर्भ मेनू से निरीक्षण का चयन करें , <head>टैग का पता लगाएं , राइट-क्लिक करें और हटाएं तत्व चुनें ।

— ccpizza

59

फ़ायरफ़ॉक्स और क्रोम के लिए वेब डेवलपर प्लगइन ऐसा करने में सक्षम है

एक बार जब आप प्लगइन स्थापित कर लेते हैं तो विकल्प सीएसएस मेनू में उपलब्ध होता है। उदाहरण के लिए,CSS > Disable Styles > Disable All Styles

वैकल्पिक रूप से डेवलपर टूलबार सक्षम होने से आप दबा सकते हैं Alt+Shift+A।

— JoelKuiper
स्रोत

10

क्या आप यह बता सकते हैं कि वहां कैसे किया जाए?

— जॉन ड्वोरक

धन्यवाद ... क्या फायरबग में यह सुविधा है?

— ATOzTOA

3

फायरबग आपको कुछ चयनकर्ताओं को चुनिंदा रूप से अक्षम / सक्षम करने और मौजूदा सीएसएस को संपादित करने की अनुमति देता है, इसलिए एक अर्थ में यह संभव है। आपके उद्देश्य के लिए वेब डेवलपर प्लगइन अधिक उपयुक्त लगता है, हालांकि, आपके पास पुराने / मोबाइल ब्राउज़रों के लिए किसी साइट की पहुंच का आकलन करने के लिए अन्य उपयोगी टूल के साथ सभी सीएसएस या विशिष्ट स्टाइलशीट को अक्षम करने का विकल्प है।

— जोएलक्युपर

7

इस जवाब में यह नहीं है कि इसे कैसे करना है, जो सवाल पूछ रहा है।

— नेसदान

1

Paciello Group का एक समान टूलबार है जो IE 9/10/11 में काम करता है। paciellogroup.com/resources/wat

— RPNinja

70

क्रोम / क्रोमियम में आप इसे डेवलपर कंसोल में कर सकते हैं।

डेवलपर कंसोल को ctrl-shift-j या Menu-> Tools-> Developer Console द्वारा लाएं।
डेवलपर कंसोल के भीतर स्रोत टैब पर ब्राउज़ करें।
इस टैब के ऊपरी-बाएँ कोने में प्रकटीकरण त्रिकोण वाला एक आइकन है। इस पर क्लिक करें।
<Domain> → css → <css फ़ाइल में ब्राउज़ करें जिसे आप समाप्त करना चाहते हैं>
टेक्स्ट और हिट डिलीट के सभी हाइलाइट करें।
जिस स्टाइलशीट को आप निष्क्रिय करना चाहते हैं, उसके लिए रगड़ें और दोहराएं।

— डेविड बाउकम
स्रोत

4

यदि आपके पास बहुत सारे स्रोत हैं और जहां सीएसएस नेस्टेड किया गया है, वहां ढूंढना चाहते हैं, तो नेटवर्क टैब पर शुरू करें और बस स्टाइल्सशीट को शामिल करने के लिए प्रतिक्रियाओं को फ़िल्टर करें। फिर प्रतिक्रिया पर राइट क्लिक करें और "सोर्स पैनल में खोलें" पर क्लिक करें। उसके बाद Ctrl + A, Del

— KyleMit

@MartinF "लिटिल प्ले एरो" को ठीक से प्रकटीकरण त्रिकोण / प्रकटीकरण विजेट कहा जाता है।

— jsejcksn

आप भगवान हैं।

— रजत सक्सेना

21

फ़ायरफ़ॉक्स (विन और मैक)

मेनू टूलबार के माध्यम से, चुनें: "देखें"> "पृष्ठ शैली"> "कोई शैली नहीं"
वेब डेवलपर टूलबार के माध्यम से, चुनें: "CSS"> "शैलियाँ अक्षम करें"> "सभी शैलियाँ"

यदि वेब देव टूलबार स्थापित है, तो लोग इस कीबोर्ड शॉर्टकट का उपयोग कर सकते हैं: Command+ Shift+ S(मैक) और Control+ Shift+ S(विन)

सफारी (मैक): मेनू टूलबार के माध्यम से, "विकास"> "अक्षम शैलियाँ" चुनें
ओपेरा (जीत): मेनू के माध्यम से, "पृष्ठ"> "शैली"> "उपयोगकर्ता मोड" चुनें
क्रोम (जीत): गियर आइकन के माध्यम से, "सीएसएस" टैब> "सभी शैलियों को अक्षम करें" चुनें
इंटरनेट एक्सप्लोरर 8: मेनू टूलबार के माध्यम से, "देखें"> "स्टाइल"> "नो स्टाइल" चुनें
Internet Explorer 7: IE डेवलपर टूलबार मेनू के माध्यम से: अक्षम करें> सभी CSS
इंटरनेट एक्सप्लोरर 6: वेब एक्सेसबिलिटी टूलबार के माध्यम से, "सीएसएस"> "सीएसएस को अक्षम करें" चुनें

— अरविंद नेकां
स्रोत

4

Chrome (Win): यह विकल्प अब मौजूद नहीं है; @ डेविड बावुम का जवाब नीचे काम करता है।

— डेविड कुक

17

यह स्क्रिप्ट मेरे लिए काम करती है (हैट टिप से स्क्रेप्डकोला)

var el=document.getElementsByTagName('*');for(var i=0;i<el.length; i++){if (el[i].getAttribute("type")=="text/css") el[i].parentNode.removeChild(el[i]); };

इनलाइन शैली बरकरार है, हालांकि

— apurkrt
स्रोत

7

$('style,link[rel="stylesheet"]').remove()वही प्राप्त करता है, अगर jQuery है। से twitter.com/janlelis/status/433250838757126146 ।

— TuteC 14

1

यह कमाल है, क्रोम में बस एफ 12 मारा, हिट पेस्ट कंसोल करने के लिए ब्राउज़ करें और दर्ज करें।

— एरिक बिशर्ड 28:00

11

स्क्रेप्डोकोला / रेनर्जी के विचार पर विस्तार करते हुए, आप जावास्क्रिप्ट को एक बुकमार्कलेट में बदल सकते हैं जो कि यूआरआई के खिलाफ निष्पादित करता है javascript:इसलिए कोड को कई पृष्ठों में आसानी से इस्तेमाल किया जा सकता है बिना देव टूल्स को खोलने या अपने क्लिपबोर्ड पर कुछ भी रखने के लिए।

बस निम्नलिखित स्निपेट चलाएं और लिंक को अपने बुकमार्क / पसंदीदा बार पर खींचें:

<a href="javascript: var el = document.querySelectorAll('style,link');
         for (var i=0; i<el.length; i++) {
           el[i].parentNode.removeChild(el[i]); 
         };">
  Remove Styles 
</a>

स्निपेट का विस्तार करें

मैं एक पृष्ठ पर हजारों तत्वों के माध्यम से लूपिंग से बचूंगा getElementsByTagName('*')और प्रत्येक व्यक्ति पर व्यक्तिगत रूप से जांच और कार्रवाई करनी होगी।
$('style,link[rel="stylesheet"]').remove()जब अतिरिक्त जावास्क्रिप्ट भारी बोझिल न हो तो मैं पेज पर मौजूद jQuery पर निर्भर होने से बचूंगा।

— KyleMit
स्रोत

यह करने का सबसे तेज़ तरीका है, मुझे यह तरीका पसंद है।

— ling

इनलाइन सीएसएस को साफ करने के लिए: document.querySelectorAll('*[style]').forEach((e)=>e.removeAttribute('style'));केवल मौजूदा styleविशेषताओं वाले तत्वों के माध्यम से पुनरावृति ।

— मेट गेसेल

10

एडब्लॉक प्लस स्थापित करें, फिर *.cssफ़िल्टर विकल्प (कस्टम फ़िल्टर टैब) में नियम जोड़ें । विधि केवल बाहरी स्टाइलशीट पर प्रभाव डालती है । यह इनलाइन शैलियों को बंद नहीं करता है।

सभी बाहरी CSS अक्षम करें

यह तरीका वही करता है जो आपने पूछा था।

— yakunins
स्रोत

1

यह एकमात्र समाधान है जो तब भी काम करता है जब आप पृष्ठ को फिर से लोड करते हैं। दुर्भाग्य से, आप विज्ञापनों के साथ इसका परीक्षण नहीं कर सकते।

— sinuhepop

1

@sinuhepop आप ABP में सभी फ़िल्टर सूचियों को अक्षम कर सकते हैं। वह काम नहीं करता है?

— तुपुर्तनुत

ज़रूर! मैं इसे आजमाऊंगा। धन्यवाद

— sinuhepop

4

कम चरणों में @David Baucum के समाधान को प्राप्त करने का दूसरा तरीका :

राइट क्लिक -> तत्व का निरीक्षण करें
स्टाइलशीट के नाम पर क्लिक करें जो आपके तत्व को प्रभावित करता है (सिर्फ घोषणा के दाईं ओर)
टेक्स्ट और हिट डिलीट के सभी हाइलाइट करें।

यह कुछ मामलों में आसान हो सकता है।

— राफेल लरीनागा
स्रोत

4

जैसा कि अधिकांश उत्तर यहां बहुत पुराने प्रतीत होते हैं, मेनू आइटमों को संदर्भित करते हुए मैं लोकप्रिय ब्राउज़रों के वर्तमान संस्करणों में खोजने के लिए प्रतीत नहीं हो सकता, यहां फ़ायरफ़ॉक्स डेवलपर संस्करण में वर्तमान संस्करण में इसे कैसे करें:

डेवलपर टूल खोलें ( CTRL + SHIFT + I)
स्टाइल एडिटर टैब चुनें
वहां आपको अपने दस्तावेज़ में CSS के सभी स्रोतों को देखना चाहिए। आप उनमें से प्रत्येक को उनके बगल में स्थित नेत्र आइकन पर क्लिक करके अक्षम कर सकते हैं।

— डैनियल किस-नेगी
स्रोत

4

बाहरी सीएसएस (आजकल के अधिकांश पृष्ठ) पर भरोसा करने वाले पृष्ठों के लिए headतत्व को मारना एक सरल और विश्वसनीय उपाय है :

document.querySelector("head").remove();

इस पृष्ठ पर (Chrome / Firefox में) राइट-क्लिक करें, निरीक्षण का चयन करें , कोड को devtools कंसोल में पेस्ट करें और Enter दबाएं ।

उसी कोड का एक बुकमार्क संस्करण जिसे आप बुकमार्क के URL के रूप में पेस्ट कर सकते हैं:

javascript:(function(){document.querySelector("head").remove();})()

अब अपने पसंदीदा बार में बुकमार्क पर क्लिक करने से पृष्ठ बिना किसी सीएसएस स्टाइलशीट के दिखाई देगा।

इनलाइन शैलियों का उपयोग करने वाले पृष्ठों के लिए सिर को हटाने से काम नहीं चलेगा।

यदि आप MacOS पर Safari का उपयोग करते हैं तो:

सफारी प्राथमिकताएं ( cmd+ ,) खोलें और उन्नत टैब में चेकबॉक्स को सक्षम करें "मेनू बार में विकास दिखाएं"।
अब डेवलप मेन्यू के तहत आपको डिसेबल स्टाइल्स का ऑप्शन मिलेगा ।

— ccpizza
स्रोत

2

मैंने Chrome डेवलपर टूल में प्रयास किया और यह विधि केवल तभी मान्य है जब CSS को बाहरी फ़ाइलों के रूप में शामिल किया गया हो और यह इनलाइन शैलियों के लिए काम नहीं करेगा।

Array.prototype.forEach.call(document.querySelectorAll('link'), (element)=>element.remove());

या

var linkElements = document.querySelectorAll('link');
Array.prototype.forEach.call(linkElements, (element)=>element.remove());

स्पष्टीकरण

document.querySelectorAll('link')सभी लिंक नोड मिलते हैं। यह DOM तत्वों की सरणी लौटाएगा। ध्यान दें कि यह जावास्क्रिप्ट की Array ऑब्जेक्ट नहीं है।
Array.prototype.forEach.call(linkElements लिंक तत्वों के माध्यम से छोरों
element.remove() DOM से एलिमेंट हटाता है

सादे HTML पृष्ठ में परिणाम

— Vetrivel
स्रोत

वैकल्पिक रूप से, इनलाइन शैलियों के लिए:document.querySelectorAll("style").forEach((e)=>(e.remove()))

— सामी बेनचेरीफ

2

: यदि आप निम्नलिखित के साथ निरीक्षक से किसी भी अनुरोध (एक भी सीएसएस फ़ाइल के लिए) ब्लॉक कर सकते हैं
राइट क्लिक करें> ब्लॉक अनुरोध URL
> अन्य सीएसएस फ़ाइलें अक्षम किए बिना https://umaar.com/dev-tips/68-block-requests/ यह एक मानक निरीक्षक सुविधा, कोई प्लगइन्स या ट्रिक्स की आवश्यकता नहीं है

— Pdor
स्रोत

1

फ़ायरफ़ॉक्स पर, मेनू कमांड व्यू> पेज स्टाइल> नो स्टाइल के माध्यम से सबसे सरल तरीका है। लेकिन यह कुछ प्रेजेंटेशनल HTML मार्कअप के प्रभावों को भी बदल देता है। इसलिए @JoelKuiper द्वारा सुझाए गए प्लगइन्स का उपयोग करना आमतौर पर बेहतर होता है; वे और अधिक लचीलापन देते हैं (जैसे, बस कुछ स्टाइल शीट बंद करना)।

— जुक्का के। कोरपेला
स्रोत

0

वास्तव में, यह आपके विचार से आसान है। किसी भी ब्राउज़र में डीबग कंसोल को लाने के लिए F12 दबाएं। यह IE, फ़ायरफ़ॉक्स और क्रोम के लिए काम करता है। ओपेरा के बारे में निश्चित नहीं है। फिर तत्व विंडो में सीएसएस पर टिप्पणी करें। बस।

— devXen
स्रोत

लिंक्स अन्य सभी स्टाइल को भी नजरअंदाज करेगा। यह यहाँ वांछित नहीं है।

— जॉन ड्वोरक

0

ब्राउज़र डेवलपमेंट टूल के साथ HTML का निरीक्षण करते समय, आप जो पसंद करते हैं (जैसे Chrome Devtools) <head>तत्व को ढूंढते हैं और उसे बिल्कुल हटा देते हैं।

ध्यान दें कि यह js भी हटा देगा लेकिन मेरे लिए यह पृष्ठ को नग्न करने का सबसे तेज़ तरीका है ।

— TheodorosPloumis
स्रोत

0

सभी सुझाए गए उत्तर केवल उस पृष्ठ लोड के लिए सीएसएस को समाप्त करते हैं। आपके उपयोग-मामले के आधार पर, आप सीएसएस को लोड न करने की इच्छा कर सकते हैं:

Chrome देव टूल> नेटवर्क टैब> प्रश्न में स्टाइलशीट पर राइट क्लिक करें> ब्लॉक अनुरोध url

— phillyslick
स्रोत

1

यह भी आवश्यक है कि "पूरे ब्राउज़र सत्र के लिए CSS को कैसे बंद किया जाए, चाहे हम कितनी भी साइट या विंडो या टैब खोलें।"

— डैन जैकबसन

0

उन लोगों के लिए जो कोई प्लगइन या अन्य सामान नहीं चाहते हैं, हम css को निष्क्रिय / सक्षम करने के लिए document.styleSheets का उपयोग कर सकते हैं।

// सभी सीएसएस को निष्क्रिय करने के लिए कोड

for (const item in document.styleSheets) {
  document.styleSheets[item].disabled=false;
}

यदि आप क्रोम का उपयोग करते हैं, तो आप एक फ़ंक्शन बना सकते हैं और अपने स्निपेट में जोड़ सकते हैं। ताकि आप किसी भी साइट के लिए सीएसएस को सक्षम / अक्षम करने के लिए कंसोल का उपयोग कर सकें।

// स्निपेट -> अक्षम करें

function disableCss(value = true){
  for (const item in document.styleSheets) {
    document.styleSheets[item].disabled=value;
  }  
}

// सांत्वना में

disableCss() // by default is disable
disableCss(false) // to enable

— cijo केबी
स्रोत