![有没有办法在 Chrome 中查看没有样式的网页?](https://linux22.com/image/1321482/%E6%9C%89%E6%B2%A1%E6%9C%89%E5%8A%9E%E6%B3%95%E5%9C%A8%20Chrome%20%E4%B8%AD%E6%9F%A5%E7%9C%8B%E6%B2%A1%E6%9C%89%E6%A0%B7%E5%BC%8F%E7%9A%84%E7%BD%91%E9%A1%B5%EF%BC%9F.png)
在 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 标签并通过上下文菜单将其删除:
注意:删除 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
答案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 文档进行了测试。