☰

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

tag-icon • tag-icon google-chrome css
有没有办法在 Chrome 中查看没有样式的网页？

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

Google Chrome 下是否有类似的功能？或者我可以在哪里访问该功能？

版本 19.0.1084.56/Ubuntu。

答案1

禁用所有 CSS 样式表

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

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

下面是上述代码的书签版本，可以将其粘贴为书签的 URL （在 Chrome 中使用Mac 上的+ +或在 Linux/Windows 上使用+ +切换书签栏）⌘shiftbctrlshiftb：

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

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

<head>也可以从 devtools 中删除元素选项卡，通过右键单击 head 标签并通过上下文菜单将其删除：

删除 Chrome 中的 head 标签

注意：删除 head 标签有点太过粗暴，因为它会破坏所有样式、javascript、Web 字体等，如果页面内容由 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 内，并且此书签仅适用于顶级文档。

书签小工具还可用于那些在使用广告拦截器时不会显示内容的网站。

您可以使用书签生成器取消缩小代码（格式按钮），编辑它以满足您的需要，然后将其缩小回来（压缩按钮）将其粘贴为书签 URL。

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

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

Chrome 扩展程序

如果你正在寻找 chrome 扩展，那么微矩阵您可以点击 CSS 列来禁用所有 CSS 和样式，然后Web开发人员在 CSS 选项卡下有一个选项禁用所有样式。

答案2

您可以使用Web开发人员扩展为：

在此处输入图片描述

答案3

没有 Chrome 版本的没有风格（还没有？），所以你必须使用另一种方法，例如一些其他扩展可以禁用样式。

您可以使用禁用样式表扩展以禁用样式表或Web开发人员扩展以打开或关闭所有样式。摆锤也是一个用于此目的的流行扩展。

您还可以使用开发者工具禁用样式[1][2]：

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

答案4

在 Firefox 下，查看 -> 页面样式 -> 无样式允许查看未设置样式的页面。这对一些过度依赖 JS/样式表的网站很有帮助（例如：Lifehacker）。Google 的 Chrome 下是否有类似的功能，以及/或者我在哪里可以访问它？版本 19.0.1084.56/Ubuntu。- Edward Morbius 博士

...

是的。关闭当前会话的样式表就足够了。为所有网站切换 CSS、JS、cookie 等是完全不行的。不幸的是，这似乎就是正在发生的事情。我会将这种体验描述为“有点烦人”。- Edward Morbius 博士

使用 jQuery 库，console（Chromium/Chrome、Firefox、Opera）应该从 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 加载到文档中（从本地文件或 jQuery 的 CDN），记录成功，记录样式状态，通过空格键或在控制台上打开或关闭作者样式。

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

相关内容