有没有办法在Chrome中查看没有样式的网页？

25

在Firefox下，查看->页面样式->无样式允许查看未样式化的页面。对于一些过度依赖JS /样式表的网站（例如：Lifehacker）很有帮助。

Google的Chrome浏览器下是否有任何类似的功能，和/或我在哪里可以访问？

版本19.0.1084.56 / Ubuntu。

google-chrome css

— 德雷莫比乌斯
source

在Chrome浏览器中，最好的解决方法是使用Firefox。

— wha7ever-恢复莫妮卡

25

禁用所有CSS样式表

鉴于大多数现代页面都在包含的外部CSS文件中定义了所有样式<head>，因此删除head标记将有效地删除所有样式（显式内联样式和脚本设置的样式除外）。右键单击页面，从上下文菜单中选择“ 检查”，然后将其粘贴到“控制台”选项卡中：

document.head.parentNode.removeChild(document.head);

这里是上面的代码，其中可以粘贴为书签的URL的书签版本^{（切换与Chrome的书签栏⌘+ shift+ bMac或ctrl+ shift+ b在Linux / Windows的）}：

javascript:(function(){document.head.parentNode.removeChild(document.head);})()

^{您也可以直接在地址栏中输入上面的代码，但在执行之前请先阅读答案末尾的注释。^。}

去除<head>也可以从devtools进行元素标签，右键单击head标签，并通过上下文菜单删除它：

^{注意：删除head标签是一种蛮力的方法，因为它会杀死所有样式，javascript，网络字体等，并且如果页面内容是用javascript呈现的，则很可能会得到一个空页面。在大多数网站上，它可能会给您带来预期的结果。}

一种更常见的用例是删除页面上特定的烦人事物，例如颜色，边距，iframe等。在这种情况下，以下书签之一将提供更精细的控制。

删除颜色，背景，边距，填充，宽度

创建一个书签，并添加以下片段作为URL：

javascript:(function(){for(i=0;i<document.styleSheets.length;i++){document.styleSheets.item(i).disabled=true;}all=document.getElementsByTagName('*');for(i=0;i<all.length;i++){el=all[i];el.style.cssText='';el.style.width='';el.style.padding='0px';el.style.margin='2px';el.style.backgroundImage='none';el.style.backgroundColor='#fff';el.style.color='#000';}})()

现在，您可以单击您的小书签，以使当前页面上的CSS样式更易读。

^{注意：实际上，页面可能<style>在<body>标记中包含一个块-HTML5标准允许这样做，并且大多数浏览器都支持它。到目前为止，这不是很常见的做法，但是随着Web框架的发展，我们可能会在未来的Web中看到更多的“本地样式表”。}

如果您只是想提高可读性，那么禁用所有CSS可能不会提供最佳体验。在这种情况下，下面的小书签可能会带来更好的结果：

卸下非滚动的页眉/页脚（增加阅读区域）

javascript:(function(){var elems=document.body.getElementsByTagName("*");var len=elems.length;for(var i=0;i<len;i++){var pos=window.getComputedStyle(elems[i],null).getPropertyValue('position');if(pos=='fixed'||pos=='sticky'){var el=elems[i];el.parentNode.removeChild(el);}}})()

删除iframe（杀死大多数横幅等）

javascript:var frames %3D document.getElementsByTagName%28"iframe"%29%3Bfor %28%3Bframes.length%3B%29 %7Bframes%5Bframes.length-1%5D.parentNode.removeChild%28frames%5Bframes.length-1%5D%29%3B%7Dvoid%280%29

^{这也将杀死大多数嵌入式视频，评论小部件等。}

删除所有图像（办公模式浏览）

javascript:(function(){function toArray(c){var a,k;a=new Array;for(k=0;k<c.length;++k)a[k]=c[k];return a;}var images,img,altText;images=toArray(document.images);for(var i=0;i<images.length;++i){img=images[i];altText=document.createTextNode(img.alt);img.parentNode.replaceChild(altText,img)}var alle=document.getElementsByTagName("*");for(var i=0,max=alle.length;i<max;i++){alle[i].style.backgroundImage='none';}})();

注意：由于大多数横幅图像通常都位于iframe中，因此该书签需要与上面的“ 删除iframe”结合使用，并且此书签仅适用于顶级文档。

小书签也可以用于使用广告拦截器时不会显示内容的网站。

您可以使用Bookmarklet Builder最小化代码（“ 格式”按钮），根据需要对其进行编辑，然后最小化（“ 压缩”按钮）到可以粘贴为书签URL的位置。

上面列出的小书签也可以在iOS和Android上的大多数移动网络浏览器上使用。移动浏览器无法从地址栏中运行javascript，但是您可以添加书签，将js代码粘贴为URL，设置标签（例如）clean，然后通过点击书签菜单中的项目来运行它（适用于IOS Safari）或clean在地址栏中输入内容，然后在自动建议下拉列表中点击相应的书签。这可以提高没有阅读模式的页面的可读性。

注意：如果将上面的小书签复制并直接粘贴到地址栏中，您会注意到浏览器会删除javascript:前缀-这是浏览器的安全功能，因此，如果您想直接从地址栏中测试小书签，则需要javascript:在JS代码之前手动添加。

Chrome扩展程序

如果您正在寻找chrome扩展名，那么可以在uMatrix中单击CSS列以禁用所有CSS和样式，在Web Developer中单击CSS选项卡下的选项Disable All Styles。

— ccpizza
source

实际上，uMatrix（我在随后的几年中独立发现）确实可以在逐个站点（或页面或域）的基础上实现此目的。Web Developer（如下所述）过于狂热。

