如何在开发者工具中定位已加载网页的问题CSS规则并删除以修复打印预览空白

• 首先开启打印媒体模拟：按Ctrl+Shift+P（Mac为Cmd+Opt+P）调出开发者工具命令菜单，输入Show Rendering打开渲染面板，找到「模拟CSS媒体」选项，选择print，此时开发者工具会实时加载所有打印生效的样式，无需反复打开打印预览调试。
• 选中你需要在打印中正常显示的页面主容器元素，切换到Elements面板的Styles侧边栏，所有当前生效的打印样式会直接列在对应元素的规则列表中，每条规则后方会标注来源文件与行号，无需手动逐个打开外链CSS搜索。
• 若要快速排查所有visibility: hidden的打印规则，可在Elements面板的搜索框（按Ctrl+F在Elements面板内激活）输入@media print，即可全页面匹配所有打印媒体查询规则的位置。

你删除找到的link标签后打印仍为空白，通常是以下几种情况导致：

• 你搜索print关键词时匹配到的是无关规则，实际生效的隐藏规则来自其他未排查到的样式表
• 页面脚本会动态校验、重新加载对应样式表，手动删除DOM中的link标签会被脚本自动恢复
• 跨域样式表受浏览器同源策略限制，你无法直接通过DOM操作完全移除其生效规则

临时单次生效（适合直接打印当前页面） #

• 方法1：在开启打印模拟、定位到visibility: hidden规则后，直接点击规则左侧的勾选框禁用该规则，或手动将规则值修改为visibility: visible，调整完成后直接打开打印预览即可正常显示。
• 方法2：在开发者工具的Elements面板中，选中head元素，右键选择「Edit as HTML」，在</head>标签前插入以下内联覆盖样式，利用!important优先级直接覆盖原有故障规则：

<style>
@media print {
    /* 覆盖原有隐藏规则 */
    body *, header {
        visibility: visible !important;
    }
    /* 兜底处理其他可能的打印隐藏规则 */
    * {
        visibility: visible !important;
    }
}
</style>

• 方法3：在开发者工具的Console面板中执行以下代码，批量将所有可访问的打印样式中的隐藏属性改为显示，跨域无法访问的规则会被自动跳过：

Array.from(document.styleSheets).forEach(sheet => {
  try {
    Array.from(sheet.cssRules).forEach(rule => {
      if (rule instanceof CSSMediaRule && rule.media.mediaText.includes('print')) {
        Array.from(rule.cssRules).forEach(r => {
          if (r.style.visibility === 'hidden') {
            r.style.visibility = 'visible';
          }
        })
      }
    })
  } catch(e) {}
})

持久化生效（无需每次打开开发者工具调整） #

• 可使用浏览器自定义样式扩展，或脚本管理类扩展，匹配亚马逊退货中心页面URL，自动在页面加载时注入上述覆盖样式，后续打开对应页面打印时会自动生效，无需手动操作。

内容的提问来源于stack exchange，提问作者jxramos