如何从加载的网页中找到 css 模式并将其删除

Question

有一个 Amazon.com 页面无法在打印预览中呈现并显示为空白（它是 在线 Return Center\Your Return 摘要页)。通过在本地保存的页面副本上进行大量试验和错误，我在一些有缺陷的 linked 样式表中找到了罪魁祸首，这些样式表在打印预览期间隐藏了所有内容...

@media print {
    body *, header {
        visibility: hidden;
    }
}

但是回到原始网站，我很难从开发人员工具的实时页面中找到该源。我在哪里可以从开发人员工具中查找这种结构并覆盖它，以便打印预览按预期呈现？

我试过的

到目前为止，从 Elements 视图我正在搜索所有 link rel="stylesheet" 命中并手动跟踪所有 hrefs 到 css 并搜索关键字打印。结果成功了，但是当我删除 link 标签并返回页面进行打印时，我仍然得到相同的空白页。可能是服务器端错误？

这是在 head 部分

中找到的 link

<link rel="stylesheet" href="https://images-na.ssl-images-amazon.com/images/I/01WIasbg6mL._RC|014yivy0BxL.css_.css?AUIClients/PREXWebAppBuzzAssets-confirmationPage">

我可以在本地做什么来删除这个坏的 css？

这是我正在谈论的预览

Answer 1

哦，等等，我不确定我之前做错了什么，但是当我右键单击开发人员工具的元素视图中的 link 标签并 selected Delete element 预览现在按预期工作。这最终删除了整个样式表的全部效果，我想知道是否有更灵活的方法来删除 select @media print 部分

Answer 2

来自作者回答的评论：

对于单个删除并打印，您可以尝试 force Chrome to use the screen styles，即使它通常会通过反转链接答案中的步骤使用 print。

如果使用 Chrome 打开开发者工具，点击右上角的 3 个垂直点，转到 More tools --> Rendering

然后找到Emulate CSS media type列表框和selectScreen。触发打印并查看打印预览并检查内容是否按预期呈现并继续打印。

如何从加载的网页中找到 css 模式并将其删除

How to locate a css pattern from a loaded webpage and delete it

css

developer-tools