— dredmorbius

7

您可以为此使用Web Developer扩展：

在此处输入图片说明

— 霍斯特斯塔普勒
source

2

谢谢。这似乎可以解决问题。虽然Lifehacker仍然不可读。虽然可以在w3m中使用。老学校就是我们在这里滚动的方式。

— dredmorbius 2012年

嗯问题在于，这是所有站点/页面的全局设置。我只是经历了片刻的“ WTF !!!”。当我突然开始看到样式元素在切换各种Web Developer设置时从各个页面出现/消失。因此，它虽然有用，但并不完全有用。

— dredmorbius

@EdwardMorbius博士：很奇怪。对我来说，这只是暂时的。即使刷新页面也将还原为网站的默认视图。但是我想那也不是你想要的，不是吗？

— Der Hochstapler 2012年

是。在当前会话中切换样式表就足够了。立即切换所有网站的CSS，JS，Cookie等。不幸的是，这似乎正在发生。我将这种经历描述为“轻度烦人”。

— dredmorbius 2012年

2

没有No Style的 Chrome版本（还可以吗？），因此您必须使用其他方法，例如一些其他可以禁用样式的扩展。

您可以使用“ 禁用样式表”扩展名来禁用样式表，也可以使用Web Developer扩展名来启用或禁用所有样式。Pendule也是为此目的的流行扩展。

您还可以使用开发人员工具^{[1] [2]}禁用样式：

齿轮图标-> CSS选项卡->禁用所有样式

— 新技术
source

这似乎禁用了所有页面的所有样式表，而无法在给定页面上启用/禁用样式表。不是我要找的东西。

— dredmorbius

哪一个？有四个选项。

— Synetech

我没有看到扩展程序图标。删除了

— dredmorbius

咦？

— Synetech

URL窗口右侧的通知区域中没有用于“禁用样式表”扩展名的图标。我可以管理设置的唯一方法是浏览扳手->工具->扩展->禁用样式表->选项。不...非常符合人体工程学。

— dredmorbius

1

如果出于速度原因执行此操作，那么我可以建议一个替代方法：链接2

当浏览器打开时，按g并键入您要访问的URL。该浏览器仅支持其支持的标准，但即使在非常旧的PC上，运行速度也惊人。

— 格里
source

1

这更多是一种隐私/将JS的使用保持在最低水平。我倾向于使用w3m而不是控制台浏览器的links / elinks系列-更好的人机工程学，我已经习惯了。是的，但是，我非常熟悉控制台浏览器的速度和轻便程度。有些站点只是被打破了。

— dredmorbius

1

知道了我实际上不使用控制台版本，但是gui一样快。但是，是的，有时候页面很破损。如果所有页面都正常降级，那就太好了。

— 格里

2

我已经知道在极端情况下会使用山猫，一些sed和“ fmt”。这使婴儿耶稣哭泣。

— dredmorbius

1

在Firefox下，查看->页面样式->无样式允许查看未样式化的页面。对于一些过度依赖JS /样式表的网站（例如：Lifehacker）很有帮助。Google的Chrome浏览器下是否有任何类似的功能，和/或我在哪里可以访问？版本19.0.1084.56 / Ubuntu。-爱德华·莫比乌斯博士

...

是。在当前会话中切换样式表就足够了。立即切换所有网站的CSS，JS，Cookie等。不幸的是，这似乎正在发生。我将这种经历描述为“轻度烦人”。-爱德华·莫比乌斯博士

在console（Chromium / Chrome，Firefox，Opera）使用jQuery库，应清除HTML文档中的作者样式：

(function clearStyle(){
c='';$('link[rel=stylesheet]').attr('href',c);
$('style').html(c);$('*').attr('style',c);})()

https://github.com/guest271314/toggleStyles/blob/master/clearStyle.min.js

要在HTML文档中打开或关闭样式，这可能会有所帮助：

https://github.com/guest271314/toggleStyles/blob/master/toggleStyles.js

从本地文件或jQuery CDN将jQuery加载到文档中，记录成功，记录样式状态，通过空格键按下或在控制台上打开或关闭作者样式。

在Chromium / Chrome，Firefox和Opera中针对本地和在线HTML文档进行了测试。

— 客人271314
source

1

目前，我最喜欢的工具是uMatrix浏览器扩展，它甚至可以使用更细粒度的控件：通过相对于当前网站加载域来禁用CSS，JS，图像或其他功能。更改可以轻松切换，设置为永久或强制转换为默认规则。

这种时尚的外观满足了我作为阅读器的大多数自定义需求。阅读器模式（Firefox）倾向于相当可靠地提供样式统一的内容。

扩展问题：在Chrome / Android上，我没有可行的选择，并且上面建议的解决方案不起作用。

— 德雷莫比乌斯
source

0

仅一行jquery代码...使用

jQuery("head").empty();

或在javascript中可以使用

document.getElementsByTagName("head")[0].innerText="";

转到您的网页，然后按ctrl + shift + i，您将看到一个菜单选择控制台并粘贴此document.getElementsByTagName("head")[0].innerText="";代码，然后按Enter

— 维沙尔乔杜里
source

2

该信息将输入到哪里？

— music2myear

转到您的网页，然后按Ctrl + Shift + I，你会看到一个菜单中选择控制台并粘贴此document.getElementsByTagName("head")[0].innerText="";代码，然后按回车

— 维沙尔CHOUDHARY

不必阅读注释来理解答案。请使用“编辑”按钮将此信息添加到答案本身。

— music2myear